オンラインで商品リストをレンダリングする

概要

商品リストのレンダリング、プロモーション商品のレンダリング、および Commerce 検索結果のレンダリングを使用して商品リストを表示する方法の例。

SXA Storefront を使用して、Web ストアを構築およびカスタマイズします。これはストアフロントに表示される商品リストをレンダリングするさまざまな方法を提供する柔軟なフレームワークです。このトピックでは、次のレンダリングを使用してストアフロントに商品リストをレンダリングする方法について説明します。

  • 商品リストのレンダリング - カテゴリ内の商品のレンダリングに使用します。このレンダリングは、カタログの構成と同じように商品を表示したい場合に便利です。

    ヒント

    コンテンツをより適切に整理するには、ネストされたフォルダー (商品リスト テンプレートで利用可能) を使用します。フォルダーの階層はいくつでも設定できます。

  • プロモーション商品レンダリング - クエリを使用して商品リストをレンダリングしたり、商品の固定リストを表示したり、関係データに基づいて関連商品を表示したりするために使用します。このレンダリングは、選択したリストまたはクエリベースのリストを表示する場合に便利です。

  • Commerce 検索結果のレンダリング - クエリ トークンとブースティング ルールを含めることができる検索スコープの動的クエリを使用して商品をレンダリングするために使用します。詳細については、「Commerce 検索結果レンダリングのカスタマイズ」と「Commerce のための検索結果のブースティング」を参照してください。

商品リストのレンダリングを比較するときの考慮事項がいくつかあります。Sitecore 9.2 以前では、商品リストとプロモーション商品レンダリングを使用できます。Sitecore 9.3 以降では、Commerce 検索結果のレンダリングを使用することをお勧めします。

このトピックでは、特定の例を使用して商品リストをレンダリングする 3 つの方法を比較します。

注記

このトピックの手順には、Habitat カタログを使用します。

商品リスト レンダリングを使用して、スマートフォンなどのカテゴリの商品を商品ページに表示します。商品リストのレンダリングは、カタログ商品コンテナにネストされています。このレンダリングには、顧客が追加の商品を表示できる [さらに表示] ボタンが含まれています。

重要

商品リスト レンダリングのページングを可能にするコマース ページ コンポーネントを同じページで何度も使用しないでください。たとえば、商品リストのレンダリングを商品リスト ページ情報、ページ毎の商品リスト アイテム、商品リストの並べ替え、または商品リスト ページャー レンダリングと同じページに含めないでください。代わりに、遅延読み込み機能を使用して関連商品を表示します。

商品リスト レンダリングを使用してコンテンツを表示するには:

  1. コンテンツ エディターで sitecore/Content/<tenant>/<site>/Home に移動し、[商品] アイテムを右クリックし、[エクスペリエンス エディター] をクリックします。

  2. [エクスペリエンス エディター] の [ツールボックス] で、[コマース カタログ] セクションの [カタログ商品 コンテナ] レンダリングをページにドラッグします。

  3. [カタログ商品コンテナ] ツールバーで [詳細 >コンポーネント プロパティを編集する] をクリックし、[一般] セクションで [データ ソース > 参照] をクリックします。該当する商品カテゴリ、たとえばスマートフォン (/sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Phones/Habitat_Master-Smartphones) に移動し、[OK] をクリックして [コントロール プロパティ] ダイアログボックスを閉じます。

  4. [ツールボックス] の [コマース カタログ] セクションで、[商品リスト] レンダリングをクリックし、[カタログ商品コンテナ] 内にドラッグします。

    カタログ商品コンテナとツールバー
  5. [関連付けられたコンテンツを選択してください] ダイアログ ボックスの [商品リスト] をクリックし、[OK] をクリックします。

  6. [商品リスト] ツールバーで、[詳細 > コンポーネント プロパティを編集する] をクリックします。

  7. [遅延読み込み] セクションで、[遅延読み込みを使用する] チェックボックスをオンにし、"最大ページ サイズ" フィールドに表示する商品の数 (3 など) を入力します。

    "最大ページ サイズ" フィールドは、訪問者がページに到着したときにリストに表示される商品カードの数を示します。これは、訪問者が [さらに表示] をクリックするたびにリストに追加される商品の数でもあります。

  8. 変更を確定するには、[OK] をクリックし、リボン メニューで [保存] をクリックします。

    レンダリングは次のようになります。

    ライブ ストアフロントの商品リスト

プロモーション商品レンダリングを使用して、クエリを使用した商品の動的リストを表示できます。たとえば、商品リストに表示したい商品を取得するクエリを作成できます。このクエリをプロモーション商品レンダリングに関連付けて、商品の動的リストを表示します。

クエリを使用して商品の動的リストを表示するには:

  1. コンテンツ エディターで、商品リストが含まれているフォルダーに移動します。たとえば、/sitecore/Content/<tenant>/<site>/Data/Commerce/Product Lists に移動します。

  2. 右クリックし、[Insert, Named Search] をクリックします。

  3. [メッセージ] ダイアログ ボックスで、新しい商品リストの名前 (「電話」など) を入力し、[OK] をクリックします。

  4. ツリー表示で、新しく作成した商品リスト (電話 など) をクリックします。リボン メニューの [表示] タブで、[標準フィールド] チェックボックスと [バケット] チェックボックスをオンにします。

  5. [コンテンツ] タブの [アイテム バケット] セクションで、[デフォルト バケット クエリ] ラベルの下にある [クエリを作成する] をクリックします。[検索クエリを作成する] ダイアログ ボックスで検索クエリを作成し、終了したら [OK] をクリックします。たとえば Odyssey ブランドのスマートフォンを検索する場合は、次のクエリを作成します。

    • Commercesearchitemtype:sellableitem

    • Brand:Odyssey Smartphone

    • Location:Phones

    • Language:en

    プロモーション商品の検索クエリ
  6. リボンの [保存] をクリックします。

  7. クエリをプロモーション商品レンダリングに関連付けるには、エクスペリエンス エディターの商品ページに移動し、ツールボックスの [コマース カタログ] セクションで、[プロモーション商品] レンダリングをページにドラッグします。

  8. [関連付けられたコンテンツを選択してください] ダイアログ ボックスの [プロモーション商品] をクリックし、[OK] をクリックします。

  9. [プロモーション商品] ツールバーで、[詳細 > コンポーネント プロパティを編集する] をクリックします。

  10. [プロモーション商品] セクションで、[商品リスト] ボックスから使用する商品リスト (電話など) をクリックします。

  11. [遅延読み込み] セクションで、[遅延読み込みを使用する] チェックボックスをオンにします。変更を確定するには、[OK] をクリックします。

    レンダリングは次のようになります。

    ライブ ストアフロントの商品リスト レンダリング

プロモーション商品レンダリングを使用して、商品の固定リストを表示できます。この場合、[さらに表示] ボタンは表示されません。

商品の固定リストを表示するには:

  1. コンテンツ エディターで、sitecore/Content/<tenant>/<site>/Settings/Privacy Warning に移動します。

  2. 商品の静的リストを作成するには、[商品リスト] を右クリックし、[選択した商品を挿入] をクリックします。次に [メッセージ] ダイアログ ボックスで、選択した商品を入力して [OK] をクリックします。

  3. リボンの [表示] タブで、[バケット] チェックボックスと [Raw 値] チェックボックスをオフにします。

  4. [コンテンツ] タブの [商品] セクションで、表示する商品が含まれているフォルダーに移動します。たとえば、sitecore/Content/<tenant>/<site>/Home/Catalogs/Habitat_Master/Departments/Phones に移動します。

  5. [コンテンツ] タブの [商品] セクションで、"タイトル" フィールドをクリックして名前 (「Odyssey Phones」 など) を入力します。

  6. [商品リスト] で、商品が含まれているフォルダー (sitecore/Content/<tenant>/<site>/Home/Catalogs/Habitat_Master/Departments/Phones など) に移動します。[選択したリスト] に移動するすべての商品 (すべてのHabitat Odyssey スマートフォンなど)をダブルクリックします。完了したら、リボンの [保存] をクリックします。

    商品リスト定義の選択
  7. 固定リストを [プロモーション商品] レンダリングに関連付けるには、エクスペリエンス エディターで商品ページに移動し、ツールボックスの [コマース カタログ] セクションで、プロモーション商品レンダリングをページにドラッグします。

  8. [関連付けられたコンテンツを選択してください] ダイアログ ボックスの [プロモーション商品] をクリックし、[OK] をクリックします。

  9. [プロモーション商品] ツールバーで、[詳細 > コンポーネント プロパティを編集する] をクリックします。

  10. [プロモーション商品] セクションの [商品リスト] ボックスで、[選択した商品] をクリックします。

  11. [遅延読み込み] セクションで、[遅延読み込みを使用する] チェックボックスをオンにします。変更を確定するには、[OK] をクリックします。

    ライブ ストアフロントでのプロモーション商品レンダリング
  12. 変更を保存するには、リボンの [保存] をクリックします。

コマース システムに関連商品に関するデータが含まれている場合、関連商品のリストを商品ページに追加できます。リスト内の商品とページ上の商品とのリレーションシップのタイプを選択できます。

注記

Sitecore 9.3以降では、Commerce 検索スコープを定義し、Commerce 検索結果レンダリングを使用して関連商品を表示することをお勧めします。ストアフロント サイト テンプレートの例を見るには、コンテンツ エディターで、/sitecore/Content/Sitecore/Storefront/Presentation/Page Designs/Commerce Product Page に移動し、[Commerce 商品ページ] を右クリックし、[エクスペリエンス エディター] をクリックします。

関連商品のリストを表示するには:

  1. 商品の詳細ページなど、最新のカタログ商品があるページにプロモーション商品レンダリングを挿入します。

  2. レンダリングの [コントロール プロパティ] ダイアログ ボックスで、[リレーションシップ タイプ] ドロップダウン メニューからオプションを選択し、[OK] をクリックします。

    [コントロール プロパティ] ダイアログ ボックス

レンダリングには、エクスペリエンス エディターのプレースホルダー データが表示されますが、ライブ ストアフロントでは、現在の商品に関連する商品が表示されます。商品のリストは、カタログ商品の [リレーションシップ] タブの対応するフィールドに基づきます。

[リレーションシップ] タブ

ライブ ストアフロントでは、リストの上にヘッダーが表示されます。

ライブ ストアフロントのヘッダー

各リレーションシップ タイプのヘッダー テキストは、/sitecore/content/<tenant>/<site>/Data/Commerce/Relationships フォルダーで、対応する各リレーションシップ タイプ商品に設定できます。

リレーションシップ タイプ フィールド

注記

プロモーション商品レンダリングの各インスタンスは、1 つのリストのみを表示できます。1 つのコンポーネントに対して、[コントロール プロパティ] ダイアログ ボックスの "商品リスト" フィールドと "リレーションシップ タイプ" フィールドの両方に入力した場合、商品リストのみが表示されます。ページに複数のリストを含めるには、ページにプロモーション商品レンダリングの複数のインスタンスを挿入する必要があります。

この手順は、プロモーション商品レンダリングを使用して動的コンテンツを表示する手順と類似しています。ただし、クエリを作成して設定する際に使用できる SXA 検索ファセットと Commerce 専用のファセットが Sitecore から提供される点が異なります。

Commerce 検索結果レンダリングを使用して動的コンテンツを表示するには:

  1. sitecore\Content\<tenant>\<site>\Settings\Scopes に移動し、[スコープ] を右クリックして、[挿入 > スコープ] をクリックします。次に、名前 (「Optix 商品」など) を入力し、[OK] をクリックします。

  2. [コンテンツ] タブの [スコープ] セクションで [クエリの作成] をクリックします。次に、クエリ ボックスをクリックして検索クエリを定義し、[OK] をクリックします。次に例を示します。

    • Commercesearchitemtype: sellableitem

    • Brand:Optix

    • _LatestVersion: true

    • Excludefromwebsearchresults: false

    [検索クエリを作成する] ダイアログ ボックス
  3. [ブースト調整] セクションで [ルールを編集する] をクリックし、ブースト ルール (DSLR カメラを検索結果リストの一番上に移動するなど) を定義し、[OK] をクリックします。

    • _displayname フィールドが DSLR を含む場合、ブーストを 1.1 調整する

    [ルールを作成する] ダイアログ ボックス
  4. リボン メニューで、[保存] をクリックします。

  5. エクスペリエンス エディターでページを開き、ツールボックスで [コマース カタログ] セクションから、Commerce 検索結果レンダリングをページにドラッグします。[コントロール プロパティ] ダイアログ ボックスでレンダリング プロパティを設定し、[OK] をクリックします。次に例を示します。

    Commerce 検索結果レンダリング用の [コントロール プロパティ] ダイアログ ボックス
  6. ツールボックスの [検索] カテゴリで、[結果をさらに表示] レンダリングをページにドラッグし、[コントロール プロパティ] ダイアログ ボックスで、前の手順で使用したものと同じ検索署名 (「Optix 商品」など) を入力し、[OK] をクリックします。

    ライブ ストアフロントでは、このレンダリングは次のように表示されます。

    ライブ ストアフロントの Commerce 検索結果レンダリング