The embedded Commerce functions for Scriban templates

Abstract

Overview of Scriban functions that are specific to SXA Storefront.

You can use embedded functions and embedded objects and items to customize your SXA Storefront Scriban templates.

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

productImage

CatalogProductImage

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.

width

Int

Yes

700

Used to resize the image.

height

Int

Yes

700

Used to resize the image.

Note

When images are retrieved from the Sitecore DAM, the width and height values are not used but are reserved for future use.

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.

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

key

string

No

Scriban Title

Used to retrieve the translation from the Commerce Terms for the storefronts based on the current language.

folder

string

Yes

Storefront Dictionary Terms

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.

Example of a Scriban title.

On the live storefront, the value of the Scriban Title is display like this:

Example on the live storefront of the Scriban Title.

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>