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

概要

SXA Storefront に固有の Scriban 関数の概要。

埋め込み関数埋め込みオブジェクトおよびアイテムを使用して、SXA Storefront Scriban テンプレートをカスタマイズできます。

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

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

パラメーター

パラメーター

オプション

目的

productImage

CatalogProductImage

いいえ

カタログ商品画像

実際の画像アイテムへの参照を含みます。これは、メディア ライブラリ内の画像か、または Digital Asset Management システムの画像です。

width

Int

はい

700

画像のサイズを変更するために使用されます。

height

Int

はい

700

画像のサイズを変更するために使用されます。

注記

画像が Sitecore DAMから取得される場合、幅と高さの値は使用されませんが、将来の使用のために予約されています。

フロントエンド 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’

パラメーター

パラメーター

オプション

目的

key

string

いいえ

Scriban Title

現在の言語に基づいて、ストアフロントの Commerce Terms から翻訳を取得するために使用されます。

folder

string

はい

Storefront Dictionary Terms

メンテナンスや検索を容易にするために、翻訳をサブフォルダーに分類するために使用されます。フォルダーが指定されていない場合、この関数は Storefront Dictionary Terms という名前のデフォルトのフォルダーを検索します (/sitecore/Commerce/Commerce Control Panel/Storefront Settings/Commerce Terms/Storefront Dictionary Terms)。

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

<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 タイトルの例。

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

ライブ ストアフロントでの Scriban Title の例。

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

<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>