1. ストアフロントでのコンテンツレンダリング

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

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

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

SXA Storefrontを使ってウェブストアを構築しカスタマイズします。これは柔軟なフレームワークで、ストアフロント上で商品リストをさまざまな方法でレンダリングできます。このトピックでは、以下のレンダリングを使ってストアフロント上の商品リストをレンダリングする方法について説明します:

  • 製品リストレンダリング - カテゴリ内の商品をレンダリングするために使います。このレンダリングは、カタログ内の構成通りに商品を表示したい場合に役立ちます。

    !ヒントコンテンツをより整理するために、ネストされたフォルダ(Product Listsテンプレートで利用可能)を使いましょう。フォルダレベルは何でも設定可能です。

  • Promoted Productsレンダリング - クエリを使って製品リストをレンダリングしたり、固定された製品リストを表示したり、関係データに基づく関連商品を表示したりするために使います。このレンダリングは、選択リストやクエリベースのリストを表示したい場合に役立ちます。

  • Commerce Search Results Rendering - 検索範囲の動的クエリを用いて商品をレンダリングするために使用されます。クエリトークンやブースティングルールを含むことができます。詳細については、「Customizing the Commerce Search Results rendering and Boosting search results」をご覧ください。

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

本トピックでは、製品リストを分解する3つの方法を具体的な例を用いて比較します。

!注このトピックの手順はHabitatカタログを使用しています。

プロダクトリストレンダリングを使ってコンテンツをレンダリングします

商品ページの商品リストレンダリングは、例えばスマートフォンなどのカテゴリーで商品を表示するために使います。商品リストレンダリングはカタログアイテムコンテナにネストされています。このレンダリングには「 もっと見る」 ボタンが含まれており、顧客が追加の商品を表示できます。

!重要商品リストのページングを同じページで複数回表示できるコマースページのコンポーネントは使用しないでください。例えば、商品リストのレンダリングと、製品リストページ情報、製品リストのページごとのアイテム数、製品リストのソート、製品リストのページページレンダリングを同じページに含めないでください。代わりに、関連商品を表示するために怠惰な読み込み機能を使ってください。

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

  1. コンテンツエディターでsitecore/Content///Homeに移動し、商品 項目を右クリックして エクスペリエンスエディターをクリックします。

  2. エクスペリエンスエディターのツールボックス、Commerce Catalogセクションで、カタログアイテムコンテナのレンダリングをページにドラッグします。

  3. カタログアイテムコンテナツールバーで**、「More」→「Edit Component Properties**」をクリックし、「一般」セクションで**「Data Source, Browse**」をクリックします。関連する製品カテゴリ(例えばSmartphones(/sitecore/Content/Sitecore/Storefront/Home/Catalogs/Habitat_Master/Habitat_Master-Departments/Habitat_Master-Phones/Habitat_Master-Smartphones)に移動し、OKをクリックしてコントロールプロパティダイアログボックスを閉じます。

  4. ツールボックスのCommerce CatalogセクションでProduct List Renderingをクリックし、Catalog Item Container内でドラッグします。

    Catalog Item Container and toolbar

  5. 「関連コンテンツ選択」ダイアログボックスで**「製品リスト**」をクリックし、「**OK」**をクリックします。

  6. 製品リストのツールバーで、「More」→「コンポーネントプロパティの編集」をクリックします。

  7. 「Lazy Loading」セクションで「Use Lazy Loading」チェックボックスを選択し、「最大ページサイズ」フィールドで表示したい商品数を入力します。例えば3つ。

    最大ページサイズフィールドは、訪問者がページに到着した際にリストに表示したい商品カードの数を示します。また、訪問者が**「もっと見る**」をクリックするたびにリストに追加されるアイテム数もこの数です。

  8. 変更を確認するには、OKをクリックし、リボンメニューで「 保存」をクリックしてください。

    レンダリングはこんな感じです:

    Product list on the live storefront

Promoted Productsレンダリングを使って、クエリを使って動的な製品リストを表示できます。例えば、商品リストに表示したい商品を取得するクエリを作成できます。このクエリをPromoted Productsレンダリングと関連付けて、動的な製品リストを表示します。

クエリを使って動的な製品リストを表示するには:

  1. コンテンツエディターで、例えば /sitecore/Content///Data/Commerce/Product Lists.の製品リストが入っているフォルダに移動します。

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

  3. メッセージダイアログボックスで、新しい製品リストの名前を入力してください。例えばPhones、をクリック。

  4. ツリービューでは、例えば新たに作成された製品リストをクリックしてPhones。リボンメニューの 「ビュー 」タブで、「 標準フィールド 」チェックボックスと 「バケット」 チェックボックスを選択します。

  5. コンテンツタブのアイテムバケットセクションで、デフォルトバケットクエリラベルの下に「Build query」をクリックし、「Build Search Query」ダイアログボックスで検索クエリを作成し、完了したらOKをクリックします。例えば、Odysseyブランドのスマートフォンを検索するには、以下のクエリを作成します:

    • Commercesearchitemtype
    • ブランド
    • 場所
    • 言語
    Search query for promoted products

  6. リボンの上で「 保存」をクリックします。

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

  8. 「関連コンテンツ選択」ダイアログボックスで**「プロモーション商品**」をクリックし、「**OK」**をクリックします。

  9. プロモート製品ツールバーで、「詳細」→「コンポーネントプロパティの編集」をクリックしてください。

  10. プロモーション 商品 セクションの 製品リスト ボックスから、例えばPhones。

  11. 「 Lazy Loading 」セクションで「 Lazy Loadingを使う 」チェックボックスを選択し、変更を確認するにはOKをクリックします。

    レンダリングはこんな感じです:

    Product List rendering on the live storefront

Promoted Productsレンダリングを使って、固定された商品リストを表示することができます。この場合、「Show more 」ボタンはありません。

固定された製品リストを表示するには:

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

  2. 製品のリストを静的に作成するには、右クリックで 「製品リスト」をクリックし、「 挿入」「選択製品 」をクリックし、メッセージ ダイアログボックスで「 Selected Products」を入力して「 **OK」**をクリックしてください。

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

  4. コンテンツタブの**「Products**」セクションで、表示したい製品が入っているフォルダに移動します。例えば*、sitecore/Content///Home/Catalogs/Habitat_Master/Departments/Phones*などです。

  5. コンテンツタブの**「製品**」セクションで、タイトル欄をクリックし、例えばOdyssey Phones.の名前を入力します。

  6. 製品リストで、例えばsitecore/Content//Home/Catalogs/Habitat_Master/Departments/Phonesなどの製品が入っているフォルダに移動します。選択リストに移動したいすべての商品をダブルクリックします。例えば、すべてのHabitat Odyssey電話です。終了したらリボンの上で「保存」をクリックします。

    Product list defined selection

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

  8. 「関連コンテンツ選択」ダイアログボックスで**「プロモーション商品**」をクリックし、「**OK」**をクリックします。

  9. プロモート製品ツールバーで、「詳細」→「コンポーネントプロパティの編集」をクリックしてください。

  10. プロモート商品セクションの製品リストボックスからSelected Productsをクリックします。

  11. 「 Lazy Loading 」セクションで「 Lazy Loadingを使う 」チェックボックスを選択し、変更を確認するにはOKをクリックします。

    Promoted Products rendering on the live storefront

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

もしあなたのコマースシステムに関連商品のデータが含まれているなら、関連商品のリストを商品ページに追加できます。リスト内の商品がページ上の商品とどのような関係を持つかを選択できます。

!注Sitecore 9.3以降では、コマース検索範囲を定義し、コマースSearch結果レンダリングを使って関連商品を表示することをお勧めします。ストアフロントのサイトテンプレートで例を見るには、コンテンツエディターで /sitecore/Content/Sitecore/Storefront/Presentation/Page Designs/Commerce Product Pageに行き、右クリックCommerce Product Page 、エクスペリエンスエディターをクリックしてください。

関連製品の一覧を表示するには:

  1. 現在のカタログ項目があるページ、例えば商品詳細ページにプロモーション商品のレンダリングを挿入します。

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

    The Control Properties dialog box

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

The Relationships tab

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

The header on the live storefront

/sitecore/content///Data/Commerce/Relationshipsフォルダ内の、それぞれの関係タイプアイテムで各関係タイプのヘッダーテキストを設定できます:

The Relationship Type field

!注プロモート製品レンダリングの各インスタンスは1つのリストしか表示できません。1つのコンポーネントについて、コントロールプロパティダイアログボックスのプロダクトリストフィールドと関係タイプフィールドの両方を入力すると、プロダクトリストのみが表示されます。ページに複数のリストを含めるには、プロモートプロダクトのレンダリングインスタンスを複数挿入する必要があります。

Commerce Search Resultsレンダリングを使って動的なコンテンツを表示してください

この手順は、Promoted Productsレンダリングを使って動的なコンテンツを表示するのと非常に似ていますが、SitecoreはSXA検索ファセットとCommerce固有のファセットを提供しており、クエリの作成やファセット設定時に利用できます。

Commerce Search Resultsレンダリングを使って動的なコンテンツを表示するには:

  1. sitecore\Content\\\Settings\Scopesに移動し、右クリックでスコープ、挿入、スコープをクリック、名前を入力してください。例えばOptix Productsを押してOKをクリックします。

  2. コンテンツタブのスコープセクションで**「クエリを作成**」をクリックし、クエリボックスで検索クエリを定義し、**確認をクリックします。**例えば:

    • Commercesearchitemtype: sellableitem
    • ブランド
    • _LatestVersion
    • ウェブ検索結果から除外
    Build Search Query dialog box

  3. ブーストセクションで「Edit rule」をクリックし、例えばDSLRカメラを検索結果のトップに昇格させるブーストルールを定義し、「**OK」**をクリックします。

    • ここで_displaynameフィールドにはDSLRのブースト調整が1.1分含まれています。
    Create rule dialog box

  4. リボンメニューで「 保存」をクリックします。

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

    Control Properties dialog box for the Commerce Search Results rendering

  6. ツールボックスのSearchカテゴリで「Load More rendering」をページにドラッグし、「 コントロールプロパティ 」ダイアログボックスで、前回のステップで使ったのと同じ検索署名を入力します。例えばOptix products、をクリックし、「 **OK」**をクリックします。

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

    Commerce Search Results rendering on the live storefront
この記事を改善するための提案がある場合は、 お知らせください!