---
title: "ウォークスルー:Commerce Search Resultsレンダリングを使ったクロスセルとアップセル"
slug: "walkthrough--cross-selling-and-upselling-using-the-commerce-search-results-rendering"
abstract: "Commerce Search Resultsレンダリングを顧客向けにクロスセルやアップセルを行うカスタマイズ方法。"
---
# ウォークスルー:Commerce Search Resultsレンダリングを使ったクロスセルとアップセル

Commerce Search Resultsレンダリングは、クロスセルやアップセルを顧客に提供するために簡単にカスタマイズできる多用途なレンダリングです。Commerce Search Resultsレンダリングを使って類似商品をクロスセルする方法の例は、Storefrontサイトのテンプレートホームページでご覧いただけます。

![Cross-selling recommended products on the live storefront.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/RecommendedProductsHomePage.png)

Commerce Search Resultsレンダリングは、例えば商品を購入する顧客にパッケージ化された商品バンドルの販売を行うなど、アップセルにも利用できます。以下の画像はこの例を示し、顧客が興味を持ちそうな商品バンドルを提案しています。 [カスタムラベルを追加](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/customize-the-commerce-search-results-rendering-to-identify-product-bundles.html "Customize the Commerce Search Results rendering to identify product bundles") すれば、商品バンドルを簡単に識別できます。

![Upselling product bundles on the live storefront.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/UpsellToBundles.png)

このウォークスルーでは、Commerce Search Resultsレンダリングを修正し、推奨商品バンドルを表示する方法を説明します。

## 商取引範囲を作成する

この検索範囲クエリは、検索結果内の製品に関連付けられた商品バンドルの関係性を調べて取得します。この手順で作成する検索範囲クエリは、[PDPスコープ上のデフォルトの関連製品](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/commerce-search-scopes.html "Commerce search scopes")で使われるクエリに似ています。汎用検索トークン**ProductRelationship**を再利用し、例えば **「Sellable Item To Bundle** 」フィールドのように、欲しい関係フィールドの名前を入力します。

商取引範囲を作成するには:

1.  コンテンツエディターで */sitecore/Content///Settings*に移動し、右クリックで **「Scope」** をクリックし、「 **Insert, Scope**」をクリックします。
2.  **メッセージ**ダイアログボックスで、*PDPの関連バンドル*を入力して**OK**をクリックします。
3.  **コンテンツ**タブの**スコープ**セクションの**スコープクエリ**フィールドに、以下のスコープクエリを入力します: *+sxa:ProductRelationship|SellableItemToBundle;+custom:excludefromwebsitesearchresults|false;+commercesearchitemtype:sellableitem*。
4.  リボンメニューで「 **保存**」をクリックします。

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

Commerce Search Resultsをページに表示する方法:

1.  コンテンツエディターで */sitecore/Content///Presentation/Partial Designs*に行き、「 **デフォルトのメインプロダクトページコンテンツ** 」を右クリックし、「 **エクスペリエンスエディター**」をクリックします。
    
2.  エクスペリエンスエディターのツールボックスの **ページ構造** セクションで **「コンテナ**」をクリックしてページにドラッグします。
    
3.  ツールボックスの **ページ** コンテンツセクションで **[「リッチテキスト](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/add--reusable--rich-text.html)** 」をクリックしてコンテナにドラッグします。そして「 *興味のあるバンドル*」と入力してください。
    
4.  テキストをスタイル化するには、ツールバーで **「テキスト編集** 」をクリックし、**リッチテキストエディター**で**HTML**タブをクリックして次のマークアップを追加し、「 **受け入れ**」をクリックします。
    
    ![Rich Text Editor showing text markup.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/CrossSellUpsellStyling.png)
    
5.  ツールボックスの**Commerce Catalog**セクションで、**[Commerce Search Results](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/commerce-catalog-renderings.html)**をクリックし、レンダリングをコンテナにドラッグします。「 **Associated Content」** ダイアログボックスで **「Default** 」をクリックし、「 **OK」**をクリックします。
    
6.  **Commerce Search Results**ツールバーで、「**More」→「Edit components properties**」をクリックしてください。
    
7.  **SearchCriteria**セクションの**Search resultsシグネチャ**フィールドで、*related-bundlesを*入力してください。
    
8.  **Search scope**フィールドで、*PDPの「Related Bundles*」をクリックし、次の画像に示された値を定義し、「**OK」**をクリックします。
    
    ![Control Properties dialog box.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/RecommendedBundlesCtrlProperties.png)
    
9.  **ツールボックス**の**Search**セクションで「**Load More** rendering」をクリックし、Commerce Search Results renderingの下のページにドラッグしてください。**「Associated Content」**ダイアログボックスで「**Default**」をクリックし、「**OK」**をクリックします。
    
10.  **Load More**ツールバーで「**More」→「Edit components properties**」をクリックし、**SearchCriteria**セクションの**Search resultsシグネチャ**フィールドで*「Related-bundles*」と入力し、**OK**をクリックします。
     
11.  変更を保存してください。
     

## Personalize the Product Bundlesセクション

商品バンドル推奨セクションがレンダリングされず、Commerce Search Resultsレンダリングが現在の製品に関連する商品バンドルがない場合にクエリが実行されないようにするには、パーソナライズルールを追加する必要があります。

セクションを個人的にするために:

1.  前の手順で追加した **コンテナ** レンダリングをクリックしてください。
    
2.  ツールバーで「 **このコンポーネントのパーソナライズを作成または編集**」をクリックし、**コンポーネントPersonalize**ダイアログボックスで **「追加** (+)」をクリックして名前を入力*Related bundles*。
    
3.  「 **ルール編集** 」をクリックし、「 **条件選択** 」欄 *に入力し* 、**特定のフィールドが特定の値と比較される**ルールをクリックしてください。
    
4.  **編集ルール**ボックスで「**specific**」をクリックし、「*SellableItemToBundle*」を入力し、「**OK」**をクリックします。**「比較**」をクリックして「**は等**しい」に変更し、「**OK」**をクリックします。**警告**ダイアログボックスで「**OK」**をクリックします。
    
    ![UpsellPersonalisation.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/100/sitecore-experience-commerce/images/UpsellPersonalisation.png)
    
5.  **デフォルト**セクションで**「非表示**」をクリックします。
    
6.  **「OK**」をクリックして**Personalizeコンポーネント**のダイアログボックスを閉じます。
    
7.  リボンメニューの **ホーム** タブで **「保存** 」をクリックし、その後 **「公開**」をクリックします。