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

Version: 10.1

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

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

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

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

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

注記

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

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

コンテンツエディターで、sitecore\Content\<tenant>\<site>\Presentation\Rendering Variants に移動します。
[Commerce Search Results] アイテムと [Default] アイテムを展開して、[Scriban] をクリックします。

[コンテンツ] タブで、[VariantDetails] セクションの [テンプレート] フィールドで、以下の行を変更します。

RequestResponse

<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 コードをコードエディターにコピーして変更し、[テンプレート] フィールドにコピーして戻すことができます。

リボンメニューの [保存] をクリックします。
F9 キーを押して、[スマートパブリッシュ] を使用して変更をパブリッシュします。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、