Commerce検索結果Scribanテンプレートを変更する

Version:

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

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

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

変更前は、ライブストアフロントのコマース検索結果には、在庫ステータスラベルと詳細ボタンが含まれていました。

Example of the default Commerce Search Results on the live storefront.

Scribanテンプレートを変更すると、Detailsラベルがストックステータスに置き換えられます。

Example of the Commerce Search Results on the live storefront after modifying the Scriban template.

メモ

Commerce検索結果のScribanテンプレートを変更する方法については、Discover Sitecoreチャネルで公開されているビデオをご覧ください。

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

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

ContentタブのVariantDetailsセクションのTemplateフィールドで、次の行を変更します。

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

リボンメニューのSaveをクリックします。
F9キーを押し、Smart Publishを使用して変更を公開します。

この記事を改善するための提案がある場合は、お知らせください!