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

ViewProductブロック

ViewProduct は、MUI 上に構築された商品詳細ビューブロックで、ヘッダー（組織、画像、チップ、タイトル）、タグ、プライマリおよび任意のセカンダリ説明セクション、任意のフッター、アクションボタンを備えています。

インストール​

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

必要なもの​

項目用途
imageUrl商品画像のソース URL
headerTitle商品ビューのタイトル
chips画像下のステータスまたはカテゴリチップ（各チップに label が必須）
tagsコンテンツエリアのタグチップ（label はテキストまたはパンくず形式の string[]、任意の icon は ReactElement）
sectionsプライマリ説明ブロック（label、value、任意の icon）
actions（任意）フッターボタン。onClick をカート、チェックアウト、ナビゲーションに接続
商品データはアプリ側で管理する

ViewProduct はプレゼンテーション用です — 商品フィールドをプロパティとして渡し、親で actions[].onClick を実装してください。任意の secondarySections、footerLogo、footerText を指定すると、デフォルトレイアウトを拡張できます。

コード例​

ライブエディター
function Example() {
  const [lastAction, setLastAction] = React.useState('');
  const sellerName = 'TechStore';

  const chips = [
    { label: 'スマートフォン' },
    { label: '5G' },
    { label: 'SIMフリー' },
    { label: '本日発送', variant: 'filled' },
  ];

  const tags = [
    { label: 'プレミアム' },
    { label: ['電子機器', '携帯電話', 'スマートフォン', 'Apple'] },
    { label: '在庫あり' },
  ];

  const sections = [
    {
      label: '商品説明',
      value:
        'iPhone 15 Pro はチタニウムデザイン、A17 Pro チップ、48MP メインセンサーを備えた高度な Pro カメラシステムを特徴としています。',
    },
    {
      label: '配送と保証',
      value: '5〜7 営業日で標準配送無料。製造上の欠陥に対する1年間の限定保証付き。',
    },
  ];

  const actions = [
    { label: 'カートに追加', onClick: () => setLastAction('カートに追加') },
    { label: '今すぐ購入', onClick: () => setLastAction('今すぐ購入') },
  ];

  return (
    <>
      {lastAction ? (
        <Typography variant="body2" sx={{ mb: 2, textAlign: 'center' }}>
          最後のアクション: <strong>{lastAction}</strong>
        </Typography>
      ) : null}
      <ViewProduct
        organizationName={sellerName}
        headerLogo="https://docs.nodeblocks.dev/img/icon.png"
        imageUrl="https://docs.nodeblocks.dev/img/undraw_docusaurus_react.svg"
        imageAlt="iPhone 15 Pro"
        chips={chips}
        headerTitle="iPhone 15 Pro - 最新モデル"
        tags={tags}
        sections={sections}
        footerLogo="https://docs.nodeblocks.dev/img/icon.png"
        footerText={`${sellerName} · この販売者から127商品`}
        actions={actions}
      />
    </>
  );
}
結果
Loading...

主要プロパティ​

コアプロパティ​

プロパティ型必須デフォルト説明
imageUrlstringはい—商品画像 URL。設定時のみ ViewProduct.Image がレンダリングされる
headerTitlestringはい—ヘッダー内の商品タイトル
chips(ChipProps & { label: string })[]はい—ヘッダーチップ。各項目に label が必須（variant、color、size など MUI Chip プロパティも可）
tags{ label: string | string[]; icon?: ReactElement }[]はい—コンテンツ内のタグ行。label が string[] の場合は / 区切りのパンくず形式でレンダリング
sections{ icon?: SvgIconComponent; label: string; value: string }[]はい—任意の MUI アイコンコンポーネント付きプライマリコンテンツセクション

コンテンツプロパティ​

プロパティ型必須デフォルト説明
organizationNamestringいいえundefinedヘッダー内の販売者または組織名
headerLogostringいいえundefined組織名横の円形ロゴの画像 URL
imageAltstringいいえundefined商品画像の alt テキスト
secondarySections{ icon?: SvgIconComponent; label: string; value: string }[]いいえundefinedプライマリセクション下の控えめなカードスタイルの追加セクション
footerLogostringいいえundefinedフッター画像 URL（または data URI）
footerTextstringいいえundefinedフッターキャプション（例: 販売者の商品数）
actions{ label: ReactNode; onClick: () => void }[]いいえundefined下部アクション行の等幅アクションボタン

ルートに labels プロパティはありません。headerTitle、チップの label、セクションの label/value、footerText、actions[].label でコピーを上書きしてください。

レイアウトと構成プロパティ​

プロパティ型必須デフォルト説明
childrenBlocksOverride | ReactNodeいいえundefined複合 JSX 子要素、または blocks と blockOrder を返す関数オーバーライド
classNamestringいいえundefinedルートスタックのクラス名（nbb-view-product）
sxSxPropsいいえundefinedルートスタック用の MUI システムスタイル

ViewProduct は StackProps（children を除く）を継承します。オーバーライドなしのデフォルトブロック順: header、content、footer、actions（defaultBlockOrder）。

サブコンポーネントのプロパティ​

サブコンポーネントはコンテキストから読み取り、同じコンテンツキーをプロパティとして渡すとローカルで上書きできます。

サブコンポーネント主要プロパティ継承ベース
ViewProduct.CompanyNameorganizationName、headerLogo、children、className、sxStackPropsStack + Box（img）+ Typography
ViewProduct.ImageimageUrl、imageAlt、children、classNameBoxPropsBox（img、アスペクト比 1368/540）
ViewProduct.Chipschips、children、className、sxStackPropsStack + Chip（variant="outlined"、color="primary"）
ViewProduct.TitleheaderTitle、children、className、sxTypographyPropsTypography（component="h4"）
ViewProduct.HeaderorganizationName、headerLogo、imageUrl、imageAlt、chips、headerTitle、children、className、sxStackPropsStack + Divider
ViewProduct.Tagstags、children、className、sxStackPropsStack + Chip（透明背景）
ViewProduct.Sectionssections、children、classNameStackPropsStack + Typography
ViewProduct.SecondarySectionssecondarySections、children、classNameStackPropsStack + カードスタイルのセクションブロック
ViewProduct.Contenttags、sections、secondarySections、children、className、sxStackPropsTags、Sections、SecondarySections を構成する Stack
ViewProduct.FooterfooterLogo、footerText、children、className、sxBoxPropsBox + Stack
ViewProduct.Actionsactions、children、className、sxStackPropsStack + Button（variant="contained"、size="medium"）

デフォルト UI ブロック​

ブロックベース備考
ViewProduct（ルート）Stack中央揃えの縦レイアウト（nbb-view-product）
header（ViewProduct.Header）Stack会社名、画像、チップ、タイトル、区切り線
content（ViewProduct.Content）Stackタグ、セクション、任意のセカンダリセクション
footer（ViewProduct.Footer）BoxfooterLogo、footerText、またはカスタム children が設定されている場合のみレンダリング
actions（ViewProduct.Actions）Stack + Buttonactions が指定されている場合の等幅ボタン

デフォルトのルートレンダリング順序: header → content → footer → actions。

会社ロゴの alt のデフォルトは 会社ロゴ です。フッターロゴの alt のデフォルトは フッターロゴ です。

TypeScript​

import * as React from 'react';
import { ViewProduct } from '@nodeblocks/frontend-view-product-block';
import type { ChipProps } from '@mui/material';
import type { SvgIconComponent } from '@mui/icons-material';
import type { ReactElement, ReactNode } from 'react';

type ProductChip = ChipProps & { label: string };

type ProductTag = {
  label: string | string[];
  icon?: ReactElement;
};

type ProductSection = {
  icon?: SvgIconComponent;
  label: string;
  value: string;
};

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

export function ProductDetailView() {
  const chips: ProductChip[] = [{ label: '新着' }, { label: '在庫あり', variant: 'filled' }];
  const tags: ProductTag[] = [{ label: 'プレミアム' }];
  const sections: ProductSection[] = [
    { label: '説明', value: '商品の詳細はこちら。' },
  ];
  const actions: ProductAction[] = [
    { label: 'カートに追加', onClick: () => undefined },
  ];

  return (
    <ViewProduct
      organizationName="TechStore"
      imageUrl="https://example.com/product.jpg"
      imageAlt="商品"
      chips={chips}
      headerTitle="サンプル商品"
      tags={tags}
      sections={sections}
      actions={actions}
    />
  );
}