Commerce 商品詳細ページ

概要

デフォルトの Commerce 商品詳細ページ (PDP) に使用するレンダリングの概要。

Storefront サイト テンプレートには、デフォルトで Commerce 商品詳細ページが含まれています。

エクスペリエンス エディターに表示される Commerce 商品詳細ページ。

Commerce 商品詳細ページには、次のレンダリングが含まれています。

  1. 商品画像レンダリング ([エクスペリエンス エディター] > [ツールボックス] > [メディア])。

  2. 商品情報レンダリング ([エクスペリエンス エディター] > [ツールボックス] > [Commerce カタログ])。

  3. 商品在庫レンダリング ([エクスペリエンス エディター] > [ツールボックス] > [Commerce カタログ])。

  4. Product Price レンダリング ([エクスペリエンス エディター] > [ツールボックス] > [Commerce カタログ])。

  5. 商品 バリアントレンダリング ([エクスペリエンス エディター] > [ツールボックス] > [Commerce カタログ])。

  6. カートに追加レンダリング ([エクスペリエンス エディター] > [ツールボックス] > [Commerce カタログ])。

  7. Commerce 検索結果レンダリング ([エクスペリエンス エディター] > [ツールボックス] > [Commerce カタログ])。

    注記

    これは、さまざまな用途に使用できる多用途のレンダリングです。Storefront サイト テンプレートを使用すると、カテゴリー ページ、関連商品ページ、プロモーション商品ページ (ホーム ページ)、そして検索結果ページで、このレンダリングがデフォルトで使用されます。

  8. 結果をさらに表示レンダリング ([エクスペリエンス エディター] > [ツールボックス] > [検索])。

次の画像は、ライブ ストアフロントに表示されるデフォルトの Commerce 商品詳細ページの例です。

ライブ ストアフロントに表示される Commerce 商品詳細ページ

検索時にページ上の個々のレンダリングがすべて 1 つの結果として一緒に考慮されるようにするには、すべてのレンダリングが同じ検索結果シグネチャーを使用して、一緒にバインドされるようにする必要があります。デフォルトでは、商品詳細ページは、related-product の検索シグネチャーを使用します。

注記

定義された幅で表示できる商品数がコンテナーによって自動で判断されるよう、表示されるアイテム数をスタイル シートを使用して制御できます。