Skip to main content

Adding Custom Classes in body tag of page in Sitecore SXA

Hello learners, Welcome to Learn Sitecore.

In this blog we will see how to add custom classes in the body tag of page in Sitecore SXA. This is useful when we need to add classes in the body tag based of the evaluation of some conditions. 

For example let's consider a scenario where the requirement is to add a class or classes to the body tag of the page when the user is logged into the website. In this scenario, we can not use the Sitecore OOTB body class field which is present on the page because it will add class to the body tag irrespective of user logged in or not. 

So to achieve this requirement, we have two ways. They are 

1. Override the Sitecore OOTB pipeline processor available in Sitecore SXA as shown 

Decorate Page Pipeline

2. Add a new processor to the Decorate page pipeline without disturbing the existing processors. 
We will see how to add a new processor into the decorate page pipeline in this post. As we can not re-use the body class field in the page, insert one more field into the page template to add custom classes for the logged in user. For example, 
Custom class into the page

Now, in the solution create a class file that inherits PageDecorator class  from Sitecore.XA.Foundation.MarkupDecorator.Pipelines.DecoratePage. Here based on the user login check add the class into Page decorator args as shown. Here read the actual classes 

Processor
After this we need to apply a configuration patch file to include this processor into the decorate page pipeline. Add the configuration patch file as shown below.
Configuration patch file
As a result, in the page body tag the above added classes will be shown as below.
Class in page
This is it learner for this blog. 
Happy learning! Thanks for visiting Lean Sitecore!!

Comments

Post a Comment

Popular posts from this blog

Remove bucket folders from page URL

 Hey blog viewers, Welcome to Learn Sitecore.  In this blog we will see how to remove bucket folders from page URL. It is the best practice for the Sitecore application to have a clean URL to meet it's SEO purposes. So let's go through how we can achieve this.  First, in order to remove the bucket folders from the URL we have to decide the URL structure we need to keep and follow for the pages stored under bucket folder. For the instance I am taking the following URL https://developersite.com/news/2022/06/17/news-1. In this URL 2022/06/17 represents the bucket folders. This structure of bucket folders can be different based on the structure that one will follow up on the requirement. After removing the bucket folders from URL, it will be https://developersite.com/news/news-1 . In order to do this we first need to build this customized URL. For that we would need to create a new link provider which overrides the GetItemUrl method present in the link providers pro...
Post a Comment
Read more

Custom field validation rule for date range in Sitecore

 Hello learners, Welcome to Learn Sitecore. In this blog we will see how to create custom field validation rule for a field of an item. Providing a field validation rule to a field provides a great flexibility to the developers as well as good experience for content authors. By adding it choosing an invalid date by content author and showing it in the website can be eliminated at the first step itself. It is recommended to use field validations for different fields based on the business requirements. To implement a custom field rule validation, navigate to  /sitecore/system/Settings/Validation Rules/Field Rules and insert a validation rule. After that fill the data into Text and Data sections as follows. Text Section Data Section In the Type field add the data as class reference name, assembly name. Now create a class file that extends the standard validator class. Write the logic as per your requirement in the Evaluate function. For the instance I have added a sample code wh...
Post a Comment
Read more