Commerce 検索結果レンダリングのカスタマイズ

概要

Commerce 検索結果レンダリング Scriban テンプレートの概要。

Commerce 検索結果レンダリング バリアントには、Scriban テンプレートの形式のレンダラーが含まれています。

Scriban テンプレートは、個々の商品カードのマークアップをレンダリングする役割を果たします。これは、商品アイテムを反復処理するループ内で実行されます。商品カード用に生成されるマークアップを変更するには、Scriban テンプレートを変更します。この場合、ソフトウェアのアップグレード時にカスタマイズがオーバーライドされないように、新しいカスタム レンダリング バリアントを作成することをお勧めします。レンダリングのラベルを変更することもできます。

コンテンツ ツリー内の Scriban テンプレートの位置

次の表に、Commerce 検索結果レンダリング Scriban テンプレートの主要なプロパティの詳細を示します。

プロパティまたは変数

説明

i_item

i_item プロパティは、レンダリング バリアントのコンテキストにおける現在のアイテムです。多くの場合、i_datasource アイテムですが、この場合、個々のアイテムのカタログ データを公開しています。

デフォルトの実装では、アイテムはすべて products タイプであると想定されていますが、アイテムはバンドル、カテゴリー、またはバリアントにすることもできます。i_item アイテムは、このテンプレートにさまざまなタイプのデータを格納するために使用されます。たとえば、i_item.name プロパティは商品 ID を格納し、id という名前のデータ属性に割り当てられます。また、i_item.url プロパティは、商品詳細ページへのリンクを格納し、href 属性に割り当てられます。

o_model

o_model プロパティは、MVC コントローラー レンダリングに渡されます。これは、カタログの名前と商品バンドル ID が MVC コントローラーに渡されることを意味します。o_model プロパティは、価格とプロモーション情報を渡すためにも使用されます。

displayName

displayName 変数は、さまざまなコンテキストで使用されます。たとえば、i_item.display_name に初期化されて、商品の表示名を格納します。この変数は組み込み関数 html.escape に渡されるため、返される文字列はテキスト ブロックになります。

また、アンカー タグの title 属性に割り当てられます。i_item.url プロパティは、商品ページへのリンクを格納し、href 属性に割り当てられます。displayName 変数は、anchor タグのテキストとしても割り当てられます。

sc_imagelink

画像リンクは、sc_imagelink 関数を CatalogProductImage オブジェクトに対して使用して取得されます。カタログ画像のソースと結果の設定は、定義した設定に応じて、メディア ライブラリまたは Digital Asset Management システムのいずれかから取得されます。この関数は、商品画像を表す CatalogProductImage タイプのパラメーター オブジェクトと、メイン/ヒーロー商品画像の CatalogProductImage オブジェクトを含んだ o_model.master_product_image プロパティを予期しています。

sc_translate

この関数は、サイトのディクショナリ ドメイン (sitecore/Content/<tenant>/<site>/Storefront Dictionary) で定義されたアイテムを表示するために使用されます。

i_item.brand

このプロパティは、商品のブランド名を格納し、<div> 要素に表示されます。

次のコードは、デフォルトのレンダリング バリアント内で定義された Commerce 検索結果レンダリング Scriban テンプレートを示しています。

{{ # The <div> element renders a product item with values from the search item (i_item) and the ProductSummaryViewModel (o_model) }}
<div class="product-summary" data-id="{{ i_item.name }}">
    {{
        # If the o_model is not available, set it to an empty object to be accessed by the rest of the template without null reference error
        if !o_model
            o_model = {}
        end

        # Escape any HTML characters in the display name
        displayName = i_item.display_name | html.escape
    }}
    {{ # The <div> element contains the product photo }}
    <div class="product-photo">
        {{ # The <a> element wraps the product photo with a link to navigate to the product page }}
        <a title="{{ displayName }}" href="{{ i_item.url }}">
            <img src="{{ o_model.master_product_image | sc_imagelink 220 220 }}" alt="{{ o_model.master_product_image.alternate_text }}" />
            {{ ## The <div> element contains the savings percentage and savings label.
                  The CSS class "promotion" is added on server side (if "o_model.is_on_sale" is true) or on client side after the data binding (if "promotion" has a true value). ## }}
            <div data-bind="css: { 'promotion': promotion }"
                class="hidden {{ if o_model.is_on_sale  }} promotion {{ end }}">
                {{ # The promotion text is rendered on server side and will be overwritten on the client side if data binding occurs }}
                <span data-bind="text: promotion" class="savings-percentage">{{ o_model.savings_percentage }}%</span>
                <span class="savings-label">{{ sc_translate 'SAVINGS_LABEL' }}</span>
            </div>
        </a>
    </div>
    {{ # The <div> element contains all the product information such as the display name and price }}
    <div class="product-info">
        {{ # The <a> element wraps the product display name with a link to navigate to the product page }}
        <a class="product-title" title="{{ displayName }}" href="{{ i_item.url }}">
            {{ displayName }}
        </a>
        <div class="product-brand">
            {{ i_item.brand }}
        </div>
        {{ # The <div> element contains the stock status of the product and a "Starting From" label }}
        <div class="product-indicator">
            {{ ## The <label> element contains the "Starting From" label.
                  The CSS class "price-difference" is added on server side (if "o_model.display_starting_from" is true) or on client side after the data binding (if "hasDifferentPrice" is true). ## }}
            <label class="hidden  {{ if o_model.display_starting_from  }} price-difference {{ end }}"
                data-bind="css: { 'price-difference': hasDifferentPrice }">
                {{ sc_translate 'STARTING_FROM' }}
            </label>
            <label class="stock-status" data-bind="text: stockLabel">{{ o_model.stock_status_name }}</label>
        </div>
        {{ ## The <div> element contains the product price and product details link.
              The CSS class "on-sale" is added on server side (if "o_model.is_on_sale" is true) or on client side after the data binding (if "promotion" has a truthy value). ## }}
        <div class="product-detail {{ if o_model.is_on_sale  }} on-sale {{ end }}"
            data-bind="css: { 'on-sale': promotion }">
            {{ # The product price text is rendered on server side and will be overwritten on the client side if data binding occurs }}
            <span data-bind="text: price" class="product-price">{{ o_model.adjusted_price_with_currency }}</span>
            <a class="product-link" title="{{ displayName }}" href="{{ i_item.url }}">
                {{ sc_translate 'DETAILS' }}
            </a>
        </div>
    </div>
</div>

Commerce 検索結果レンダリングは、Commerce に固有の SXA 検索結果レンダリングのクローンです。独自のデフォルトのレンダリング バリアント ルートとデフォルトのレンダリング バリアント (/sitecore/Content/&lt;tenant&gt;/&lt;site&gt;/Presentation/Rendering Variants/Commerce Search Results) があり、マークアップを生成するための Scriban テンプレート、在庫および価格情報を取得するための JavaScript (AJAX リクエストとして)、およびラベル翻訳用の SXA Dictionary を使用します。

注記

Commerce 検索結果のレンダリングで使用されるラベルを変更することができます。

検索結果が処理されると、価格と在庫情報が Commerce Engine から取得され、ProductSummaryViewModel モデルに変換されて、Scriban テンプレート (o_model 変数を通じてアクセスされる) 内でレンダリングされます。

商品概要ビュー モデルのクラス図