Sitecore Experience Accelerator (SXA) - The Go-To Tool For Marketers

Sitecore Experience Accelerator is a drag-and-drop componentry, extended to meet business needs or designs for accelerated builds.

SXA enables marketing departments to create websites, without the involvement of development and IT. This decreases the time-to-market by using default and custom-build SXA components. Web development teams use Sitecore Experience Accelerator (SXA) to speed up the production of websites and to reuse components, layouts, and templates across a variety of sites.

SXA separates structure from design, so front-end designers, creative designers, content authors, and developers can work in parallel, while you deploy and maintain multiple sites quickly and cost-effectively. Once a basic user experience plan is in place, everyone can get started on the platform. For example: the content author can start entering the content in the wireframe environment, while the front-end developer works on the theme, and the developer sets up the data templates.

Concepts Used by Sitecore SXA

For starters, Sitecore SXA supports multitenancy. It provides a folder structure that enables marketers to create and assign security roles to isolate content. Besides, it also helps you create and assign security roles at the tenant level. You can also enable or disable features for each tenant, or create page templates at the tenant level.

You can easily construct your page with a toolbox with reusable renderings. The renderings range from simple text and images, videos to social media plugins.

That’s not all - SXA pages come with a responsive grid layout. The grid divides pages into equal columns. By using row and column splitters, or by changing the grid settings of the renderings on the page, you can decide how to divide the available columns on the page.

Lastly, SXA separates structure from design that simplifies the process of changing the design of websites. To enable easy customization, SXA uses themes. A theme primarily consists of style sheets, script and images. You can also add pluggable themes to SXA, to enable changing the styling quickly.

 

Features included in Sitecore SXA 9.3

Sitecore SXA 9.3 introduces us to two new search features: Aggregated facet filter and Facet summary. The Aggregated facet filter allows you to create dynamic filters sets, which will automatically adapt to the content available in the search results.

Then we have the facet summary, which shows the facets applied and allows you to remove them individually or all at once. Facet summary allows you to manipulate the active filters on the page and also allows the visitors to remove them one by one, or all together. For example, if your page contains filters on the size, taste, and color of fruit, and you add the Facet Summary component, visitors can remove filters separately by clicking the relevant x, or remove all filters by clicking ’Clear all facets’.

There’s also Scribans a fast, powerful, safe and lightweight template language that is introduced in the rendering variants section of the new Sitecore SXA 9.3. Using Creative Exchange we can easily import/export the scriban templates - it is also very flexible for the front-end developers to work on.

The last major update to SXA in 9.3 is the complete revamp on how front-end development is done with SXA. Creative Exchange Live Theming is now fully externalized, it’s available as NPM packages, freeing up Media Library. This also provides you with a ‘JSS Style’ theme creation using command line interface. Now you can create SXA themes without logging in or using the Sitecore UI.

But the most exciting feature of SXA 9.3 is undoubtedly the introduction of Scribans. This new templating language was introduced in SXA 9.3 just to remove the previous NVelocity template. Using the scribans templating language, we can also add loops and other conditional statements in our rendering variants, which was not possible with the default rendering variants.

Apart from the standard scriban templating structure, we can also extend it and create a custom scriban extension. The beauty of scriban is we can easily achieve the design as per the HTML and including the fields to render.

 

How to use

This example shows you how to render the fields using the new Scriban template for the custom event listing component:

Sample item, object and fields using scriban template

<div data-row="{"rid:1,"Date":"{{i_item.CustomEventStart}}","Date Stamp":{{i_item.CustomEventStart.raw}},"Event Name":"{{i_item.CustomEventName}}","Description":"{{i_item.EventDescription}}","Organizers":"{{i_item.PresentedBy}}","City":"{{i_item.City}}","Event type":"{{i_item.CustomEventTypes.target.EventTypeText}}","Register Link":""}">
<div class="first-table-cell pad col-0">
<input id="1" type="checkbox" class="rid-select" value="1">
</div>
<div class="pad col-0 sp-rid">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">rid</div>
1</div>
<div class="pad col-0 sp-date">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
{{i_item.CustomEventStart}}</div>
<div class="pad col-45 sp-event-name">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event Detail</div>
<button class="medium x-bold event-info block ellipsis no-border no-background push-left">{{i_item.CustomEventName}}</button>
<strong class="x-small color-label-gray field-label">Presented by: </strong><strong class="x-small">{{i_item.PresentedBy}}</strong>
<div data-hs-match="Class === Class">
<div class="hs-pill bg-color-highlighted-green margin-top">{{i_item.CustomEventTypes.target.EventTypeText}}</div>
</div>
<div data-hs-match="Class === Webinar" class="hidden">
<div class="hs-pill bg-color-highlighted-blue margin-top">{{i_item.CustomEventTypes.target.EventTypeText}}</div>
</div>
</div>
<div class="pad col-20 sp-date-stamp">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Date</div>
<span class="color-lite-gray small">{{i_item.CustomEventStart}}</span> </div>
<div class="pad col-0 sp-description">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Description</div>
{{i_item.EventDescription}}</div>
<div class="pad col-0 sp-organizers">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Organizers</div>
{{i_item.PresentedBy}}</div>
<div class="pad col-20 sp-city">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">City</div>
<div data-hs-match="Class === Webinar" class="hidden"> <span class="color-lite-gray small">Online</span> </div>
<div data-hs-match="Class === Class"> Portland, OR </div>
</div>
<div class="pad col-0 sp-event-type">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Event type</div>
{{i_item.CustomEventTypes.target.EventTypeText}}</div>
<div class="pad col-15 sp-register-link">
<div class="mobile-header medium-below xx-small uppercase color-lite-gray">Register</div>
<strong class="x-small">{{i_item.LearnMoreLink}}</strong> </div>
</div>

Using this Scriban template variant in the custom rendering we can achieve this:

Some Other Useful Commands

<h2> This is <b>i_item.name</b> {{i_item.name}}</h2>

<p><b>i_home</b> {{i_home}}</p>

<p><b>i_datasource</b> {{i_datasource}}</p>

<p><b>i_datasource.name</b> {{i_datasource.name}}</p>

<p><b>i_site.name</b> {{i_site.name}}</p>

<p><b>i_page.name</b> {{i_page.name}}</p>

<p><b>i_site</b> {{i_site}}</p>

<p><b>i_item.title</b> {{i_item.title}}</p>

<p><b>i_item.content</b> {{i_item.content}}</p>

<p><b>i_item.parent</b> {{i_item.parent}}</p>

<p><b>i_item.template_id</b> "{{i_item.template_id}}"</p>

<p><b>i_item.has_children</b> {{i_item.has_children}}</p>

<p><b>i_item.path</b> {{i_item.path}}</p>

<p><b>i_item.url</b> {{i_item.url}}</p>

<br><br>

 

How to create a custom Scriban member

Sitecore 9.3 provides marketers with various new features. Today we are going to extend Scribans’ functionality by adding our custom Scriban, and we will add a new Member for the Scriban.

CODE

public class GetLinkUrl : GetScribanItemMember
{
private readonly IContext context;
protected override string MemberName => "linkurl";
public GetLinkUrl(IContext context)
{
this.context = context;
}

protected override void Resolve(GetScribanItemMembersPipelineArgs args)
{
if(args.Mode == MemberMode.Name)
{
args.Members.Add(MemberName);
}
else
{
var field = args.Item.Fields["{EE230482-43D4-4144-9EA4-CD33494AC364}"];
var fieldType = FieldTypeManager.GetField(field);
var linkfieldUrl = "";
if(fieldType is LinkField)
{
linkfieldUrl = LinkUrl(field);
}
args.MemberValue = (object)linkfieldUrl;
}
}

public static string LinkUrl(LinkField linkField)
{
if (linkField != null)
{
switch (linkField.LinkType.ToLower())
{
case "internal":
// Use LinkMananger for internal links, if link is not empty
return linkField.TargetItem != null ? Sitecore.Links.LinkManager.GetItemUrl(linkField.TargetItem) : string.Empty;
case "media":
// Use MediaManager for media links, if link is not empty
return linkField.TargetItem != null ? Sitecore.Resources.Media.MediaManager.GetMediaUrl(linkField.TargetItem) : string.Empty;
case "external":
// Just return external links
return linkField.Url;
case "anchor":
// Prefix anchor link with # if link if not empty
return !string.IsNullOrEmpty(linkField.Anchor) ? "#" + linkField.Anchor : string.Empty;
case "mailto":
// Just return mailto link
return linkField.Url;
case "javascript":
// Just return javascript
return linkField.Url;
default:
// Just please the compiler, this
// condition will never be met
return linkField.Url;
}
}
return "";
}

}

The GetLinkUrl class inherits from the GetScribanItemMember class, and then we add a new Member in Scriban using the MemberName property. Next, we check if the field type is a link field; then get the URL from the LinkUrl method and set the MemberValue to the string returned from the function ( URL) by overriding the Resolve method.

CONFIG

<sitecore>
<pipelines>
<getScribanItemMembers>
<processor type="Foundation.Extension.Pipelines.GetLinkUrl,Foundation.Extension" resolve="true" />
</getScribanItemMembers>
</pipelines>
</sitecore>

We place our class in the getScribanItemMembers pipeline - don't forget to add the resolve element if you want the context to get resolved in your constructor.

All other existing pipelines related to Scribans are stored in the Sitecore.XA.Foundation.Scriban.config file, and to write your custom code you need to add Sitecore.XA.Foundation.Scriban.dll also .

The right Implementation

Once you are done with the code, deploy the necessary items to the webroot. In the rendering variants, you can use your custom Item Member by using this syntax {{i_item.linkurl}}.

 

And the URL will be seen below.