Scriban templates

Scriban templates are stored in your SXA rendering variants and are available as additional renderers. For example, as field renderers, sections, or tags. Scriban templates can coexist with the other renderers but you can also use them to replace the existing rendering variants.

SXA-Scriban.png

You can export and import Scriban templates using Creative Exchange. This gives front-end developers much more flexibility over the component markup and functionality. Scriban templates can vary from rendering simple tokens to offering full replacement for components. For example, the following rendering variant renders the content of the Gallery component:

{{-
  if i_item.template_name == "Gallery Image"
    sc_editframe i_item 'Gallery Image' -}}
    <a class="field-image">
      <a title="{{ i_item.ImageTitle.raw }}" href="{{ i_item.Image.media_url }}">
      {{ i_item.Image }}
      </a>
    </a>{{
    sc_endeditframe
  end -}}

{{-
  if i_item.template_name == "Gallery Video"
    sc_editframe i_item 'Gallery Video'
    if (i_item.VideoID.raw ) == "" &&(i_item.VideoThumbnail.raw) == "" -}}
      <span>[Edit Gallery Video here]</span>{{
    else -}}
      <a title="{{i_item.VideoTitle.raw }}" href="http://www.youtube.com/watch?v={{ i_item.VideoID.raw }}">
      <img src="{{ o_model.thumbnail_url }}" alt="{{ i_item.VideoDescription.raw }}"
             data-title="{{ i_item.VideoTitle.raw }}" data-description="{{ i_item.VideoDescription.raw }}" ></img>
      </a>{{
    end
    sc_endeditframe
  end }}

This example shows how you can conditionally render parts of the HTML code based on the item template, how to access your rendering C# model, and how to call its properties as well as its item properties. It also wraps areas of the component with Edit frames to improve the editing experience.

The topics in this section describe the Sitecore extensions for the Scriban templates:

Note

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

You can watch this video from the Master Sitecore video series for a demonstration of how you can use Scriban.