メインコンテンツまでスキップ

商品詳細ブロック

ViewProductコンポーネントは、TypeScriptで構築された完全にカスタマイズ可能な商品表示コンポーネントです。組織情報、商品画像、チップ、タグ、セクション、モダンなデザインパターンを備えたカスタマイズ可能なアクションを含む商品詳細の表示のための完全なインターフェースを提供します。

🚀 インストール​

npm install @nodeblocks/frontend-view-product-block

📖 使用方法​

import {ViewProduct} from '@nodeblocks/frontend-view-product-block';
ライブエディター
function BasicViewProduct() {
  const chips = [
    { label: '新着' },
    { label: '注目商品' }
  ];

  const tags = [
    { icon: 'star', label: 'プレミアム' },
    { label: ['電子機器', 'モバイル'] }
  ];

  const sections = [
    { icon: 'info', label: 'モデル', value: 'iPhone 15 Pro' },
    { icon: 'attach_money', label: '価格', value: '¥149,800' },
    { label: '在庫状況', value: '在庫あり' }
  ];

  const actions = [
    { label: 'カートに追加', onClick: () => console.log('カートに追加されました') },
    { label: '今すぐ購入', onClick: () => console.log('今すぐ購入がクリックされました') }
  ];

  return (
    <ViewProduct
      organizationName="テックストア"
      organizationBannerLink="#organization/techstore"
      organizationLogoUrl="/img/icon.png"
      imageUrl="/img/undraw_docusaurus_react.svg"
      imageAlt="iPhone 15 Pro"
      chips={chips}
      headerTitle="iPhone 15 Pro - 最新モデル"
      tags={tags}
      sections={sections}
      actions={actions}
      style={{backgroundColor: 'white', padding: '16px'}}>
      <ViewProduct.Header>
        <ViewProduct.CompanyName />
        <ViewProduct.Image />
        <ViewProduct.Chips />
        <ViewProduct.Title />
      </ViewProduct.Header>
      <ViewProduct.Content />
      <ViewProduct.Actions />
    </ViewProduct>
  );
}
結果
Loading...

🔧 プロパティリファレンス​

メインコンポーネントのプロパティ​

プロパティ型デフォルト説明
organizationNamestringundefined商品を販売する組織の名前
organizationBannerLinkstringundefined組織バナーのリンクURL
organizationLogoUrlstringundefined組織ロゴ画像のURL
imageUrlstring必須メイン商品画像のソースURL
imageAltstringundefined商品画像のaltテキスト
chipsArray<{label: string}>必須表示するチップラベルの配列
headerTitlestring必須商品のメインタイトルテキスト
tagsArray<{icon?: IconType, label: string | string[]}>必須オプションアイコン付きタグの配列
sectionsArray<{icon?: IconType, label: string, value: string}>必須情報セクションの配列
actionsArray<{label: ReactNode, onClick: () => void}>undefinedアクションボタンの配列
classNamestringundefinedコンテナスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

サブコンポーネント​

ViewProductコンポーネントは、異なるセクション用の複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

ViewProduct.CompanyName​

組織名をヘッディングとして表示します。

プロパティ型デフォルト説明
childrenReactNodeコンテキストからデフォルト会社名をオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.Image​

メイン商品画像を表示します。

プロパティ型デフォルト説明
imageUrlstringコンテキストから商品画像のソースURL
imageAltstringコンテキストから商品画像のaltテキスト
childrenReactNodeコンテキストからデフォルト画像をオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.Chips​

商品チップを表示するコンテナ。

プロパティ型デフォルト説明
chipsArray<{label: string}>コンテキストから表示するチップの配列
childrenReactNodeコンテキストからデフォルトチップをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.Title​

商品タイトルをヘッディングとして表示します。

プロパティ型デフォルト説明
childrenReactNodeコンテキストからデフォルトタイトルをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.Header​

会社名、画像、チップ、タイトルを含む商品ヘッダーのコンテナ。

プロパティ型デフォルト説明
organizationNamestringコンテキストからヘッダー用の組織名
organizationLogostringコンテキストから組織ロゴURL
organizationBannerLinkstringコンテキストから組織バナーリンク
imageUrlstringコンテキストから商品画像URL
imageAltstringコンテキストから商品画像altテキスト
chipsArray<{label: string}>コンテキストからチップの配列
headerTitlestringコンテキストから商品タイトル
childrenReactNodeコンテキストからデフォルトヘッダーコンテンツをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.Sections​

複数の情報セクションを表示するコンテナ。

プロパティ型デフォルト説明
sectionsArray<{icon?: IconType, label: string, value: string}>コンテキストから表示するセクションの配列
childrenReactNodeコンテキストからデフォルトセクションをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.Tags​

商品タグを表示するコンテナ。

プロパティ型デフォルト説明
tagsArray<{icon?: IconType, label: string | string[]}>コンテキストから表示するタグの配列
childrenReactNodeコンテキストからデフォルトタグをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.CompanyBanner​

組織のクリック可能なバナーを表示します。

プロパティ型デフォルト説明
companyNameReactNodeコンテキストから表示する会社名
linkstringコンテキストからバナーリンクのURL
iconenumundefinedバナー用のオプションアイコン
logostringコンテキストからバナー用のロゴURL
childrenReactNodeコンテキストからデフォルトバナーをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML a 要素プロパティを継承します。

ViewProduct.Content​

タグ、セクション、会社バナーを含むメイン商品コンテンツのコンテナ。

プロパティ型デフォルト説明
tagsArray<{icon?: IconType, label: string | string[]}>コンテキストからタグの配列
sectionsArray<{icon?: IconType, label: string, value: string}>コンテキストからセクションの配列
organizationNamestringコンテキストから組織名
organizationBannerLinkstringコンテキストから組織バナーリンク
organizationLogoUrlstringコンテキストから組織ロゴURL
childrenReactNodeコンテキストからデフォルトコンテンツをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

ViewProduct.Actions​

アクションボタンのコンテナ。

プロパティ型デフォルト説明
actionsArray<{label: ReactNode, onClick: () => void}>コンテキストからアクションボタンの配列
childrenReactNodeコンテキストからデフォルトアクションをオーバーライドするカスタムコンテンツ
classNamestringundefinedスタイリング用の追加CSSクラス名

注意: このコンポーネントはすべてのHTML div 要素プロパティを継承します。

🔧 TypeScript サポート​

包括的な型定義による完全なTypeScriptサポート:

import ViewProduct from '@nodeblocks/frontend-view-product-block';
import { ReactNode } from 'react';

interface ProductChip {
  label: string;
}

interface ProductTag {
  icon?: IconType;
  label: string | string[];
}

interface ProductSection {
  icon?: IconType;
  label: string;
  value: string;
}

interface ProductAction {
  label: ReactNode;
  onClick: () => void;
}

interface ViewProductProps {
  organizationName?: string;
  organizationBannerLink?: string;
  organizationLogoUrl?: string;
  imageUrl: string;
  imageAlt?: string;
  chips: ProductChip[];
  headerTitle: string;
  tags: ProductTag[];
  sections: ProductSection[];
  actions?: ProductAction[];
  className?: string;
  children?: ReactNode;
}

interface CustomProductData {
  id: string;
  name: string;
  price: number;
  category: string;
  brand: string;
  availability: 'in-stock' | 'out-of-stock' | 'pre-order';
  rating: number;
  features: string[];
  specifications: {
    [key: string]: string;
  };
}

const ProductDetailsView = () => {
  const productData: CustomProductData = {
    id: 'PROD-2024-001',
    name: 'プレミアムワイヤレスヘッドホン',
    price: 29999,
    category: '電子機器',
    brand: 'AudioTech',
    availability: 'in-stock',
    rating: 4.8,
    features: ['ノイズキャンセリング', 'Bluetooth 5.0', '急速充電'],
    specifications: {
      'バッテリー持続時間': '30時間',
      'ドライバーサイズ': '40mm',
      '重量': '250g'
    }
  };

  const chips: ProductChip[] = [
    { label: 'ベストセラー' },
    { label: '送料無料' }
  ];

  const tags: ProductTag[] = [
    { icon: 'star', label: `${productData.rating} 評価` },
    { label: productData.features }
  ];

  const sections: ProductSection[] = [
    { icon: 'info', label: 'ブランド', value: productData.brand },
    { icon: 'category', label: 'カテゴリ', value: productData.category },
    { icon: 'attach_money', label: '価格', value: `¥${productData.price.toLocaleString()}` },
    { icon: 'inventory', label: '在庫状況', value: productData.availability },
    ...Object.entries(productData.specifications).map(([key, value]) => ({
      label: key,
      value: value
    }))
  ];

  const actions: ProductAction[] = [
    { 
      label: 'カートに追加', 
      onClick: () => console.log(`${productData.name} をカートに追加しました`) 
    },
    { 
      label: '今すぐ購入', 
      onClick: () => console.log(`${productData.name} を購入中`) 
    }
  ];

  return (
    <ViewProduct
      organizationName="AudioTech ストア"
      organizationBannerLink="/brands/audiotech"
      organizationLogoUrl="/audiotech-logo.png"
      imageUrl="/headphones-image.jpg"
      imageAlt={productData.name}
      chips={chips}
      headerTitle={productData.name}
      tags={tags}
      sections={sections}
      actions={actions}
      className="custom-product-view">
      <ViewProduct.Header />
      <ViewProduct.Content />
      <ViewProduct.Actions />
    </ViewProduct>
  );
};

// TypeScriptを使用したカスタムコンポーネントオーバーライド
const CustomProductView = () => {
  const customChips: ProductChip[] = [
    { label: '限定版' },
    { label: '24時間配送' }
  ];

  const customTags: ProductTag[] = [
    { icon: 'local_fire_department', label: 'ホットディール' },
    { icon: 'verified', label: ['認定済み', '保証付き'] }
  ];

  const customSections: ProductSection[] = [
    { icon: 'timer', label: '配送時間', value: '24時間' },
    { icon: 'local_shipping', label: '配送', value: '無料' },
    { 
      icon: 'support_agent', 
      label: 'サポート', 
      value: '24時間365日カスタマーサービス' 
    }
  ];

  return (
    <ViewProduct
      organizationName="プレミアム電子機器"
      headerTitle="限定ゲーミングヘッドセット"
      imageUrl="/gaming-headset.jpg"
      chips={customChips}
      tags={customTags}
      sections={customSections}>
      <ViewProduct.Header className="custom-header">
        <ViewProduct.CompanyName />
        <div className="custom-image-container">
          <ViewProduct.Image />
        </div>
        <ViewProduct.Chips />
        <ViewProduct.Title />
      </ViewProduct.Header>
      
      <ViewProduct.Content>
        <div className="custom-content-layout">
          <ViewProduct.Tags />
          <ViewProduct.Sections />
          <ViewProduct.CompanyBanner />
        </div>
      </ViewProduct.Content>
      
      <ViewProduct.Actions />
    </ViewProduct>
  );
};

モダンなウェブ標準を使用して❤️で構築されました。