チュートリアル: Commerce 検索結果レンダリングを使用したクロスセルとアップセル

概要

Commerce 検索結果レンダリングをカスタマイズして、顧客にクロスセルおよびアップセルする方法。

Commerce 検索結果レンダリングは多用途なレンダリングであり、容易にカスタマイズして、顧客にクロスセルとアップセルを提供できます。Commerce 検索結果レンダリングを使用して、Storefront サイト テンプレートのホーム ページで同様の商品をクロスセルする方法の例を見ることができます。

ライブ ストアフロントでの推奨商品のクロスセル。

Commerce 検索結果レンダリングを使用して、商品をアップセルすることもできます。たとえば、商品を購入する顧客にパッケージ化された商品バンドル取引を提供できます。次の画像は、この例を示しており、顧客が関心を持つ可能性のある商品バンドルを提案しています。カスタム ラベルを追加して、商品バンドルを識別しやすくできます。

ライブ ストアフロントでの商品バンドルのアップセル。

このチュートリアルでは、Commerce 検索結果レンダリングを変更して、推奨される商品バンドルを表示する方法について説明します。

この検索スコープ クエリは、関係を調べることにより、検索結果内の商品に関連付けられている商品バンドルを取得します。この手順で作成する検索スコープ クエリは、デフォルトの PDP スコープの関連商品で使用されるクエリに似ています。汎用検索トークン [ProductRelationship] を再利用して、必要な関係フィールド、たとえば、[Sellable 商品をバンドルへ] フィールドの名前を提供します。

コマース スコープを作成するには:

  1. コンテンツ エディターで、/sitecore/Content/<tenant>/<site>/Settings に移動し、[Scopes] を右クリックし、[挿入 > スコープ] をクリックします。

  2. [メッセージ] ダイアログ ボックスで、 Related Bundles on PDP と入力して、[OK] をクリックします。

  3. [コンテンツ] タブで、[スコープ] セクションの [スコープ クエリ] フィールドに、次のスコープ クエリを入力します。+sxa:ProductRelationship|SellableItemToBundle;+custom:excludefromwebsitesearchresults|false;+commercesearchitemtype:sellableitem

  4. リボン メニューの [保存] をクリックします。

Commerce 検索結果レンダリングをページに追加するには:

  1. コンテンツ エディターで、sitecore/Content/<tenant>/<site>/Presentation/Partial Designs に移動し、[Default Main Product Page Content] を右クリックして、[エクスペリエンス エディター] をクリックします。

  2. エクスペリエンス エディターで、ツールボックスの [ページ構造] セクションにある [コンテナー] をクリックして、ページにドラッグします。

  3. ツール ボックスで、[ページ コンテンツ] セクションの [リッチ テキスト] をクリックして、コンテナにドラッグします。次に、あなたが興味を持つかもしれないバンドルと入力します。

  4. テキストのスタイルを設定するには、ツールバーの [テキストを編集] をクリックして、[リッチ テキスト エディター] の [HTML] タブをクリックし、次のマークアップを追加して、[適用] をクリックします。

    リッチ テキスト エディターに表示されたテキスト マークアップ。
  5. ツールボックスの [Commerce カタログ] セクションで、[Commerce 検索結果] をクリックして、レンダリングをコンテナにドラッグします。[関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、[デフォルト] をクリックし、[OK] をクリックします。

  6. [Commerce 検索結果] ツールバーで、[詳細 > コンポーネント プロパティを編集] をクリックします。

  7. [SearchCriteria] セクションの [検索結果シグネチャー] フィールドにrelated-bundlesと入力します。

  8. [ 検索スコープ] フィールドの [Related Bundles on PDP] をクリックして、次の画像に示す値を定義し、[OK] をクリックします。

    [コントロール プロパティ] ダイアログ ボックス。
  9. [ツールボックス] の [検索] セクションで、[結果をさらに表示] レンダリングをクリックして、Commerce 検索結果レンダリングの下のページにドラッグします。[関連付けられたコンテンツを選択してください。] ダイアログ ボックスで、[デフォルト] をクリックし、[OK] をクリックします。

  10. [結果をさらに表示] ツールバーで [詳細 > コンポーネント プロパティを編集] をクリックし、[ SearchCriteria] セクションの [検索結果シグネチャー] フィールドに Related-bundles と入力して、[OK] をクリックします。

  11. 変更を保存します。

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

セクションをパーソナライズするには:

  1. 前の手順で追加した [コンテナ] レンダリングをクリックします。

  2. ツールバーの [このコンポーネントのパーソナライゼーションを作成または編集する] をクリックし、[コンポーネントをパーソナライズします] ダイアログ ボックスの [追加] (+) をクリックして、Related bundles という名前を入力します。

  3. [ルールを編集する] をクリックして、[条件を選択します] フィールドに field と入力して、[特定のフィールドが特定の値と比較される場合] ルールをクリックします。

  4. [ルールを編集する] ボックスで、[固有] をクリックし、SellableItemToBundle と入力し、[OK] をクリックします。[比較する] をクリックして、[に等しい] に変更して、[OK] をクリックします。[警告] ダイアログ ボックスで、[OK] をクリックします。

    UpsellPersonalisation.png
  5. [デフォルト] セクションで、[非表示] をクリックします。

  6. [OK] をクリックして、[コンポーネントをパーソナライズします] ダイアログ ボックスを閉じます。

  7. リボン メニューの [ホーム] で、[保存] をクリックしてから、[パブリッシュ] をクリックします。