Scriban テンプレートの埋め込み Commerce 関数

実際の画像の参照を含んでいるパラメーターとして渡された CatalogProductImage オブジェクトから画像 URL を取得します。画像自体は、メディア ライブラリまたは Digital Asset Management システムに保存されます。sc_imagelink 関数は、Commerce 検索結果レンダリング用の Scriban テンプレートと、次のような Scriban コードに示されている注文品目用 Scriban テンプレートで使用されます。次のコードでは、MVC モデルが CatalogProductImage オブジェクトを返すプロパティを公開しています。

<img src="{{ o_model.master_product_image | sc_imagelink 220 220 }}/>

フロントエンド JavaScript コンポーネントがデータを簡単に消費できるように、バックエンド データ オブジェクトを JSON にシリアル化します。sc_xc_serialize 関数は、次のコードに示すように、無料ギフト セレクション レンダリング用の Scriban テンプレートで使用されます。

{{ # The hidden <div> element contains serialized data in JSON format. }}
<div class="freegiftselection-data" style="display: none;">
    {{ sc_xc_serialize o_model.free_gift_selections | html.escape }}
</div>

無料ギフト オプションに関するデータは、最初のサーバー側レンダリングの一部として、HTML マークアップにシリアル化されます。これは、レンダリングに付属するフロントエンド JavaScript で使用できるようにするためであり、これにより、データを取得するためにバックエンドを呼び出す必要がなくなり、パフォーマンスが向上します。

キー パラメーターで指定された入力文字列に従って、コンテンツ アイテムの [値] フィールドに格納されているテキストを、ページがレンダリングされている現在の言語で返します。各キーの翻訳は、/sitecore/Commerce/Commerce Control Panel/Storefront Settings/Commerce Terms にあるルックアップ テーブルに格納されます。

sc_xc_translate 関数に必要な形式は次のとおりです。

sc_xc_translate ‘key’ ‘folder’

例

次の例では、この関数は Storefront Dictionary Terms という名前のフォルダーで Commerce Terms を検索して、Scriban Title の値を抽出します。

RequestResponse

Copy

<div class="product-detail" data-bind="css:{'on-sale':promotion}">
   <span data-bind="text: price" class="product-price"></span>
    <a class="product-link" title="{{displayName}}"href="{{i_term.url}}">
    {{sc_xc_translate 'Scriban Title''Storefront Dictionary Terms'}}
    </a>
</div>

この例では、Scriban Title は EN Title です。

ライブ ストアフロントでは、Scriban Title の値は次のように表示されます。

次の例では、この関数は Commerce Terms から Scriban Title を検索します。

RequestResponse

Copy

<span data-bind="text: price" class="product-price"></span>
    <a class="product-link" title="{{displayName}}"href="{{i_term.url}}">
    {{sc_xc_translate 'Scriban Title'}}
    </a>
</div>