コマースカタログレンダリング

ランディング・ページでカタログ・アイテム・コンテナ・レンダリングを使用して、製品アイテムをカタログ・レンダリングのグループのデータ・ソースとして設定できます。コンテナレンダリング内に追加されたすべてのカタログレンダリングは、選択した製品を製品コンテキストとして使用します。これにより、レンダリングでは、他の方法では製品コンテキストが利用できないページに製品情報を表示できます。

このレンダリングをプレースホルダーに追加すると、何も表示されません。レンダリングは、他のレンダリングをドロップできるコンテナです。

データソースの設定

レンダリングのControl Propertiesダイアログボックスで、データソースを製品アイテムに設定できます。

製品アイテムを設定し、コンテナレンダリング内にカタログレンダリングを追加すると、選択した製品の製品情報が表示されます。

コンテナレンダリング内に追加されたカタログレンダリングは、ページに直接追加された場合と同じ外観になるため、ランディングページは選択した製品の商品詳細ページと同じように見えます。

カテゴリ ナビゲーション レンダリングを使用して、製品カタログの最上位のカテゴリを (メニューやナビゲーション バーなどに) 表示します。

顧客は、ナビゲーション バーのカテゴリをクリックすることで、カテゴリ ページに移動できます。

表示されるカテゴリは、検索インデックスの内容に基づいています。カテゴリのレンダリングの開始点を設定するには、コンテンツ エディタを開いてsitecore/<storefront>/Home/Commerce/Catalog Configurationに移動し、開始するカテゴリへのパスを入力します (例: sitecore/content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments)。

サブカテゴリ ナビゲーション レンダリングを使用して、選択した最上位カテゴリのサブカテゴリの一覧を表示します。

エクスペリエンス エディターで、最上位のカテゴリが選択されていない場合、レンダリングはプレースホルダー テキストと共に表示されます。

カタログでは、関連する製品やサービスを1つのアイテムにまとめることができます。このアイテムをストアフロントに表示するには、商品バンドルレンダリングを商品ページに追加します。 静的バンドル のみが利用可能です。

商品ページには、個々の商品とバンドルを表示するための商品バリエーションと商品バンドルの両方のレンダリングが含まれています。各レンダリングは、適用先のカタログ項目タイプを認識し、他のタイプを無視するため、実行時にページ上にレンダリングされるのはそのうちの1つだけです。デザイン上の理由から、両方のレンダリングがエクスペリエンス エディターに表示されます。

ストアフロントに表示される商品バンドルの場合、上記の商品バリアントのレンダリングは表示されません。

製品ファセット レンダリングをカテゴリ ページに追加して、現在選択されているカテゴリで使用可能なファセットのリストを表示できます。カテゴリが選択されていない場合、レンダリングはプレースホルダーテキストとともに表示されます。

製品ファセットレンダリングは、標準のストアフロント検索ページでも使用されます。

ライブストアフロントでのリストのフィルタリング

顧客がファセットリスト内のファセット値をクリックすると、ファセットリストは選択したファセット値のみを表示するようにフィルタリングされ、製品リストは選択したファセット値に基づいてフィルタリングされます。

一度に複数のファセットを選択することで、フィルターを絞り込むことができます。顧客が選択したファセット値をクリックすると、そのファセットは検索フィルターから削除されます。

エクスペリエンス エディターのページに商品画像のレンダリングを追加して、選択した商品に関連する各画像のサムネイル画像を表示できます。1つのサムネイルが選択され、選択したサムネイルの大きな画像が表示されます。商品が選択されていない場合は、プレースホルダー画像が表示されます。

エクスペリエンス エディターのページに製品情報レンダリングを追加して、商品のタイトル、説明、およびアイテム番号を表示できます。

または、 標準のSXAレンダリングのバリアントを使用して 、製品情報を表示することもできます。これにより、商品名、説明、および品目番号の配置を互いに独立して制御できます。

エクスペリエンス エディターのページに商品在庫レンダリングを追加すると、現在の在庫ステータスと在庫アイテムの数を 在庫ステータス / 在庫数 として表示できます。製品が選択されていない場合は、プレースホルダー データが表示されます。

商品が在庫切れの場合、Add to cartボタンは無効になります。

製品リスト レンダリングには、製品のリストと、製品の画像と価格、および製品ページへのリンクが表示されます。製品リスト レンダリングをカテゴリ ページに配置すると、選択したカテゴリの製品が表示されます。カテゴリが選択されていない場合は、プレースホルダーの画像とデータが表示されます。

製品リストは、検索ページでは、製品とカテゴリの組み合わせである検索結果を表示するためにも使用されます。

「ページごとの商品リスト項目数」、「商品リストページ情報」、および「商品リスト並べ替え」レンダリングを商品リストの上に配置して、ユーザーがリスト内の商品の順序とページごとに表示される商品数を設定できるようにすることができます。

リスト内のすべての製品を同じページに表示する場合は、遅延読み込みを使用するようにリストを構成できます。

製品に異なる価格のバリエーションがある場合は、利用可能な最低価格が表示され、テキストの先頭にStarting fromなどが付きます。バリアントが定義されていない場合、またはすべてのバリアントの価格が同じ場合は、テキストなしで価格が表示されます。

商品が割引価格で販売されている場合は、商品の画像にオーバーレイバナーが表示され、割引額が元の価格に対する割合で表示されます。商品一覧に表示される価格は割引価格です。

製品の現在の在庫状況が表示されます。

お客様は、商品画像またはDetailsリンクをクリックして、商品詳細ページに移動できます。

カテゴリ ページと検索ページで ページごとの商品リスト アイテム数 レンダリングを 商品リスト レンダリングの上に配置すると、ユーザーはページごとに表示されるアイテム数を選択できます。

ページあたりのデフォルトアイテム数

Commerce Control Panelでは、すべてのページのデフォルト値を定義できます。 Catalog Configuration項目の全体的なデフォルト値をDefault Items Per Pageフィールドに入力します。

これは、ユーザーが別の値を選択するまでページに表示される項目の数です。

Categoryアイテムの特定のカテゴリ ページのItems Per Pageフィールドの値を構成できます。この値は、カタログ構成のデフォルトを上書きします。次の例では、アプライアンス カテゴリのページに表示されるアイテムのデフォルト数が4と定義されています。

ドロップダウンメニューのオプション

レンダリングのコントロール プロパティダイアログ ボックスでは、Results Per Pageドロップダウン メニューに含まれるオプションを変更できます。

カテゴリ ページと検索ページで、商品リスト ページ情報レンダリングを商品リスト レンダリングの上に配置すると、レンダリングにはカテゴリまたは検索内のアイテムの合計数と、現在のページに表示されるリストのアイテムが表示されます。

カテゴリ ページと検索ページで、商品リストの並べ替えレンダリングを商品リスト レンダリングの上に配置すると、顧客はレンダリングを使用してカテゴリまたは商品リストを並べ替えることができます。

並べ替えオプション

Sort byドロップダウン メニューで使用できるオプションは、カテゴリ アイテムに定義されている並べ替えフィールドです。Categoryアイテムの並べ替えフィールドを構成できます。次に、HabitatカタログのAppliancesカテゴリに定義されている値の例を示します。

Sort byフィールドには、Selectedフィールドの並べ替え条件が一覧表示され、それぞれに昇順 (Asc) オプションと降順 (Desc) オプションが表示されます。

これにより、ライブストアフロントで次の結果が得られます。

商品リストページャーレンダリングは、カテゴリページと検索ページで使用できます。これにより、顧客は製品リストをナビゲートできます。現在のページは、製品リストページャーのレンダリングで強調表示されます。顧客はページ番号をクリックするか、Next またはPreviousをクリックしてページ間を移動できます。

SXAストアフロントでは、このレンダリングは各カテゴリと検索ページに2回表示されます (製品リスト レンダリングの上と下)。

Product Priceレンダリングを使用して、製品価格を表示できます。セール中の商品の場合は、割引価格が表示され、取り消し線フォントには元の価格が表示されます。

Product Variantsレンダリングでは、各バリアント フィールドのドロップダウン メニューが表示されます (たとえば、サイズに1つ、色に1つ)。お客様が無効な組み合わせを選択すると、メッセージエリアにエラーメッセージが表示され、「 Add to cart 」ボタンは無効になります。

エクスペリエンス エディターでは、レンダリングにはプレースホルダーのみが表示されます。

プロモーション製品レンダリングは、製品リスト レンダリングと同様の形式で製品リストを表示します。

プロモーション製品のレンダリングで表示できるリストには、次の3つのタイプがあります。

SXA Storefrontでは、ホーム ページには、そのページ用に設定されたプロモーションされた製品リストの例が含まれ、製品詳細ページには、カタログ内の関係に基づく関連製品リストの例が含まれています。

エクスペリエンス エディターでプロモーション製品のレンダリングを挿入すると、プレースホルダー データが含まれます。

遅延読み込み

遅延読み込みを有効にすると、前のプロモーション製品レンダリングのスクリーンショットに示すように、製品リストの下にShow Moreボタンが表示されます。ストアフロントの訪問者がShow Moreをクリックすると、さらに多くのアイテムが読み込まれ、リストに表示されます。これは、一度に固定数のアイテムを表示する代わりに使用できます。

遅延読み込みは、プロモーション商品レンダリングまたは商品リストレンダリングのいずれかで設定できます。レンダリングのControl PropertiesダイアログボックスのLazy Loadingで、Use Lazy Loadingチェックボックスをオンにします。 Max Page Sizeフィールドで、訪問者がページに到着したときにリストに表示する項目の数を指定します。これは、訪問者がShow Moreをクリックするたびにリストに追加される項目の数でもあります。

手記

通常は、Show Moreボタンを有効にするか、ページごとの製品リスト項目のレンダリングを含む製品リスト ヘッダーを挿入either。これらは一緒に使用するようには設計されておらず、遅延読み込み設定が競合する場合は、Results per pageフィールドの選択が上書きされます。

「検索開始」、「訪問したカテゴリページ」、および「訪問した製品ページ」レンダリングをページに配置して、訪問者の行動を追跡できます。これらの各レンダリングは、Commerce Connect APIを個別に呼び出して、xDBで関連するページ イベントをトリガーします。結果のデータは、エクスペリエンスプロファイルとエクスペリエンス分析の両方で表示できます。

これらのレンダリングはライブストアフロントでは表示されませんが、エクスペリエンスエディターのページに表示されるため、見つけて編集できます。たとえば、Search Initiatedレンダリングはエクスペリエンス エディターで次のように表示されます。

検索開始レンダリングを使用してページの検索バーから検索が開始されると、レンダリングによってCommerce Connectの検索開始ページ イベントがトリガーされます。SXA Storefrontテンプレートでは、検索開始レンダリングがデフォルトのコマース ヘッダーの部分デザインに含まれています。

顧客が訪問済みカテゴリ ページ レンダリングを使用してページにアクセスすると、レンダリングによってCommerce ConnectのCategoryPageVisitedページ イベントがトリガーされます。SXA Storefrontテンプレートでは、訪問したカテゴリ ページのレンダリングは、メイン コンテンツ エリアのカテゴリ ページに含まれています。

顧客が訪問した製品ページのレンダリングを使用してページにアクセスすると、レンダリングによってCommerce ConnectのProductPageVisitedページ イベントがトリガーされます。SXA Storefrontテンプレートでは、訪問した商品ページのレンダリングは、商品詳細ページのメイン コンテンツ エリアに含まれています。