Commerce 検索結果 Scriban テンプレートの変更

概要

Commerce 検索結果 Scriban テンプレートの変更方法の例。

このトピックでは、Scriban テンプレートを編集して、Commerce 検索結果レンダリングを変更する方法の例を示します。

変更前のライブ ストアフロントの Commerce 検索結果には、在庫ステータス ラベルと [Details] ボタンが含まれています。

ライブ ストアフロントでのデフォルトの Commerce 検索結果の例。

Scriban テンプレートの変更後、[Details] ラベルが在庫ステータスに置き換えられます。

Scriban テンプレートを変更した後の、ライブ ストアフロントでの Commerce 検索結果の例。

注記

Commerce 検索結果 Scriban テンプレートを変更する方法については、Discover Sitecore チャネルにあるビデオを参照してください。

Scriban テンプレートによって Commerce 検索結果レンダリングを変更するには:

  1. コンテンツ エディターで、sitecore\Content\<tenant>\<site>\Presentation\Rendering Variants に移動します。

  2. [Commerce Search Results] アイテムと [Default] アイテムを展開して、[Scriban] をクリックします。

    コンテンツ エディターでの Commerce 検索結果 Scriban テンプレートの場所。
  3. [コンテンツ] タブで、[VariantDetails] セクションの [テンプレート] フィールドで、以下の行を変更します。

    <div class="product-summary" data-id="{{ i_item.name }}">
        {{ displayName = i_item.display_name | html.escape }}
        <div class="product-photo">
            <a title="{{ displayName }}" href="{{ i_item.url }}">
                {{
                    productImage = i_item.images.targets | array.first
                    if productImage
                        sc_execute productImage "Responsive Image" 
                    end
                }}
                <div data-bind="css: { 'promotion': promotion }" class="hidden">
                    <span data-bind="text: promotion" class="savings-percentage"></span>
                    <span class="savings-label">{{ sc_translate 'SAVINGS_LABEL' }}</span>
                </div>
            </a>
        </div>
        <div class="product-info">
            <a class="product-title" title="{{ displayName }}" href="{{ i_item.url }}">
                {{ displayName }}
            </a>
            <div class="product-brand">
                {{ i_item.brand }}
            </div>
            <div class="product-indicator">
                <label class="hidden" data-bind="css: { 'price-difference': hasDifferentPrice }">
                    {{ sc_translate 'STARTING_FROM' }}
                </label>
                1<label class="stock-status" data-bind="text: stockLabel"></label>
            </div>
            <div class="product-detail" data-bind="css: { 'on-sale': promotion }">
                <span data-bind="text: price" class="product-price"></span>
                2<a class="product-link" title="{{ displayName }}" href="{{ i_item.url }}">
                    3{{ sc_translate 'DETAILS' }}
                </a>
            </div>
        </div>
    </div>
    

    1

    この行から data-bind="text: stockLabel" をクリップボードにコピーし、その行を削除します。

    2

    data-bind="text: stockLabel" を行の最後に追加します。

    3

    {{ sc_translate 'DETAILS' }} 行を削除します。

    注記

    編集を簡単にするために、Scriban コードをコード エディターにコピーして変更し、[テンプレート] フィールドにコピーして戻すことができます。

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

  5. F9 キーを押して、[スマート パブリッシュ] を使用して変更をパブリッシュします。