The embedded Commerce functions for Scriban templates
You can use embedded functions and embedded objects and items to customize your SXA Storefront Scriban templates.
sc_imagelink
Retrieves the image URL from the CatalogProductImage object passed in as a parameter that contains the reference to the actual image. The image itself is stored in the Media Library or in the Digital Asset Management system. The sc_imagelink function is used in the Scriban template for the Commerce Search Results rendering as well as the Scriban template for Order Lines as shown in the following Scriban code where the MVC model is exposing a property that returns a CatalogProductImage object.
<img src="{{ o_model.master_product_image | sc_imagelink 220 220 }}/>Parameters
|
Parameter |
Type |
Optional |
Example |
Purpose |
|---|---|---|---|---|
|
|
|
No |
Catalog product image |
Contains the reference to the actual image item, which is an image in the Media Library or an image in the Digital Asset Management system. |
|
|
|
Yes |
700 |
Used to resize the image. |
|
|
|
Yes |
700 |
Used to resize the image. |
When images are retrieved from the Sitecore DAM, the width and height values are not used but are reserved for future use.
sc_xc_serialize
Serializes backend data objects into JSON so that the frontend JavaScript component can consume data easily. The sc_xc_serialize function is used in the Scriban template for the Free Gift Selection rendering as shown in the following code.
{{ # 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>
The data about free gift options is serialized into the HTML markup as part of the initial server-side rendering. This is so it can be consumed by the frontend JavaScript that comes with the rendering and this removes the need for a call to the backend to retrieve data and improves performance.
sc_xc_translate
Returns the text stored in the Value field of the content item according to the input string specified by the key parameter and in the current language the page is rendered in. The translation of each key is stored in lookup tables located at /sitecore/Commerce/Commerce Control Panel/Storefront Settings/Commerce Terms.
The required format of the sc_xc_translate function is:
sc_xc_translate ‘key’ ‘folder’Parameters
|
Parameter |
Type |
Optional |
Example |
Purpose |
|---|---|---|---|---|
|
|
|
No |
|
Used to retrieve the translation from the Commerce Terms for the storefronts based on the current language. |
|
|
|
Yes |
|
Used to categorize the translation into subfolders for easy maintenance or lookup. When no folder is specified, the function looks in the default folder called Storefront Dictionary Terms (/sitecore/Commerce/Commerce Control Panel/Storefront Settings/Commerce Terms/Storefront Dictionary Terms). |
Examples
In the following example, the function looks through the Commerce Terms for a folder called Storefront Dictionary Terms and extracts the value of the 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>In this example, the Scriban Title is EN Title.
On the live storefront, the value of the Scriban Title is display like this:
In the following example, the function looks through the Commerce Terms for the 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>