Working with Scriban templates

Abstract

High-level introduction to the Scriban templates provided with SXA Storefront.

SXA Storefront includes several renderings that use a Scriban template. Scriban templates can contain sophisticated logic that cannot be expressed using other SXA renderers and can replace numerous renderers with one template. This greatly reduces the complexity of rendering variants. Scriban templates are available as renderers similar to, for example, field renderers, sections, or tags and can coexist with other renderers. You can also use them to replace the existing rendering variants.

The advantage of Scriban templates is that they provide you with the ability to easily extend existing functionality using a fast lightweight scripting language. Instead of defining the HTML structure using Sitecore items as you normally do when using rendering variants, you can create the structure directly in the Scriban template. As shown in the following image, the structure of the Sitecore items in a traditional item tree rendering variant is mirrored in the Scriban template. The same HTML is being created but you have much more control over it and have access to programming language constructs as well as a range of functions, context items, and custom objects on which you access properties.

Note

General documentation about the underlying templating language and the built-in functions is available on the Scriban GitHub repository.

Diagram showing traditional rendering variant and Scriban template

Tip

You can expand the Template field by hovering over the bottom edge and dragging the border.

At a high level, the following image shows how data is processed when using a rendering variant with a Scriban template.

How data is process when using a Scriban template

The following SXA Storefront renderings are available as Scriban templates. Each of these renderings communicate through the CXAObservable.

Each of these renderings also has a deprecated version, which is only available for existing sites to provide backward compatibility and uses a standard Razor-based MVC view and code-behind instead of a Scriban template. You can add or remove these renderings from the Toolbox. To do so, go to /sitecore/Content/Sitecore/Storefront/Presentation/Available Renderings/Commerce and, on the Content tab in the Data section, click Edit.

Note

For a demo of how to modify a Scriban template, see the Sitecore Experience Commerce - SXA Storefront video on Master Sitecore. You access the Scriban code in the Template field on the Content tab in the VariantDetails section. You can expand the Template field by hovering over the bottom border and dragging the border edge.