Wednesday, July 4, 2018

Introducing SmartEdit in SAP Hybris Commerce

Already back in 2016, SAP Hybris Commerce was extended with a new cockpit called SmartEdit. Content managers can use SmartEdit to add or edit the pages on their website.

In the end, SmartEdit should replace the good old WCMS (Web Content Management System) cockpit. All main WCMS functionalities are now supported by SmartEdit and we see that all new functionalities concerning the WCMS of SAP Hybris Commerce are targeted to this new cockpit.

This blog describes the ground basics of SmartEdit including an introduction to its personalization capabilities.


Ground basics

The user interface of the SmartEdit is clearly targeted to end users. The idea is that SmartEdit brings a WYSIWYG cockpit in which content managers (or any other type of end users) can do without IT support in maintaining the pages of their SAP Hybris Commerce websites.

Access to the SmartEdit cockpit with write and/or read authorizations can be granted to selected users or user groups from the BackOffice. After logging in, SmartEdit is presented to you with a selection of available sites and the option to maintain the staged or online content catalog for the selected site.


Normally, one would do all the editing on the staged catalog and, once approved, sync the changes to the online content catalog.

Selecting the 'Homepage' link from the staged catalog will open the Homepage in preview mode. The drop-down menu entries on the top right side represent the main functionalities of SmartEdit:
  • Preview: the preview mode shows the web pages as they would actually show to the visitors of your website.
  • Basic Edit: the edit mode in which you can only add or edit components on the web page that are not shared with other web pages (e.g. components in the shared header and footer area can not be edited).
  • Advanced Edit: the edit mode in which you can add or edit all components on the web page (so all the shared components as well, be aware that changing a component in the header will impact all web pages using that same header).
  • Personalization: the edit mode in which you can create customizations of a page targeted to the (combination of) target groups that the visitor of your website might be part of.


Addressing to the responsive nature of the accelerator web pages, one can preview and edit the web pages for different screen sizes (named inflection points like mobile phone, tablet or desktop).


Edit a page

As listed above, SmartEdit provides a basic and an advanced edit mode. Essentially, editing a web page comes down to adding, moving or editing components on these pages. Once in edit mode, the existing components on a page are highlighted using boxes with dotted line borders. Hoovering over a component will show an option to edit the component, remove it or drag & drop it to another place on the page.


Editing the component will open the pop-up editor showing the contents of the corresponding component. Obviously, these editors are different for the individual components. The examples below show the editors for the navigation menu component, the banner component and the product carousel component. 


Besides editing the existing components on a page, you can also add new components to it. Quite a number of component are delivered by standard, but one can also develop its own components to be included on these pages.



Add a new page

The previous screenshots were all based on the homepage. Obviously, you can edit any other page on your SAP Hybris Commerce sites in the same way, including the option to add new pages to them. Selecting the 'Pages' link from the site overview in SmartEdit will lead you to a listing of all pages of the selected site.


From here, you can search for the relevant page, and subsequently review, edit, clone, delete or sync the page. The 'Add new page' option will open a 4-step wizard in which you define the type of the new page (e.g. a content page), the template that the new page is based on (e.g. a standard landing page that is in line with the company styling),  the display condition (either it is a primary page or a variation page restricted for example to a particular user group) and finally the name, label and title of the new page.


Change the navigation structure

Selecting the 'Navigation Management' link from the site overview in SmartEdit will lead you to the hierarchical navigation structure of your website. The hierarchical nodes listed under the site root can be linked to individual CMS link components. These link components are defined in the BackOffice and will for example refer to one of your pages. The resulting hierarchies are used in various places in your site like the header menu (see also the screenshot of the Category Navigation component editor) and the footer.


Personalize your site

Personalizing your site can be achieved with SmartEdit by creating so-called customizations. In general, the idea is that you can define unique, personalized views of your SAP Hybris Commerce site that will show when the site visitor belongs to the assigned target group(s).

Creating a new customization for one of your pages enables you to replace the default component content on this page with alternative content. For example, you could replace the general shop banner to one that is specific for a customization.


At the same time, each customization is assigned to one or more target groups. Only visitors belonging to a target group will see the customization of the page, other visitor will see the default page (or one of the other customizations). 

Each target group consists of one or more customer segments. One could define complex, hierarchical combinations of segments in a rule expression to define a target group, but a simple example is shown here. The customization 'Screwdriver Lover' has a single target group. And this target group has a single segment containing all customers that have expressed interest in the Screwdriver product category. 


Defining customizations and the related target groups is done with SmartEdit. Defining the segments is done from the BackOffice.

To conclude...

Although this blog only introduces the ground basics of SmartEdit, we can already conclude that this cockpit is an important factor in the content management capabilities of SAP Hybris Commerce.

We will closely follow SmartEdit and its further growth in the coming releases of SAP Hybris Commerce.