Commerce カタログ レンダリング
商品ページおよびカタログ ページのデザインに使用される Commerce カタログ レンダリングの概要。
SXA Storefront には、ストアフロントでカタログを作成するために一緒に使用できる多くのレンダリングが含まれています。このトピックでは、ツールボックスの [Commerce カタログ] セクションからアクセスできるレンダリングについて説明します。
カタログ商品コンテナー レンダリングを使用して、カタログ レンダリングのグループのデータ ソースとして商品アイテムを設定します。これはランディング ページで使用します。コンテナー レンダリング内に追加されたすべてのカタログ レンダリングは、商品コンテキストとして選択した商品を使用します。これにより、レンダリングによって、利用可能な商品コンテキストがないページに商品情報を表示できます。
このレンダリングをプレースホルダーに追加しても、何も表示されません。これは、他のレンダリングをドロップできるプレースホルダーです。
注記
標準 SXA コンテナー コンポーネントは、データ ソースがカタログ アイテムを指すように設定する場合、カタログ商品コンテナー レンダリングと同様の機能をサポートします。カタログ商品コンテナー レンダリングのみが有効な商品リスト コンポーネントを除き、商品ページで使用されるコンポーネントとうまく連携します。
商品アイテムのデータ ソースを、レンダリング用 [コントロール プロパティ] ダイアログ ボックスで設定します。
商品アイテムを設定し、コンテナー レンダリング内にカタログ レンダリングを追加すると、選択した商品の商品情報が表示されます。
コンテナー レンダリング内に追加されたカタログ レンダリングは、ページに直接追加された場合と同じ外観になるため、ランディング ページは選択した商品の詳細ページと同じように見えます。
Commerce 検索結果レンダリングは、標準の SXA 検索結果レンダリングと Search service に基づいています。これには、レンダリング バリアントと Scriban テンプレートの使用が含まれます。Commerce 検索結果レンダリングは、いくつかの重要な違いがあるにしても、SXA 検索結果レンダリングとほぼ同じです。「Commerce 検索結果レンダリングを使用する」を参照してください。
設定
[コントロール プロパティ] ダイアログ ボックスの [カタログ画像] セクションでは、Commerce 検索結果レンダリング用に次のプロパティを設定できます。
プロパティ | 用途 |
|---|---|
Sitecore Digital Asset Management システムの画像を使用する | Sitecore Digital Asset Management (DAM) システムによって保存および管理されている画像を使用するには、[Sitecore Digital Asset Management システムの画像を使用する] チェックボックスをオンにします。チェックボックスをオフにすると、画像はメディア ライブラリから取得されます。 たとえば、レンダリング レベルの設定がメディア ライブラリを使用することになっているが、サイト レベルの設定がデジタル資産管理システムの画像を使用することになっている場合、画像は DAM から取得されます。一方、サイトレベルの設定をクリアされていて、[Sitecore Digital Asset Management システムの画像を使用する] チェックボックスがレンダリング レベルでオンになっている場合、レンダリングは DAM から画像を取得します。 注記カタログ画像ソースのサイト レベルの設定 (ソースは sitecore/&<tenant>/<site>/Settings/Commerce/Catalog Configuration) とレンダリング レベルの設定は、実行時に (OR 演算を使用して) マージされます。いずれかを選択すると、画像はデジタル資産管理システムから取得されます。 |
注記
Scriban テンプレートを変更して、Commerce 検索結果レンダリングを設定します。
カタログでは、関連する商品やサービスを、商品バンドルと呼ばれる 1 つの Sellable アイテムとしてグループ化できます。商品バンドルには次の 2 つのタイプがあります。
マーチャンダイザーは商品バンドルを作成し、バンドル内の商品の最小数と最大数を決定して価格設定モデルを割り当てます。
商品バンドル レンダリングを、たとえば商品の詳細ページに追加して、この Sellable アイテムをストアフロントに表示します。
注記
商品バンドル Scriban テンプレートは、静的バンドルと動的バンドルの両方をサポートします。商品バンドル - 廃止予定レンダリングは、静的バンドルのみをサポートし、既存のサイトでのみ使用でき、レンダリング バリアントの Scriban テンプレートではなく MVC ビューに基づいています。
追加の FAQ については、「動的バンドルと無料ギフトのセレクションに関する FAQ」を参照してください。
商品ページには、通常の Sellable アイテムとバンドルを表示するために、商品バリアントと商品バンドルの両方のレンダリングが含まれています。各コンポーネントは、適用されるカタログ アイテム タイプを認識し、他のタイプを無視するため、実行時にそのうちの 1 つだけがページにレンダリングされます。設計上、両方のコンポーネントがエクスペリエンス エディターに表示されます。次の画像では、上部のコンポーネントが商品バリアント レンダリングで、下部のコンポーネントが商品バンドル レンダリングです。
ライブ ストアフロントでは、商品バンドルは次のように表示されます。
ストアフロントでは、バンドルに含まれていて構成要素となっているすべての Sellable アイテムの在庫が調べられ、最小の在庫数が商品バンドルの在庫数として返されます。
注記
Scriban テンプレートを変更して、商品バンドル レンダリングを設定します。
商品ファセット レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。
商品画像レンダリングを使用して、選択した商品に関連する各画像のサムネイル画像を表示します。サムネイルが 1 つ選択され、選択したサムネイルの拡大画像が表示されます。商品が選択されていない場合は、プレースホルダー画像が表示されます。
設定
[コントロール プロパティ] ダイアログ ボックスの [カタログ画像] セクションでは、商品画像レンダリング用に次のプロパティを設定できます。
プロパティ | 用途 |
|---|---|
Sitecore Digital Asset Management システムの画像を使用する | Sitecore Digital Asset Management (DAM) システムによって保存および管理されている画像を使用するには、[Sitecore Digital Asset Management システムの画像を使用する] チェックボックスをオンにします。チェックボックスをオフにすると、画像はメディア ライブラリから取得されます。 たとえば、レンダリング レベルの設定がメディア ライブラリを使用することになっているが、サイト レベルの設定がデジタル資産管理システムの画像を使用することになっている場合、画像は DAM から取得されます。一方、サイト レベルの設定が未選択で、[Sitecore Digital Asset Management システムの画像を使用する] チェックボックスがレンダリング レベルでオンになっている場合、レンダリングは DAM から画像を取得します。 注記カタログ画像ソースのサイト レベルの設定 (ソースは sitecore/<tenant>/<site>/Settings/Commerce/Catalog Configuration) とレンダリング レベルの設定は、実行時に (OR 演算を使用して) マージされます。いずれかを選択すると、画像はデジタル資産管理システムから取得されます。 |
商品情報レンダリングを使用して、商品のタイトル、説明、および商品番号を表示します。または、標準 SXA レンダリングのバリアントを使用して、商品情報を表示することもできます。これにより、商品名、説明、および商品番号の配置を互いに独立して制御できます。
商品在庫レンダリングを使用して、現在の在庫状況と在庫品数を [在庫状況] / [在庫数] として表示します。商品が選択されていない場合、プレースホルダー データが表示されます。
商品が在庫切れの場合は、[カートに追加] ボタンが無効になります。
商品リスト レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。
ページ毎の商品リスト アイテム レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。
商品リスト ページ情報レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。
商品リスト ソート レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。
商品リスト ページャー レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。
商品価格レンダリングを使用して、商品価格を表示します。特価の場合は割引価格が表示され、元の価格は取り消し線付きで表示されます。
注記
商品価格 - 廃止予定レンダリングは、既存のサイトでのみ使用でき、Scriban テンプレートの代わりにレンダラーを使用します。
注記
Scriban テンプレートを変更して、商品価格レンダリングを設定します。
商品バリアント レンダリングを使用して、各バリアント フィールドのドロップダウン メニューを表示します (たとえば、1 つはサイズ用、もう 1 つは色用)。顧客が無効な組み合わせを選択すると、メッセージ領域にエラー メッセージが表示され、[カートに追加] ボタンが無効になります。
エクスペリエンス エディターでは、レンダリングはプレースホルダーのみを表示します。
注記
ギフト カードの場合、カードの額面をバリアントに設定できます。
プロモーション商品レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。
訪問者の行動を追跡するには、検索開始、アクセスしたカテゴリ ページ、およびアクセスした商品ページのレンダリングを使用します。これらのレンダリングはそれぞれ、Commerce Connect API を個別に呼び出して、xDB で関連するページ イベントをトリガーします。結果のデータは、エクスペリエンス プロファイルとエクスペリエンス アナリティクスの両方で表示できます。
これらのレンダリングはライブ ストアフロントに表示されませんが、エクスペリエンス エディターのページには表示されるため、配置して編集することができます。たとえば、検索開始レンダリングはエクスペリエンス エディターでは次のように表示されます。
検索結果レンダリング
検索開始レンダリングを使用してページの検索バーから検索が開始されると、レンダリングによって Commerce Connect の検索開始ページ イベントがトリガーされます。SXA Storefront テンプレートでは、検索開始レンダリングが既定の Commerce ヘッダーのパーシャル デザインに含まれています。
アクセスしたカテゴリ ページ レンダリング
アクセスしたカテゴリ ページ レンダリングがあるページに顧客がアクセスすると、レンダリングによって Commerce Connect の CategoryPageVisited ページ イベントがトリガーされます。Storefront サイト テンプレートでは、アクセスしたカテゴリ ページ レンダリングが、メイン コンテンツ領域のカテゴリ ページに含まれています。
アクセスした商品ページ レンダリング
アクセスした商品ページ レンダリングがあるページに顧客がアクセスすると、レンダリングによって Commerce Connect の ProductPageVisited ページ イベントがトリガーされます。Storefront サイト テンプレートでは、アクセスした商品ページ レンダリングが、メイン コンテンツ領域の商品の詳細ページ (PDP) に含まれています。
他のストアフロント ページで分析情報を収集し、顧客の訪問を追跡するには、アクセスした商品ページ レンダリングをページに追加します。たとえば、サンプル Storefront サイトでは、ギフト カードを購入ページとドローン ランディング ページへの顧客の訪問を追跡することができます。これを行うには、アクセスした商品ページ レンダリングをそれぞれのページに追加するだけです。
サブカテゴリ ナビゲーション レンダリングの使用は現在お勧めしていません。推奨される代替方法については、「利用可能なレンダリングを選択する」を参照してください。