Our examples for creating a new Sitecore SXA components is suggested to be cloned from the Promo/Carousel component which helps developers to quick start the development.

 

Scriban Templates

 

Scriban templates are stored in our 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

Kindly follow the steps and procedure to create tenants, sites and custom components

 

1.     Sitecore SXA Overview

2.     Create a Tenant and Site

3.     Create new Custom module

 

In previous blog get the knowledge about how to create a new custom module. Now we are going to customize the module using scriban.

 

Step 1: Create the template

 

After creating module and clone the existing rendering. We need to create or modify the existing template. Here I will modify the template

 


By default the carousel contain only three filed SlideImage, SlideText and SlideLink. Now I have added the Shortdescription, MobileImage and Tabblet Image field.

 

Templates Name – Custom Carousel Branch

 

Set the Custom Carousel as insert options so custom carousel can be created under Custom carousel Branch

 

 


Template Name – Custom Carousel (Rendering Parameter)

 

The below inheritance is required to style, cache and attach a rendering variant.

This template should inherit following 

 


Template structure for the Custom Carousel Component look like this.

 


Step 2: Rendering for Custom Carousel 

Here we have already clone the rendering from existing carousel component. So we don’t need to create the rendering for this component.

Check the custom rendering in /presentation/Available Renderings/Custom Carousel

 

Step 3: Create a rendering variant using scriban

 

Create variant definition and give the name. 

 

Create scriban base template and give the name 


The folder should be like

 

 

Step 3: HTML Markup

 

This examples show you how to render the fields using new scriban template for custom carousel component 

 


 <a href="{{i_item.SlideLink.url}}" data-variantitemid="{F3CEF580-F6AF-4003-B365-863279ED2E5E}" data-variantfieldname="SlideLink">

<img src="{{i_item.SlideImage.media_url}}" alt="" width="1920" height="500" class="d-none d-sm-none d-md-none d-lg-block" />

<img src="{{i_item.Tabletimage.media_url}}" alt="" width="1280" height="350" class="d-block d-sm-none d-md-block d-lg-none" />

<img src="{{i_item.MobileImage.media_url}}" alt="" width="250" height="450" class="d-none d-sm-block d-md-none" />

</a>

<h3 class="field-slidetext">{{i_item.SlideText.raw}}</h3>

<p class="field-shortdescription">{{i_item.ShortDescription.raw}}</p>

<div class="field-slidelink">

<a href="{{i_item.SlideLink.url}}" data-variantitemid="{F3CEF580-F6AF-4003-B365-863279ED2E5E}" data-variantfieldname="SlideLink">Read More</a>

</div>

 

Step 4: Create a partial Design 

Create a partial design in the name of “Custom Carousel” 

 


 

Step 4: Add rendering to partial design 

Add rendering to the page. Ideally this can be done by creating a branch and create a module which should allow to drag and drop the SXA component to the page using experience editor. 

Select Home page and select option Presentation details.

Add the rendering “Custom Carousel” in the placeholder “main”

 


Drop the Component in Experience Editor 

Go to Site node, open any page and select Custom Carousel component from it and drop it on our page. And create and select the desired data source.

 

 
                 

Step 6: Assign the partial design to the page 

Assign the partial design to the page like below.

 

 

Publish and run the respective page. The final output come like this