商品バンドルを識別するための Commerce 検索結果レンダリングのカスタマイズ

概要

Commerce 検索結果 Scriban テンプレートをカスタマイズして、商品バンドルが検索結果のラベルで識別されるようにする方法。

Commerce 検索結果 Scribanテンプレートを変更して、出力をカスタマイズできます。たとえば、商品バンドルを表す Bundle タグを追加できます。

ライブ ストアフロントでの Bundle ラベルの例。

商品バンドルを識別するためのカスタム ラベルを追加するには:

  1. コンテンツ エディターで、/sitecore/Content/<tenant>/<site>/Storefront Dictionary に移動します。

  2. [Commerce Search Results] を右クリックして、[挿入 > Dictionary entry] をクリックします。

  3. [メッセージ] ダイアログ ボックスで、ラベルを入力します。たとえば、Bundle Label と入力して、[OK] をクリックします。

  4. [コンテンツ] タブで、[データ] セクションの [キー] フィールドに、ラベルに関連付けるキーの名前を入力します。たとえば、 BUNDLE_LABEL と入力します。

  5. [フレーズ] フィールドに、表示するフレーズを入力します。たとえば、Bundle と入力して、変更を保存します。

  6. Commerce 検索結果 Scriban テンプレートを変更するには、コンテンツ エディターで /sitecore/Content/<tenant>/<site>/Presentation/Rendering Variants/Commerce Search Results/Default/Scriban に移動します。

  7. [コンテンツ] タブで、[VariantDetails] セクションの [テンプレート] フィールドで、<div data-bind="css: { 'promotion': promotion }" 行の前に以下のコードを挿入します。

    {{ if string.contains i_item.template_name 'Bundle' }}
        <div data-bind="css: { 'promotion': promotion }" class="promotion">
         <span class="savings-label">{{ sc_translate 'BUNDLE_LABEL' }}</span>
            </div>
         {{ end }}
    
  8. リボンの [保存] をクリックします。

  9. F9 を押して、変更をパブリッシュします。