コンテンツにスキップ

Storefront 商品一覧カード表示仕様

背景

Storefront の商品一覧は B2B 発注の入口であり、スマートフォンでは縦スクロール量を抑えつつ、商品名・価格・購入導線をすぐ確認できる必要がある。/products 商品一覧専用の browse card は画像付き catalog の first visible を優先する surface としつつ、単一 variant 商品では購入可否を CTA として明示する。価格表示はカート投入前の pre-cart surface として扱い、標準売上単価・顧客別価格・価格内訳を出さず、上代単価だけを表示する。

仕様

  • /products?collection=... の browse card は、スマートフォン幅では正方形画像と商品情報を横並びにした 2 カラムリストとして表示する。
  • スマートフォン幅の browse card 画像はカードの縦幅を使い切り、その縦幅と同じ横幅を取って正方形を維持する。
  • sm 以上の幅では、browse card は従来どおり画像上部・情報下部の縦型カードとして表示する。
  • ブランド collection の商品一覧で第3階層グループを表示する場合、ページネーションは出さず、グループ内の商品が多いときだけ同一ページ内に もっと見る を表示する。
  • もっと見る の初期表示数と追加単位はレイアウトの列数に合わせる。PC 幅は 9件（3列 x 3行）、タブレット幅は 6件（2列 x 3行）、スマートフォンの1列リスト表示は 6件（1列 x 6行）とする。
  • もっと見る ボタンには件数を表示しない。件数表示は商品カタログ上部のバナーにも出さない。
  • 標準 ProductCard は、1 Product / 1 Variant の商品では一覧上に カートに入れる CTA を表示する。
  • /products browse card は、1 Product / 1 Variant の商品では カートに入れる CTA を表示する。購入不可・在庫切れ・購入上限到達・直送モード不一致などでカート投入できない場合でも CTA は非表示にせず、disabled 状態と理由表示で表現する。
  • /products browse card の単一 variant CTA は AddToCartButton を通し、商品詳細・標準 ProductCard・横型 ProductListItem と同じ購入可否判定を使う。商品一覧だけで独自に price > 0 や stockLevel を見て CTA を消す実装は禁止する。
  • /products browse card は、複数 variant の商品では variant が一意に決まらないため一覧上で直接カート投入せず、詳細で選択 導線を表示する。
  • /products browse card は価格内訳用の activeOrderCommercialState を発火させず、価格内訳 hover / click / i 詳細も表示しない。購入 CTA の disabled 判定に必要な active order / customer context は AddToCartButton の共通判定へ閉じ込め、発注可否・在庫切れ・bundle 制約を surface ごとに再実装しない。
  • 商品一覧カード内の価格表示は税込価格を主表示とし、複数 variant では先頭 variant 固定価格ではなく税込価格レンジを表示する。
  • /products browse card の単一 variant 価格は ProductPriceSummary / ProductPrice displayMode="preCart" を使い、上代単価だけを表示する。campaign 明示許可時のみ %OFF と元価格打ち消し線を表示できるが、その場合も価格内訳 i は出さない。
  • /products browse card の複数 variant 価格は、詳細画面と同じ resolveProductPriceSummary の税込価格レンジを表示する。variant が一意に定まらないため、一覧では variant 単位の価格内訳を出さない。
  • mobile の browse card 画像枠は縦幅フルかつ正方形を維持し、商品名・価格・詳細導線が隣の情報列内で折り返せるようにする。
  • mobile の browse card でも、単一 variant 商品は数量入力・増減ボタン・カートに入れる CTA を表示する。購入不可時も数量入力と CTA は非表示にせず、disabled 状態で購入できないことを示す。

対象コンポーネント

  • apps/storefront/src/components/product/product-card.tsx
  • apps/storefront/src/components/pages/products-page-content.tsx の ProductsBrowseCard

テスト正本

  • Unit: apps/storefront/src/components/product/product-card.test.tsx
  • Unit: apps/storefront/src/components/pages/__tests__/products-page-content.test.tsx
  • Playwright CT: apps/storefront/tests/e2e/ct/product/product-card.ct.spec.tsx
  • Playwright CT: apps/storefront/tests/e2e/ct/pages/products-page-content.ct.spec.tsx
  • Playwright CT: apps/storefront/tests/e2e/ct/pages/products-page-brand-groups.ct.spec.tsx
  • Playwright CT: apps/storefront/tests/e2e/ct/product/product-add-to-cart-sold-out.ct.spec.tsx

受け入れ条件

  • スマートフォン幅の /products browse card で、画像がカード縦幅を使い切り、かつ正方形を維持した状態で情報列と横並びになっていること。
  • 標準 ProductCard では、単一 variant 商品に カートに入れる CTA が表示されること。
  • /products browse card では、単一 variant 商品に カートに入れる CTA が表示され、詳細を見る への置き換えや CTA 非表示にならないこと。
  • /products browse card では、単一 variant 商品の数量入力欄と増減ボタンが表示されること。
  • /products browse card では、在庫切れ商品でも CTA が非表示にならず、disabled の 在庫切れ ボタンとして表示されること。
  • /products browse card では、複数 variant 商品に 詳細で選択 導線が表示され、直接カート CTA が出ないこと。
  • /products browse card では、価格内訳 query が発火せず、価格 hover / focus / click 後も内訳 dialog / i が表示されないこと。
  • 単一 variant の /products browse card では、上代単価だけが表示されること。campaign 明示許可時も %OFF と元価格打ち消し線までに留めること。
  • Playwright CT で mobile 表示、単一 variant の数量入力・購入 CTA、複数 variant の詳細選択導線、在庫切れ時の disabled CTA が検証されていること。
  • ブランド配下グループ表示では、PC / tablet / mobile の列数に応じた単位で もっと見る が動作し、ページネーションと件数バナーが表示されないこと。