Sitecore Personalization with Impiger: Steps to Create a Custom Conditional Rendering Rule

Sitecore is an amazing platform offering plethora of benefits to businesses, vendors, end users. The robust platform provides enterprises with some amazing options that no other platforms offer. Customization and personalization are two distinct advantages that isolate Sitecore from other content management systems.

Here in this post we will explain how we created a custom conditional rendering rule for a renowned American restaurant chain.

Our client has hundreds of Franchisee restaurants from where the users could order from. For every three months, a new campaign with a special menu would be set up by the marketing team. And, restaurants may or mayn’t be part of the campaign. While some restaurants were part of campaign, few opted out of some of the campaigns.

The challenge:

A campaign page was created in Sitecore with the menu listed in it. Whenever a user visits this page of a restaurant that is not part of the campaign, we were asked to show a message like:

“Sorry, this menu is not available at this restaurant.”

As there were multiple renderings added to the campaign pages, the real challenge was ensuring whether the restaurant was part of the campaign in each rendering or not!

The solution:

We had to do conditional rendering to switch between the “menu view” and “no menu” message view. The restaurant chosen by user would be available in a context object and wouldn’t be passed into the rendering displaying the menu details. We created a custom condition which allowed us to show/hide a rendering based on campaigns the current restaurant was part of.

Impiger’s approach to Sitecore web personalization:

After carefully analyzing the requirements and challenge faced by our client, our certified Sitecore developers incorporated the following changes in Master Database. The steps will help readers understand how our experts customized the conditional rendering.

Step 1: Creating a rule tag.

The tag allows us to flag the rules that should be visible in various ruleset editors.

Step 1-Creating Rule Tag

Step 1 - Creating Rule Tag

Step 1 - Creating Rule Tag

Step 2: Creating new rule element in the ruleset editor of conditional rendering.

The rules displayed in the rendering condition are controlled through a rule set context folder named “Conditional Renderings” under /sitecore/system/Settings/Rules/. The tag definitions under tags folder of this item contains the tags that are part of the conditional rendering. A new tag definition will be added with the new tag.

Step 2 - Creating new rule element

 

Step 2 - Creating new rule element

Step 2 - Step 2 - Creating new rule element

Step 3: Creating an element folder.

A new elements folder named “ARC” will be created under “/sitecore/system/Settings/Rules/Definitions/Elements”. Added the new tag “ARC” created in Step 1 to the default tag definition under it.Step 3 - Creating an element folder

Step 3 - Step 3 - Creating an element folder

Step 3 - Step 3 - Step 3 - Creating an element folder

 

Step 4: Creating a new Condition under this element folder.

Step 4 - Creating new condition

Step 5: Setting up the text and type fields for the condition 

Step 5 - Setting up the text and type fields

Step 6: Setting up new condition as a rendering condition in Sitecore.

But, understanding the Type to be entered in the condition is critical.

Well, this is the class that does the actual comparison when the rule set is executed. The text within [] defines a placeholder for the value that should be passed to the property Campaign in the IsPartOfCampaignCondition class. When the ruleset is applied, the execute method of the condition executes to check the selected campaign is selected for the restaurant in context.


public class IsPartOfCampaignCondition<T>: WhenCondition<T>where T : RuleContext
{
///<summary>
/// Gets or sets the campaign.
///</summary>
///<value>The campaign.</value>
public string Campaign
{
get;
set;
}
///<summary>
/// Executes the specified rule context.
///</summary>
///<param name="ruleContext">The rule context.</param>
///<returns>
///    <c>True</c>, if the condition succeeds, otherwise <c>false</c>.
///</returns>
protected override bool Execute(T ruleContext)
{
Assert.ArgumentNotNull(ruleContext, "ruleContext");
if (Campaign == null)
{
return !RequestContext.Current.Restaurant.Campaigns.Any();
}
return RequestContext.Current.Restaurant.Campaigns.Any(Campaign);
}
}

Step 7: Now that there is a condition.

So, it is easy to personalize the items representing the campaign pages.

Step 8: Displaying multiple renderings when a campaign was available.

Open the Presentation Details and select the Controls Tab. Select the rendering you want to personalize and click on Personalize.

Step 8 -Displaying multiple renderings

 

Step 9: Add a new condition by clicking the New Condition button.

Step 9 - Add a new condition

Step 10: Click Edit to add the condition.

Step 10 - Adding the condition

 

Step 11: Click on the Campaign link and enter the name of the campaign in the pop up.

Step 11 - Enter the name of the campaign in the pop up

Step 11 - Step 11 - Enter the name of the campaign in the pop up

Step 12: Repeat Steps 8 to 11 for all the rendering that should be displayed for the campaign.

Step 13: For No Campaign rendering.

After repeating Steps 8 to 11, click on the where link to change the text to except where. This makes sure that this rendering is displayed only when the campaign is not selected for the restaurant.

 

Step 13 - No Campaign rendering

 

With the above steps, we were able to set up the conditional rendering on our client’s Sitecore website.

Get in touch

PETE