Changing the Visibility of Storefront Elements by Using Restrictions

Objective

After completing this lesson, you will be able to create and manage visual customizations using SmartEdit.

Types of Restrictions

Introduction to CMS Restrictions, Often Referred to as "Static Personalization" in SAP Commerce Cloud

In SAP Commerce Cloud, web content managers have various ways to personalize their Web site content for customers.

In this lesson, we focus on CMS restrictions. Think of them as specific rules applicable to components and pages. When applied after matching a predefined condition, they change the visual appearance of a page or a component. On the component level, a customer might see other components, and/or the original ones might be hidden. On the page level, a customer would simply see a different page, also known as a variation page, which contains different components.

A typical example is showing a "Christmas Sale" banner during Advent. A variation of a page for a dedicated user group is another. Letting a category page show different components than usual, but only for a specific category, is another possible scenario.

Because the conditions which trigger a restriction are predefined and not changed by user behavior on the storefront, we often refer to these restrictions as "Static Personalization".

Note

Other approaches to personalization, e. g. "Dynamic Personalization" will be covered in the following lessons. Personalization with custom code or with support of integrated tools like SAP Emarsys or intelligent selling services for SAP Commerce Cloud (ISS) will be touched in the last lesson of this unit.

Types of Restrictions

There are three out-of-the-box restriction types manageable within SmartEdit:

  1. Time Restrictions

    Time restrictions limit a component or a variation page to being visible only within a certain date and time range. Outside the defined range, the component or variation page is not displayed. In this case, the primary page is shown instead.

    But it can also be the other way around. The component or variation page will explicitly NOT be displayed during the specified time range.

    For example, Laura wants to display a Christmas-related image in December. She creates a corresponding banner component in Basic or Advanced Edit mode. In the Visibility tab, she sets ‘Display component’ to True and creates a Time Restriction, where she sets the date time to, for example:

    Dec 1, 00:00 am until Dec 25, 11:59 pm this year.

    After doing so, she can sync the page and test the results with the Preview Selector.

    Let’s see how this looks in SmartEdit:

    A screenshot on the left shows the process of creating a time restriction with a specific date. Another screenshot on the right shows a banner to which the restriction was applied, appearing during the set time and date range.

  2. Usergroup Restrictions

    Usergroup restrictions, as the name suggests, either allow or deny a component or a variation page to be visible to members of a specific user group. User groups comprise members who share some common characteristics like gender, address, and so on.

    Laura could, for example, show an additional product carousel on the home page, populated with the newest digital cameras for the user group "tech-lovers". At the same time, all users (including the tech-lovers) still see the original carousel with a mixture of trending and discounted products. Laura isn't responsible for assigning users to their groups: she assigns one or more existing user groups to a restriction.

    Let’s see in the following image how that example could be set up with just a few steps in SmartEdit. This image consists of three screenshots showing the process for creating a user groupgroup restriction. The first, on the top left, shows the visibility tab for a product carousel component in the Component Editor. A big screenshot on the right then shows the fields that need to be filled to create the restriction. The restriction type, User group Restriction, must be selected, a name entered and a user group chosen. On the bottom right, a screenshot shows the restriction in the Component Editor of the product carousel.

  3. Category Restrictions

    Category restrictions limit a component or page to only being visible when certain categories are being viewed.

    This restriction is less intuitive, so let’s use an example to illustrate:

    Category pages usually look the same, structure wise, but with different content/categories listed. If Laura wants to change this behavior for a specific category, she can add a category restriction. The restriction's effect is that any customer visiting this category sees a variation page. This page may show a dedicated banner or other UI component changes.

    Let’s observe this example executed by Laura in the next video:

    In essence, she creates a new category restriction for the Camera Accessories & Supplies category. On the variation page based on the same template, she creates a promotion banner–to make it look different from the original category page. The changed variation page is displayed when the customer is viewing the restricted category.

Step-by-Step Video Content: Apply a Category Restriction to a Variation Page

  1. Laura selects a CategoryPage called Product List.

  2. In Basic or Advanced Edit, she clones the actual page, making it a variation page that reuses existing components.

  3. Laura creates a Category Restriction, adds categories to it, including their sub-categories, and applies the restriction to the new variation page. As a result, the new variation category page is created. At first, it looks exactly the same as the original primary page. But because of the new restriction, it can only be displayed for its categories.

  4. Laura adds a banner to the variation page. If she uses a page slot location, it's a simple change in Basic Edit mode.

    Note

    If she uses a shared slot instead, she must replace it with an unshared slot. Otherwise, the change to the variation page would be visible on all pages derived from its template. This change would affect the primary page, but could also affect many other pages, too.

  5. After synchronization, the variation page becomes visible in the storefront for the categories defined in its restriction.

Now, let’s refer to the video that covers this topic:

Note

You probably noticed the number of restrictions in the restrictions wizard. There are far more than the three restriction types covered so far. Although they're listed there, they can’t be managed in SmartEdit and are out of scope for this e-learning.

Restriction Scopes

We can apply restrictions to either a page or an individual component. Let’s look at page restrictions first.

Applying Restrictions to a Page

Laura can apply restrictions to a page under the Pages tab either while creating a new page, or by editing or cloning an existing page:

  1. The "Create Page" button is found on the top-right side of the Pages Tab. When opening the Page Editor that way, it contains a Restriction tab allowing Laura to add restrictions.
  2. By selecting the three dots of any existing page, Laura can select "Edit" to open the Page Editor where she again finds the Restrictions Tab.

Let’s examine these two options in the next image:

mage shows the option to either bring the page editor by clicking the three dots or creating a page via the button.

Note

Don’t try to search for what isn’t there:

Primary pages don't support restrictions. If Laura opens the Page Editor for a primary page, she therefore won’t find a Restriction tab.

The following image shows the Page Editor of a primary page without the absent tab for Restrictions.

This image shows a Page Editor which contains a missing tab to create Restrictions.

Applying Restriction to a Page, continued

Laura can apply restrictions to a page under the Pages Tab by selecting the actions menu of any existing page. She can also select "Clone" to open the Page Editor where she again finds the Restrictions Tab.

In the previous video, a variation page creation by page cloning was already shown. Here are the steps once again, showing how to add a restriction when using the Clone Page wizard:

This image shows a Clone Page wizard, going through the stages Clone Options, Information, Restrictions. Important in this context is the last step Restrictions. Selecting Create opens an Add Restriction window, allowing you to select the restriction type you want. The options include Campaign Restriction, Category Restriction, Time Restriction, Usergroup Restriction, User Restriction.

Managing Multiple Applicable Restrictions

If more than one restriction is applied to a page, Laura must specify the condition under which the page is displayed:

Match All:

The page is displayed only when all the page's restriction conditions are met.

In the following image, we see that the page is displayed only if it satisfies both the conditions set in CMSTimeRestriction and CMSUserGroupRestriction.

Match Any:

The page is displayed when at least one page restriction condition is met.

This image opens a Clone Page Editor which contains options which allow display of page/component when one /all of the restrictions match.

Applying One or Multiple Restriction to a Component

Instead of applying a restriction to a whole page, Laura could also apply it to an individual component. Laura could, for example, restrict a banner component to be visible or explicitly NOT visible for a specific user group. This is done in Basic or Advanced Edit mode by editing an existing component, or while creating a new one. The restriction creation is handled in the Visibility tab of the Component Editor.

If Laura has added multiple restrictions to a component, she must specify the criteria for component visibility. Similar to how multiple restrictions in pages are handled, she can either choose Match All or Match Any in the Component Editor according to her requirements.

Log in to track your progress & complete quizzes