---
title: "オンラインで製品リストをレンダリングする"
slug: "render-a-product-list-online"
abstract: "製品リストレンダリング、プロモート製品レンダリング、Commerce Search Resultsレンダリングを使って製品リストを表示する方法の例。"
---
# オンラインで製品リストをレンダリングする

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

-   製品リストレンダリング - カテゴリ内の商品をレンダリングするために使います。このレンダリングは、カタログ内の構成通りに商品を表示したい場合に役立ちます。
    
    > !ヒントコンテンツをより整理するために、ネストされたフォルダ(Product Listsテンプレートで利用可能)を使いましょう。フォルダレベルは何でも設定可能です。
    
-   Promoted Productsレンダリング - クエリを使って製品リストをレンダリングしたり、固定された製品リストを表示したり、関係データに基づく関連商品を表示したりするために使います。このレンダリングは、選択リストやクエリベースのリストを表示したい場合に役立ちます。
    
-   [Commerce Search Results Rendering](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/use-the-commerce-search-results-rendering.html "Use the Commerce Search Results rendering") - 検索[範囲の動的クエリ](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/commerce-search-scopes.html)を用いて商品をレンダリングするために使用されます。クエリトークンやブースティングルールを含むことができます。詳細については、「[Customizing the Commerce Search Results rendering](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/customizing-the-commerce-search-results-rendering.html) and [Boosting search results](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/boost-products-in-search-results-for-commerce.html)」をご覧ください。
    

[製品リストの異なるレンダリングを比較](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/choosing-between-available-renderings-for-product-lists.html)する際に考慮すべき点がいくつかあります。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](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/NestedProductList.png)
    
5.  **「関連コンテンツ選択**」ダイアログボックスで**「製品リスト**」をクリックし、「**OK」**をクリックします。
    
6.  **製品リスト**のツールバーで、「**More」→「コンポーネントプロパティの編集**」をクリックします。
    
7.  **「Lazy Loading**」セクションで「**Use Lazy Loading**」チェックボックスを選択し、「**最大ページサイズ**」フィールドで表示したい商品数を入力します。例えば*3*つ。
    
    **最大ページサイズ**フィールドは、訪問者がページに到着した際にリストに表示したい商品カードの数を示します。また、訪問者が**「もっと見る**」をクリックするたびにリストに追加されるアイテム数もこの数です。
    
8.  変更を確認するには、**OK**をクリックし、リボンメニューで「 **保存**」をクリックしてください。
    
    レンダリングはこんな感じです:
    
    ![Product list on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/ProductList.png)
    

## Promoted Productsレンダリングを使って動的なコンテンツをレンダリングします

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:sellableitem
    -   ブランド:オデッセイスマートフォン
    -   場所:携帯電話
    -   言語:en
    
    ![Search query for promoted products](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OdysseyPhonesSearchQuery.png)
    
6.  リボンの上で「 **保存**」をクリックします。
    
7.  クエリをプロモート商品レンダリングに関連付けるには、エクスペリエンスエディターで商品ページに移動し、ツールボックスの**Commerce Catalog**セクションからプロ **モート商品** レンダリングをドラッグしてください。
    
8.  **「関連コンテンツ選択**」ダイアログボックスで**「プロモーション商品**」をクリックし、「**OK」**をクリックします。
    
9.  **プロモート製品**ツールバーで、「**詳細」→「コンポーネントプロパティの編集**」をクリックしてください。
    
10.  プロモーション **商品** セクションの **製品リスト** ボックスから、例えば*Phones*。
     
11.  「 **Lazy Loading** 」セクションで「 **Lazy Loadingを使う** 」チェックボックスを選択し、変更を確認するには**OK**をクリックします。
     
     レンダリングはこんな感じです:
     
     ![Product List rendering on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OdysseyPhonesNamedSearch.png)
     

## Promoted Productsレンダリングを使って、選択されたリストをレンダリングします

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](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OdysseyPhonesSelected.png)
    
7.  固定リストを **プロモート製品** レンダリングに関連付けるには、エクスペリエンスエディターで製品ページに移動し、ツールボックスの**Commerce Catalog**セクションからプロモート商品レンダリングをドラッグします。ページ上に。
    
8.  **「関連コンテンツ選択**」ダイアログボックスで**「プロモーション商品**」をクリックし、「**OK」**をクリックします。
    
9.  **プロモート製品**ツールバーで、「**詳細」→「コンポーネントプロパティの編集**」をクリックしてください。
    
10.  **プロモート商品**セクションの**製品リスト**ボックスから*Selected Products*をクリックします。
     
11.  「 **Lazy Loading** 」セクションで「 **Lazy Loadingを使う** 」チェックボックスを選択し、変更を確認するには**OK**をクリックします。
     
     ![Promoted Products rendering on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/PromotedProductsFixedList.png)
     
12.  変更を保存するには、リボンの上で **「保存**」をクリックします。
     

## Promoted Productsレンダリングを使って、関連製品の一覧を表示します

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

> !注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](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/64AE54C2ABD14FECB56C00B85EB44609.png)
    

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

![The Relationships tab](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CXA_CE_Relationships1.png)

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

![The header on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CXA_Live_RelatedProducts_Header.png)

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

![The Relationship Type field](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/CX_CE_RelationshipType_Title.png)

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

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

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

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

1.  *sitecore\\Content\\\\\\Settings\\Scopes*に移動し、右クリック**でスコープ**、**挿入、スコープ**をクリック、名前を入力してください。例えば*Optix Products*を押して**OK**をクリックします。
    
2.  **コンテンツ**タブの**スコープ**セクションで**「クエリを作成**」をクリックし、クエリボックスで検索クエリを定義し、**確認をクリックします。**例えば:
    
    -   Commercesearchitemtype: sellableitem
    -   ブランド:Optix
    -   \_LatestVersion:本当です
    -   ウェブ検索結果から除外:false
    
    ![Build Search Query dialog box](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OpixProductsSearchQuery.png)
    
3.  **ブーストセクション**で「**Edit rule**」をクリックし、例えばDSLRカメラを検索結果のトップに昇格させるブーストルールを定義し、「**OK」**をクリックします。
    
    -   *ここで\_displaynameフィールドにはDSLRのブースト調整が1.1分含まれています。*
    
    ![Create rule dialog box](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OpixProductsBoostingRule.png)
    
4.  リボンメニューで「 **保存**」をクリックします。
    
5.  エクスペリエンスエディターでページを開き、ツールボックスの**Commerce Catalog**セクションからCommerce Search Resultsレンダリングをページにドラッグし、**Control Properties**ダイアログボックスでレンダリングプロパティを設定し、**OK**をクリックします。例えば:
    
    ![Control Properties dialog box for the Commerce Search Results rendering](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OpixProductsRenderingProperties.png)
    
6.  ツールボックスの**Search**カテゴリで「Load More rendering」をページにドラッグし、「 **コントロールプロパティ** 」ダイアログボックスで、前回のステップで使ったのと同じ検索署名を入力します。例えば*Optix products*、をクリックし、「 **OK」**をクリックします。
    
    ライブストアフロントのレンダリングは次のようになります:
    
    ![Commerce Search Results rendering on the live storefront](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/OpixProductsOntheLiveStorefront.png)