Category: Sitecore

Often you see examples for creating a new Sitecore SXA component is suggested to be cloned from the Promo component which helps developers to quick start the development.

But its always good to know the process and supporting items that are created to support he component.

In this blog post I will walk through the steps required to create a SXA component using Scriban from scratch. This post is not about how to use Scriban, will cover that in another post.

This post assumes the SXA Site is configured with the custom theme. See links to create Tenants/Sites/Themes –

1. Create Tenant and SXA Site
2. Configure Theme to the SXA Site
3. Assign Theme to the SXA Site

The component contains images and text and should look like this-

Step 1 – Create Templates –

Lets start creating a template first. Lets give it a name ImageBlock

Template Name – Image Block

Template Name – Image Block Folder

Set the Image Block as Insert Options so Image Blocks can be created under Image Block Folder

Template Name- Image Block (Rendering Parameter)

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

This template should inherit following-

Inherited template paths-

Template structure for Image Block component looks like this-

Step 2 – Create Rendering for Image Block component

Before you could start creating rendering, its good to have content as the rendering will require the Datasource location and the view.

Content–

IMPORTANT– Data folders for component can be configured using modules. For this post will create it manually.

Navigate to the Site -Data folder and create a Image Block Folder

Example at this location-

/sitecore/content/Wits Recruitment/Wits/Site Regions/Wits UK Recruitment/Data

I have named it Image Blocks and enter content for the template-

View–

Create a view. Place following markup in cshtml. Place this in your custom folder in Sitecore instance view folder

@using Sitecore.XA.Foundation.RenderingVariants.Extensions
@using Sitecore.XA.Foundation.SitecoreExtensions.Extensions
@using Sitecore.XA.Foundation.Variants.Abstractions.Fields
@model Sitecore.XA.Foundation.Variants.Abstractions.Models.VariantsRenderingModel

@if (Model.DataSourceItem != null || Html.Sxa().IsEdit)
{
    if (Model.DataSourceItem == null)
    {
        @Model.MessageIsEmpty
    }
    else
    {
        foreach (BaseVariantField variantField in Model.VariantFields)
        {
            @Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.RenderingWebEditingParams, Model)
        }
    }
}

Rendering–

Create controller rendering for Image Block Controller

Controller– Sitecore.XA.Foundation.RenderingVariants.Controllers.VariantsController, Sitecore.XA.Foundation.RenderingVariants

Controller Action- Index

Parameter Templates – Select the Rendering Parameter template created in previous step.

Example – /sitecore/templates/Feature/Wits/PageContent/Rendering Parameters/Image Block

Datasource Location – Query to the Site data location. You may also have to consider same for shared sites

Sample- query:$site/[@@name=’Data’]/[@@templatename=’Image Block Folder’] | query:$sharedSites/[@@name=’Data’]/ [@@templatename=’Image Block Folder’]

Datasource Template– Location of the template (Image Block)

Example- /sitecore/templates/Feature/Wits/PageContent/Image Block

Rendering view path– provide the path of your custom view

Example- ~/Views/Wits/ImageBlock.cshtml

Step 3 – Create Rendering Variant

Create a rendering variant i.e. items from templates-

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/Variants

/sitecore/templates/Foundation/Experience Accelerator/Rendering Variants/Variant Definition

/sitecore/templates/Foundation/Experience Accelerator/Scriban/Scriban

Paste the markup to render

Step 4 – Add rendering to Page

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 “Image Block” in the placeholder “main”

Edit the control and select the Variant “Default” in Styling section.

Remember we created a Rendering Variant “Image Block” in step Step 3 and the name of the variant was “Default”. This variant is listed in dropdown for selection. Also select the datasource

Select rendering variant-

Select the datasource-

Save and Publish and should be able to see the newly created component in Home page

Step 5- Update rendering variant to display content from Image Block item

In step-3 we added a static markup in rendering variant.

Use the following scriban changes to get the content from selected datasource. See BlockTitle, Heading and Description1 and Description2 to pull the content from item-

Example- {{sc_raw i_datasource ‘Description2’ }}

<div class="support-company-area support-padding fix">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-6 col-lg-6">
                        <div class="right-caption">
                            <!-- Section Tittle -->
                            <div class="section-tittle section-tittle2">
                                <span>{{sc_raw i_datasource 'BlockTitle' }} </span>
                                <h2>{{sc_raw i_datasource 'Heading' }}</h2>
                            </div>
                            <div class="support-caption">
                                <p class="pera-top">{{sc_raw i_datasource 'Description1' }}</p>
                                <p>{{sc_raw i_datasource 'Description2' }}</p>
                                <a href="about.html" class="btn post-btn">Post a job</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="support-location-img">
                            <img src="assets/img/service/support-img.jpg" alt="">
                            <div class="support-img-cap text-center">
                                <p>Since</p>
                                <span>1994</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Finally we have component been rendered and content pulled from item-

Hope this helps.