The embedded functions for the Scriban template

The following example shows the Scriban template you could use for the Promo component, if you modified the Razor view to not provide any markup but fully delegate the rendering process to your variant instead. The template output with this markup is identical to the Default Promo variant. In the first line of the example, you can see how to use the sc_decorate function. You can add other attributes to the tag in the template directly.

<div {{ sc_decorate "promo" }} role="banner">
    <div class="component-content">
        <div class="field-promoicon">
            {{ i_item.PromoIcon }}
        </div>
        <div class="promo-text">
            <div>
                <div class="field-promotext">
                    {{ i_item.PromoText }}
                </div>
            </div>
            <div class="field-promolink">
                {{ i_item.PromoLink }}
            </div>
        </div>
    </div>
</div>

The first line will render in the following way for visitors:

<div class="component promo col-12" role="banner">

To enable class editing and importing styles for Creative Exchange:

<div class="component promo col-12 add-your-css-classes-here"
  data-pageid="{A25A4448-3319-4A52-93DE-B10A7A158DFD}"
  data-renderingid="{51C13F03-8364-4F61-B860-2EC6CA7439B3}"
  data-uniqueid="{8DED9C5D-5D8D-4C16-93A0-A78928B17656}"
  data-variantid="{D51080C1-C9A8-457A-88B1-EF3CF21DD6FF}"
  data-stylesfield="Styles"
  data-gridfield="GridParameters"
  data-renderingclass="promo"
  role="banner">

sc_endeditframe contains no parameters and is used to close the area around the wrapped edit frame.

The following example replicates the Default Gallery component rendering variant, including edit frames. For the default setting go to: /sitecore/system/Settings/Foundation/Experience Accelerator/Rendering Variants/Rendering Variants/Gallery/Default

{{-
  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 ) == "" &amp;&amp; (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 }}

You can render a personalization rule in your Scriban template by adding a rendering variant field of type Scriban to a rendering variant. For example, create a variant for your Promo component and name it Personalized Promo. Add a rendering variant field of type Scriban and name it Template. If you then add a rendering variant field of type Rule, pasting the following code in the Template rendering variant field will render a personalization rule.

<div class="promo-text">{{
  if sc_evaluate i_datasource "Personalization" -}}
    <div>
      This will be shown when the personalization rule will evaluate to TRUE
    </div>{{
  else -}}
    <div>
      This will be shown when the personalization rule will evaluate to FALSE
    </div>{{
  end -}}
</div>

You can render a responsive image renderer in your Scriban template by adding a rendering variant field of type Scriban to a rendering variant. For example, create a variant for your Promo component and name it Responsive Promo. Add a rendering variant field of type Scriban and name it Template. If you then add a rendering variant field of type Responsive image, pasting the following code in the Template rendering variant field will render a responsive image renderer:

<div class="field-promoicon">
    {{ sc_execute i_item.PromoIcon.target "Responsive Icon" }}
</div>
<div class="promo-text">
    <div>
        <div class="field-promotext">
            {{ i_item.PromoText }}
        </div>
    </div>
    <div class="field-promolink">
        {{ i_item.PromoLink }}
    </div>
</div>

For example, use the following sample code to render a field on an item by calling the sc_field function:

{{ sc_field i_page 'Title' }}

If you want to provide a field for authors to enter a value for, and make sure that field is not empty even if the author did not enter a value, you can use the field fallback functionality provided in the sc_field function:

{{ sc_field i_page ['NavigationTitle', 'Title', '__Display Name'] }}

The templating engine attempts to render 'NavigationTitle' , and if it does not find a value within it, it moves on to the 'Title' field to return the attempt and finally falls back to '__Display Name' if that fails as well.

When you want to augment the default rendering behavior of the link or image rendering fields, you can provide an additional name/value collection that will be passed to the Sitecore field renderer as the third parameter, as illustrated in the following examples.

The following example renders an image with height and width set to 50 and an additional data attribute data-purpose:

{{ sc_field i_item 'PromoIcon' [['h', '50'], ['w', '50'], ['data-purpose', 'Promo Icon']] }}

The code above results in the following HTML rendered on your page:

<img src="/-/media/MyImage.jpg?h=50&amp;amp;iar=0&amp;amp;w=50" alt="" width="50" height="50" data-purpose="Promo Icon">

The following parameters will be used by the field rendered. Any additional parameters will be used as data attributes:

Similar to the link field renderer, with the link renderer you can add attributes depending on your needs. The following example uses the PromoLink target item’s title to add an ARIA accessibility label to your links:

{{ sc_field i_item 'PromoLink' [['aria-label', (i_item.PromoLink.Title.raw)]] }}

The above example can generate the following HTML:

<a href="/Page" aria-label="Page Title">Page</a>

To render more information about a product linked from a Promo component:

<h2>{{ sc_follow i_item "Promo Link" | sc_field "Title" }}</h2>

To render products related to the current product:

{{ for i_product in (sc_followmany i_page "Related Products") }}
  <h2>{{ sc_field i_product "Title" }}</h2>
  <b>Content</b>:{{ sc_field i_product "Content" }}
{{ end }}

Render a link to the component Data Source using the Display name of the data source item as the text of the link:

<a href="{{ sc_link i_datasource }}">{{ i_datasource.display_name }}</a>

The following example shows you how to render a dynamic SXA placeholder:

{{ sc_placeholder "mydynamic*"  }}

The following example shows you how to render a dynamic SXA placeholder and switch its context to a related i_product item. The components in that placeholder behave as if the page on which they were rendered was i_product.

{{
  i_product = i_page.RelatedProducts.target
  sc_placeholder "relatedproducts*" i_product
}}