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

商品詳細ブロック

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

🚀 インストール​

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

📖 使用法​

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

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

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

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

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

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

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

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

注意: このコンポーネントはMUI StackProps を拡張し、すべてのStackコンポーネントプロパティを継承します。

サブコンポーネント​

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

ViewProduct.CompanyName​

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

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

注意: このコンポーネントは variant="h6" と component="h6" を持つMUI TypographyProps を拡張します。

ViewProduct.Image​

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

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

注意: このコンポーネントはMUI BoxProps を拡張します。

ViewProduct.Chips​

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

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

注意: このコンポーネントは direction="row" と spacing={0.5} を持つMUI StackProps を拡張します。

ViewProduct.Title​

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

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

注意: このコンポーネントは variant="h6" と component="h6" を持つMUI TypographyProps を拡張します。

ViewProduct.Header​

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

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

注意: このコンポーネントは direction="column" と spacing={2} を持つMUI StackProps を拡張します。

ViewProduct.Sections​

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

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

注意: このコンポーネントは direction="column" と spacing={0} を持つMUI StackProps を拡張します。

ViewProduct.Tags​

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

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

注意: このコンポーネントは direction="row" と spacing={0.5} を持つMUI StackProps を拡張します。

ViewProduct.Content​

タグとセクションを含むメイン商品コンテンツのコンテナ。

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

注意: このコンポーネントは direction="column" と spacing={2} を持つMUI StackProps を拡張します。

ViewProduct.Actions​

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

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

注意: このコンポーネントは direction="row" と spacing={2} を持つMUI StackProps を拡張します。

🎨 設定例​

Custom Styled Components​

function StyledViewProductComponents() {
  const chips: ProductChip[] = [{label: '新着'}];
  const tags: ProductTag[] = [{label: 'プレミアム'}];
  const sections: ProductSection[] = [{label: '価格', value: '¥19,900'}];

  return (
    <ViewProduct
      organizationName="ストア"
      imageUrl="/product.jpg"
      headerTitle="商品タイトル"
      chips={chips}
      tags={tags}
      sections={sections}
    >
      <ViewProduct.Header
        sx={{
          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          borderRadius: '16px',
          padding: '24px',
          color: 'white',
        }}
      >
        <ViewProduct.CompanyName />
        <ViewProduct.Image />
        <ViewProduct.Chips />
        <ViewProduct.Title />
      </ViewProduct.Header>
      <ViewProduct.Content>
        <ViewProduct.Tags />
        <ViewProduct.Sections />
      </ViewProduct.Content>
      <ViewProduct.Actions />
    </ViewProduct>
  );
}

Block Override Pattern​

function BlockOverrideViewProduct() {
  const chips: ProductChip[] = [{label: 'セール'}];
  const tags: ProductTag[] = [{label: '限定'}];
  const sections: ProductSection[] = [{label: '在庫', value: '残り5個'}];
  const actions: ProductAction[] = [{label: '今すぐ購入', onClick: () => {}}];

  return (
    <ViewProduct
      organizationName="ショップ"
      imageUrl="/product.jpg"
      headerTitle="特別商品"
      chips={chips}
      tags={tags}
      sections={sections}
      actions={actions}
    >
      {({defaultBlocks}) => ({
        blocks: {
          ...defaultBlocks,
          header: {
            ...defaultBlocks.header,
            props: {
              ...defaultBlocks.header.props,
              sx: {backgroundColor: '#f8fafc', borderRadius: '12px'},
            },
          },
          // Add custom banner block
          customBanner: (
            <div
              style={{
                padding: '12px 16px',
                backgroundColor: '#fef3c7',
                borderRadius: '8px',
                textAlign: 'center',
                color: '#92400e',
                fontWeight: '600',
              }}
            >
              🔥 特別オファー - 本日のみ20%オフ！
            </div>
          ),
        },
        blockOrder: ['header', 'customBanner', 'content', 'actions'],
      })}
    </ViewProduct>
  );
}

🔧 TypeScriptサポート​

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

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

// Chip type for product badges
interface ProductChip {
  label: string;
}

// Tag type for product categories/features
interface ProductTag {
  label: string | string[];
}

// Section type for product details
interface ProductSection {
  icon?: SvgIconComponent;
  label: string;
  value: string;
}

// Action type for buttons
interface ProductAction {
  label: ReactNode;
  onClick: () => void;
}

function TypedViewProductExample() {
  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 productData: CustomProductData = {
    id: 'PROD-2024-001',
    name: 'Premium Wireless Headphones',
    price: 299.99,
    category: 'Electronics',
    brand: 'AudioTech',
    availability: 'in-stock',
    rating: 4.8,
    features: ['Noise Cancellation', 'Bluetooth 5.0', 'Fast Charging'],
    specifications: {
      'Battery Life': '30 hours',
      'Driver Size': '40mm',
      Weight: '250g',
    },
  };

  const chips: ProductChip[] = [{label: 'Best Seller'}, {label: 'Free Shipping'}];

  const tags: ProductTag[] = [{label: `${productData.rating} Rating`}, {label: productData.features}];

  const sections: ProductSection[] = [
    {label: 'Brand', value: productData.brand},
    {label: 'Category', value: productData.category},
    {label: 'Price', value: `$${productData.price}`},
    {label: 'Availability', value: productData.availability},
    ...Object.entries(productData.specifications).map(([key, value]) => ({
      label: key,
      value: value,
    })),
  ];

  const actions: ProductAction[] = [
    {
      label: 'Add to Cart',
      onClick: () => console.log(`Added ${productData.name} to cart`),
    },
    {
      label: 'Buy Now',
      onClick: () => console.log(`Purchasing ${productData.name}`),
    },
  ];

  return (
    <ViewProduct
      organizationName="AudioTech Store"
      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>
  );
}

📝 注意事項​

  • コンポーネントはMUIの Stack コンポーネントをベースとして使用し、柔軟なレイアウトオプションを提供します
  • すべてのサブコンポーネントはメインコンポーネントからコンテキスト値を自動的に受け取ります
  • tags プロパティは単一の文字列と文字列の配列の両方をサポートします（" / "で結合して表示）
  • sections プロパティはオプションのMUI SvgIconComponent アイコンを受け入れます（提供されない場合は StickyNote2Outlined がデフォルト）
  • アクションは variant="contained" と size="medium" を持つMUI Button コンポーネントとしてレンダリングされます
  • チップは variant="outlined" と color="primary" を持つMUI Chip コンポーネントとしてレンダリングされます
  • コンポーネントは深いカスタマイズのためのブロックオーバーライドパターンを使用します
  • デフォルトブロック: header、content、actions
  • CSSクラスはBEMスタイルの命名に従います: nbb-view-product、nbb-view-product-header など
  • 画像にはデフォルトスタイリングがあります: maxHeight: '50vw'、aspectRatio: '1368/540'、objectFit: 'cover'

React、TypeScript、MUIを使用して❤️で構築されました。