製品リストをオンラインで表示

Version: 10.1
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

  • 製品リストのレンダリング - カテゴリ内の製品をレンダリングするために使用します。このレンダリングは、カタログで構造化されている製品をそのまま表示する場合に便利です。

    先端

    コンテンツをより適切に整理するには、ネストされたフォルダ(製品リストテンプレートで利用可能)を使用します。フォルダレベルはいくつでも持つことができます。

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

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

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

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

メモ

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

製品リスト レンダリングを使用してコンテンツをレンダリングする

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

大事な

商品リストのページングを同じページに複数回表示できるコマースページコンポーネントは使用しないでください。たとえば、商品リスト レンダリングを、商品リスト ページ情報、ページごとの商品リスト アイテム、商品リストの並べ替え、または商品リスト ポケットベル レンダリングと一緒に同じページに含めないでください。代わりに、遅延読み込み機能を使用して関連製品を表示します。

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

  1. コンテンツ エディターでsitecore/Content/<tenant>/<site>/Homeに移動し、Productアイテムを右クリックしてExperience Editorをクリックします。

  2. Experience Editor、Toolbox、Commerce Catalogセクションで、Catalog Item Containerレンダリングをページにドラッグします。

  3. Catalog Item Containerツールバーで「More, Edit Component Properties」をクリックし、「General」セクションで「Data Source, Browse」をクリックします。関連する製品カテゴリ ( Smartphones (/sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Phones/Habitat_Master-Smartphones) など) に移動し、OKをクリックしてControl Propertiesダイアログ ボックスを閉じます。

  4. ToolboxのCommerce Catalogセクションで、Product Listレンダリングをクリックし、Catalog Item Container内にドラッグします。

    Catalog Item Container and toolbar

  5. Select the Associated Contentダイアログボックスで、「 Product List」をクリックし、「 OK」をクリックします。

  6. Product Listツールバーで、More, Edit Component Propertiesをクリックします。

  7. Lazy Loadingセクションで、Use Lazy Loadingチェック ボックスをオンにし、Max Page Sizeフィールドに、表示する製品の数 (3など) を入力します。

    Max Page Sizeフィールドは、訪問者がページに到着したときにリストに表示する製品カードの数を示します。これは、訪問者がShow Moreをクリックするたびにリストに追加される項目の数でもあります。

  8. 変更を確定するには、OKをクリックし、リボン メニューのSaveをクリックします。

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

    Product list on the live storefront

プロモーション商品のレンダリングを使用して動的コンテンツをレンダリングする

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

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

  1. コンテンツ エディターで、製品リストが格納されているフォルダー ( /sitecore/Content/<tenant>/<site>/Data/Commerce/Product Listsなど) に移動します。

  2. 右クリックしてInsert, Named Searchをクリックします。

  3. Messageダイアログボックスで、新しい製品リストの名前 ( Phonesなど) を入力し、OKをクリックします。

  4. ツリー ビューで、新しく作成した製品リスト ( Phonesなど) をクリックします。リボン メニューのViewタブで、Standard fieldsチェック ボックスとBucketsチェック ボックスをオンにします。

  5. ContentタブのItem Bucketsセクションで、ラベルDefault bucket queryの下にあるBuild queryをクリックし、Build Search Queryダイアログ ボックスで検索クエリを作成し、完了したらOKをクリックします。たとえば、Odysseyブランドのスマートフォンを検索するには、次のクエリを作成します。

    • Commercesearchitemtype:販売可能な商品

    • ブランド:オデッセイスマートフォン

    • 場所:電話

    • 言語:ja

    Search query for promoted products

  6. リボンのSaveをクリックします。

  7. クエリをプロモーション商品レンダリングに関連付けるには、エクスペリエンス エディターで製品ページに移動し、ツールボックスのCommerce CatalogセクションからPromoted Productsレンダリングをページにドラッグします。

  8. Select the Associated Contentダイアログボックスで、「 Promoted Products」をクリックし、「 OK」をクリックします。

  9. Promoted Productsツールバーで、More, Edit Component Propertiesをクリックします。

  10. Promoted ProductsセクションのProduct Listボックスから、使用する製品リスト(Phonesなど)をクリックします。

  11. Lazy Loadingセクションで、Use Lazy Loadingチェックボックスをオンにし、変更を確定するにはOKをクリックします。

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

    Product List rendering on the live storefront

プロモーション製品レンダリングを使用して、選択したリストをレンダリングします

プロモーション製品レンダリングを使用して、製品の固定リストを表示できます。この場合、Show moreボタンはありません。

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

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

  2. 製品の静的リストを作成するには、Product Listsを右クリックし、Insert, Selected Productsをクリックし、Messageダイアログボックスで「 Selected Products」と入力してOKをクリックします。

  3. リボンのViewタブで、Bucketsチェック ボックスとRaw valuesチェック ボックスをオフにします。

  4. ContentタブのProductsセクションで、表示する製品が含まれているフォルダー ( sitecore/Content/<tenant>/<site>/Home/Catalogs/Habitat_Master/Departments/Phonesなど) に移動します。

  5. ContentタブのProductsセクションで、Titleフィールドをクリックし、名前 ( Odyssey Phonesなど) を入力します。

  6. Products Listで、製品が格納されているフォルダ (sitecore/Content/<tenant>/<site>/Home/Catalogs/Habitat_Master/Departments/Phonesなど) に移動します。Selected Listに移動するすべての製品をダブルクリックします 、たとえば、すべてのHabitat Odyssey電話。終了したら、リボンのSaveをクリックします。

    Product list defined selection

  7. 固定リストをPromoted Productsレンダリングに関連付けるには、エクスペリエンス エディターで製品ページに移動し、ツールボックスのCommerce Catalogセクションから プロモーション製品 レンダリングをページにドラッグします。

  8. Select the Associated Contentダイアログボックスで、「 Promoted Products」をクリックし、「 OK」をクリックします。

  9. Promoted Productsツールバーで、More, Edit Component Propertiesをクリックします。

  10. Promoted Productsセクションで、Product ListボックスでSelected Productsをクリックします。

  11. Lazy Loadingセクションで、Use Lazy Loadingチェックボックスをオンにし、変更を確定するにはOKをクリックします。

    Promoted Products rendering on the live storefront

  12. 変更を保存するには、リボンのSaveをクリックします。

プロモーション製品レンダリングを使用して、関連製品のリストを表示します

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

手記

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

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

  1. プロモーション商品レンダリングは、現在のカタログアイテムがあるページ (製品詳細ページなど) に挿入します。

  2. レンダリングのControl Propertiesダイアログボックスで、Relationship Typeドロップダウンメニューからオプションを選択し、OKをクリックします。

    The Control Properties dialog box

レンダリングでは、エクスペリエンス エディターにプレースホルダー データが表示されますが、ライブ ストアフロントでは、現在の商品に関連する商品が表示されます。製品の一覧は、カタログ アイテムのRelationshipsタブの対応するフィールドから取得されます。

The Relationships tab

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

The header on the live storefront

各関係タイプのヘッダー テキストは、/sitecore/content/<tenant>/<site>/Data/Commerce/Relationshipsフォルダー内のそれぞれの関係タイプ項目で構成できます。

The Relationship Type field
手記

プロモーション製品レンダリングの各インスタンスには、1つのリストのみを表示できます。1つのコンポーネントのControl Propertiesダイアログ ボックスのProduct ListフィールドとRelationship Typeフィールドの両方に入力すると、製品リストのみが表示されます。1つのページに複数のリストを含めるには、プロモーション商品レンダリングの複数のインスタンスをページに挿入する必要があります。

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

この手順は、プロモーション製品のレンダリングを使用して動的コンテンツを表示するのと非常によく似ていますが、SitecoreはSXA検索ファセットと、クエリを作成してファセットを設定するときに使用できるCommerce固有のファセットを提供します。

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

  1. sitecore\Content\<tenant>\<site>\Settings\Scopesに移動し、Scopeを右クリックし、Insert, Scopeをクリックし、名前 ( Optix Productsなど) を入力してOKをクリックします。

  2. ContentタブのScopeセクションで、Build queryをクリックし、クエリ ボックスをクリックして検索クエリを定義し、OKをクリックします。例えば：

    • Commercesearchitemtype: 販売可能な商品

    • ブランド:Optix

    • _LatestVersion:真

    • Excludefromwebsearchresults: いいえ

    Build Search Query dialog box

  3. Boostingセクションで、Edit ruleをクリックし、ブーストルール(DSLRカメラを検索結果リストの一番上に昇格させるなど)を定義し、OKをクリックします。

    • where the _displayname field contains DSLR adjust boost by 1.1

    Create rule dialog box

  4. リボン メニューのSaveをクリックします。

  5. エクスペリエンス エディターでページを開き、ツールボックスのCommerce CatalogセクションからCommerce検索結果レンダリングをページにドラッグし、Control Propertiesダイアログ ボックスでレンダリング プロパティを設定して、OKをクリックします。例えば：

    Control Properties dialog box for the Commerce Search Results rendering

  6. ツールボックスのSearchカテゴリで、Load More レンダリングをページにドラッグし、Control Propertiesダイアログ ボックスで、前の手順で使用したのと同じ検索シグネチャ ( Optix productsなど) を入力して、OKをクリックします。

    ライブストアフロントでは、レンダリングは次のようになります。

    Commerce Search Results rendering on the live storefront

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、