---
title: "Commerce Searchの結果レンダリングを活用してください"
slug: "use-the-commerce-search-results-rendering"
abstract: "Commerce Searchの結果レンダリングの概要とその設定方法。"
---
# Commerce Searchの結果レンダリングを活用してください

ストアフロントを迅速かつ簡単に検索できることが重要です。これを支援するために、ツールボックスにはCommerce Search Results RenderingとSXA Search Results Renderingという[2つの検索レンダリング](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/choosing-between-available-renderings.html "Choosing between available renderings") があります。

Commerce Search結果のレンダリングはツールボックスの[Commerce Catalog](https://doc.sitecore.com/xp/ja/users/101/sitecore-experience-commerce/commerce-catalog-renderings.html "Commerce Catalog renderings")セクションから利用可能で、SXA Storefrontサイトテンプレートの複数のページで使用されます。

-   商業カタログカテゴリページ
-   コマースホームページ
-   Commerce 製品詳細ページ
-   Commerce Search Results ページ

Commerce Search Resultsレンダリングを使うには、ページにCommerce Search Resultsレンダリングを追加し、検索署名を定義して関連付ける必要があります。

> !注Commerce Search Results rendingは [、カタログ画像ソースのサイトレベル設定](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/configure-the-source-for-catalog-images.html) (*sitecore///Settings/Commerce/Catalog Configuration*)を使用し、画像をメディアライブラリから取得するかSitecoreデジタル資産管理(DAM)システムから取得するかを決定します。

## Commerce Search Resultsレンダリングをページに追加してください

ユーザーが検索結果を見るには、SXA Search結果またはCommerce Search Resultsレンダリングのいずれかをページに追加する必要があります。

Commerce Search Resultsレンダリングを追加するには:

1.  検索レンダリングを追加するページをエクスペリエンスエディターで開いてください。
    
2.  **ツールボックス**の**Commerce Catalog**セクションで、**Commerce Search Results** renderingをクリックしてページにドラッグします。
    
3.  「 **関連コンテンツ選択** 」ダイアログボックスで **「デフォルト**」をクリックし、その後 **「OK」**をクリックします。
    
    ![Select Associated Content for the Commerce Search Results rendering](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/SearchRendering.png)
    
4.  **検索で結果が出なかった場合に表示されるテキストを変更するには、Commerce Search Results****ツールバーで「コンポーネント設定項目を編集」をクリックし**![A0173FD240754803B4109340ECAC8288.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/A0173FD240754803B4109340ECAC8288.png)**表示したいテキストを入力してOKをクリックします。**
    
    ![The Commerce Search Results toolbar](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/924384955E9F46C3B9F350F7CC3A93F8.png)
    
5.  **Commerce Search Results**ツールバーで、「**More」→「Edit Component Properties**」をクリックし、**カタログ画像**セクションの**「Control Properties」**ダイアログボックスで画像ソースを指定します。Sitecoreデジタル資産管理(DAM)システムで保存・管理されている画像を使用するには、「**Sitecore デジタル資産管理システムで画像を使用する**」チェックボックスを選択してください。チェックボックスがクリアされると、画像はメディアライブラリから取得されます。
    
6.  検索結果の配置を指定するには、以下のフィールドを編集してください:
    
    -   **Search Results signature** – 他の検索レンダリング(例えばLoad Moreレンダリング)と組み合わせて使用できるユニークな署名を入力します。これは、ページに複数の検索レンダリングがある場合に、特定の検索結果でフィルタリングしたい場合に役立ちます。
    -   **Search Scope** – 検索結果を制限するために検索 [範囲](https://doc.sitecore.com/xp/en/developers/100/sitecore-experience-commerce/en/commerce-search-scopes.html) を選択します。
    -   **ページサイズ** – レンダリングで最初に読み込みたい結果の数、さらに次のページを読み込む時、または無限遠スクロール時には **「もっと読み込む」** ボタンをクリックした時の数を入力します。
    -   **デフォルトの言語フィルタリング** – 検索に使いたい言語を選択します。通常、これは *Current language*に設定されています。
    -   **デフォルトのソート順** – ページ上で結果の並べ替え方法を選択します。これは結果の並べ替えレンダリングが使われていない場合にのみ使用されます。
7.  終わった**らOK**をクリックし、リボンの上で**保存をクリックします。**
    

## Search results signatureを指定する

Search Results signatureは複数のファセットフィルターを集約し、ライブストアフロントでは顧客が複数の選択に基づいて検索結果を絞り込み、結果がページ上で動的に表示されるようにします。

Storefrontのサイトテンプレートには、Commerce Search ResultsレンダリングとLoad Moreレンダリングを使った2つのセクションがあるホームページが含まれています。各セクションでは、レンダリングを一意に結合するユニークな検索シグネチャがあります。例えば**、On Sale Televisions**セクションでは、Commerce Search Resultsレンダリングと関連する**Load More**ボタンの両方で*on-sale-televisions*検索結果署名を使用しています。**Mira Laptops**セクションでは、両方のレンダリングで*mira-laptops*の検索結果署名が使われています。

![Search signatures as used on the Storefront site template Home page](https://doc.sitecore.com/api/markdown-image/xp/ja/users/101/sitecore-experience-commerce/images/SearchSignature.png)

検索結果の署名を指定するには:

1.  **ツールボックス**の**Search**セクションで、検索レンダリング(例えばLoad More レンダリング)を部分的なデザインにドラッグします。
2.  ツールバーで **「More」→「コンポーネントプロパティ編集**」をクリックします。
3.  **コントロールプロパティ**のダイアログボックスの**Search Criteria**セクションで、**Search結果のシグネチャ**を定義し、**OK**をクリックします。