Improving a Component in Sitecore with SXA

Posted by Roberto De Almeida

improving a component in Sitecore with SXA

At some point in the past, us Sitecore developers have had to think about custom components in SXA. Here is the real question, have you ever verified how some components are structured in SXA before implementing a new one?

Let’s say your client is asking for an image gallery with a list of thumbnails at the bottom of it. Can we do this improvement in a custom SXA component? The answer is: of course, we can!

But what about updating the existing SXA image gallery, and adding the new requirements requested by your client, without losing any configuration of the current component? Here is a new answer: SXA rendering variants.

Rendering variants introduced the possibility to have many ways to render your component, using the same view file (cshtml). In that way, we can build a title using the HTML H1 and the same title using the HTML SPAN. All this without touching any code. Let’s see how to achieve this.

Rendering Variants

“SXA comes with a set of default renderings and rendering variants. Rendering variants are configurable adaptations of the default renderings. To encourage reusability, designers and front-end developers can also create new rendering variants. This gives authors more options in the way they present their content.” – extracted from Sitecore documentation.

If you have no experience with SXA, before continuing this article, I suggest to you read the official Sitecore SXA documentation.

Rendering Variants is a feature that belongs to each Sitecore website, you can find the existing ones in the following path: /sitecore/content/[tenant folder]/[website]/Presentation/Rendering Variants

Path: /sitecore/content/[tenant folder]/[website]/Presentation/Rendering Variants

To make this article easier to understand, let’s use the Title component as our main example. This component renders the Page Title, just this. We are going to add more flexibility in the way this data is rendered by the Title component.

Find the Title rendering in the Renderings Variants folder.

Renderings Variants folder path

Expanding that node will display the default rendering variant to that component. Inside the default, you will notice only the rendering field, which takes the Sitecore page name and render it on the page.

Rendering field, which takes the Sitecore page name and render it on the page.

Using this component, here is how it renders on the page.

page rendering code

Looking at the CSHTML file of this view, you will notice only a loop inside the variant fields.

View of the CSHTML file loop inside the variant fields

Defining New Rendering Variants

Well, your client is requesting to change this component. Instead of using an anchor, they want a SPAN. Let’s see how we can achieve this requirement. Go back to the default variant definition, and using the Sitecore menu, duplicate it, and give it a new name.

Title Span view

Now, open the Title item, in the tree, and find the field “Tag”. You will see that it’s empty. Click on that drop-down list and select the tag “SPAN”. This will tell Sitecore that it needs to render that field around a SPAN tag. Save your changes and publish all the new items you have created.

NOTE: Rendering Variants belong to the website presentation, you must publish your changes every time you want to see it live.

Let’s see how to switch between rendering variants. You can do the same change by Content Editor / Presentation / Details.

Open the page in the Experience Editor. Click on the title component, then click on the Styles button.

Experience Editor view of title component

Scroll down until you see the Variant dropdown field. Select the new Variant you have created. Close this window and save the changes. The Experience Editor will refresh the page with the new changes. Save and publish the page.

Variant dropdown field view in the Experience Editor

Inspect the published page in the dev-tools and you will notice the anchor was replaced by the SPAN.

Anchor coding

In this way, we were able to change how the component is rendered without touching its code.

Defining New Rendering Variants – Example 2

Let’s take another example of how to change the component structure. Your client now is asking to build a component where they can have an image on the left and the image caption on the right. In HTML/CSS this is quite simple, right? Let’s see how to achieve this through the SXA.

SXA uses bootstrap to define the component styles. This requirement will use some bootstrap classes and a view change, to achieve the main requirement (image on the left and caption on the right).

We are going to reuse the Image component, let’s duplicate its variant in the Content Editor.

View of the image component duplicating the variant in the Content Editor

We must have the following structure to achieve the main goal of this change:

container -> row -> col image | col caption

After the rendering variant duplication, scroll to the CSS class field and add the following classes:

d-flex align-items-center

Add CSS classes to variants

Now we need to add the two columns that will render the component content, we can use the Variant Section item here. Add 2 variant sections. To the left column, you can use the following classes: col-6 text-center. To the right column, you can use these: col-6 text-left.

Variant section CSS with centered text

Variant section CSS with left-aligned text

The default variant comes with Image and Image Caption definitions already. Drag the Image inside the left section, then drag the Image Caption inside the right section. You should end up like the image below.

Add captions to sections

To the Image Caption item set the Tag field as SPAN and add the CSS Class “display-6”.

Add CSS to captions

Publish all of these changes and check out how it’ll look on the page.

Published view of new variant

It still not showing the content side-by-side. Looking deeper, there is hard-coded DIV around the fields with the class “component-content”. Most of the SXA components will come with this code. If you open the Image.cshtml file, you will notice that div.

SXA hard-coded div

In this specific case, we need to update that view. Here you have 2 choices. You can create a new component “Custom Image” for example, or you can update the current one. I’ll let you decide which option you will follow. In both cases, remove that DIV with the class “component-content”, then refresh your page.

Published variant with hard-coded div removed

As you can see, with minimal effort you were able to build a new Rendering Variant for an existing SXA component. In my case, I removed that DIV. If I need it back in the feature, I can use the Variant Section to build it again.

Roberto De Almeida

Roberto De Almeida - Senior Software Engineer

Roberto De Almeida is a Senior Software Engineer at Nishtech who started down the path of software development at the age of 12. Roberto is a leader within the Nishtech Sitecore practice and has extensive experience in the Sitecore platform. When not sitting behind a keyboard you will probably find Roberto sitting behind a set of drums playing in his band.

Cookies help us improve your website experience.
By using our website, you agree to our use of cookies.