SAP commerce cloud smartedit learning notes

Time:2022-1-2

Official documents

Smartedit is a pluggable JavaScript framework with a UI that enables developers to manage existing web pages.

The smartedit ecosystem consists of modules and extensions that jointly provide smartedit products.

Smartedit is a front-end driven scalable application in the smartedit module. The sap commerce cloud implementation of CMS rest calls is part of the WCMS module. All front-end extensions of smartedit require NPM ancillary modules for its build lifecycle.

You must install smarteditaddon addon to edit the sap commerce cloud accelerator storefront using smartedit. The smarteditaddon plug-in is implemented in any storefront based on core acceleratorSmartEdit contract.

Smartedit is a web application for managing store content. If the storefront complies with the smartedit storefront design contract, the storefront of the website can be edited by smartedit.

For storefronts created using yacceleratorstorefront or yb2baceleratorstorefront extension, you can edit storefronts using smartedit by enabling smarteditaddon. This plug-in ensures that the content of the coreacelerator based storefront can be edited using the smartedit web application.

The CX for spa recipe contains smartedit:

SAP commerce cloud smartedit learning notes

When the smartedit web application is allowed to edit the storefront, various menus and actions are displayed at the top of the storefront page content. Page content can vary according to a variety of conditions, such as site, content directory, content directory version, language, and date and time. Each of these variables constitutes the user’s experience context. Smartedit uses the preview API provided by the preview Web Services extension to load the storefront into the specified experience context.

SAP commerce cloud smartedit learning notes

SmartEdit Architecture

Smartedit architecture can be divided into two parts: front end and back end. As follows:

  • Front end: the front end consists of smartedit and cmssmartedit extensions. These extensions are written in JavaScript using the angularjs framework. In order to manage the build lifecycle of javascript based extensions, i.e. clean, build, package, shrink or beautify code, some libraries not provided by SAP commerce cloud platform by default are required. Smartedit uses the npmancillary extension to store and organize the required libraries.
  • Back end: the back end consists of smart editweb services, cmswebservices, cmssmartedit web services, cmsfacades, cms2 and cms2lib extensions. These extensions are built in Java using the spring framework.
    The front end uses the restful API to communicate with the back end. Rest APIs related to CMS are defined in smart edit web services, CMSs martedititweb services, and CMS Web Services extensions. The business logic used by the CMS API resides in the cmsfacades extension, which uses the CMS services available in the cms2 and cms2lib extensions.

To use the smartedit web application, users must enter a valid user name and password to log in. If the user is valid, the user credentials are sent to the authorization server and the OAuth token is returned. SAP commerce cloud platform supports this authorization feature. Similarly, all CMS APIs are protected and require the appropriate authorization token to be provided in the request header.

The smartedit framework is a UI centric business tool framework that allows users to edit changes in a visually enhanced manner. It is a lightweight angularjs JavaScript application based on the UI provided by SAP commerce cloud (such as website) and a set of modules that define additional functions.

The specific technical design can be seenhere

Log in to smartedit and select site and corresponding catalog:
SAP commerce cloud smartedit learning notes

Click home page:
SAP commerce cloud smartedit learning notes

Find this home page:
SAP commerce cloud smartedit learning notes

Edit:
SAP commerce cloud smartedit learning notes

Page label is the URL:
SAP commerce cloud smartedit learning notes

How to create a new page

Smartedit provides an intuitive wizard that you can use to create categories, content, e-mail, and product pages for content catalogs. You can also add restrictions to the page to specify the conditions under which the page is displayed to customers.

Smartedit provides an intuitive wizard to help you create pages for content catalogs. You can create categories, content, e-mail, and product pages. When creating a page, you can choose to create a master page or a variation page.

The primary page is the default version that is always displayed to all users. All variation pages you create are based on the main page. You cannot assign restrictions to the home page. When there is no variation page or no variation page matching the current display condition, that is, the display condition does not meet the restriction rules applied to the existing time, user group, category, etc., the main page variation page is displayed.

The variation page is based on the main page, but restrictions are added. Restrictions specify the conditions under which variation pages are displayed, such as when users belonging to a specific group view pages, or when users select pages during a specified date and there are variation pages to display on a specified date You can add categories, times, user groups, and other restrictions to variation pages. The type of restriction you can add to a variation page depends on the type of page.

When creating a page, you should pay attention to the following:

(1) You cannot create a variation page if the home page does not already exist. Variation pages must be based on master pages.

(2) You can only create one home page for category and product page types.

(3) You can create multiple master pages for the content page type.

You only need to specify a page label for the content page, and it must be unique in the content catalog version. You have specified a page tag on the home page, which is inherited by all associated variant pages.

You can create multiple variation pages based on a single master page.

You must add at least one restriction to the variation page.

SAP recommends that you add pages to the staging version of the catalog so that you can later synchronize changes with the online version of the catalog.

SAP commerce cloud smartedit learning notes

SAP commerce cloud smartedit learning notes

Select a template:
SAP commerce cloud smartedit learning notes

Select primary as the type:
SAP commerce cloud smartedit learning notes

The content slots of the content page 1 template can be viewed in backoffice:
SAP commerce cloud smartedit learning notes

SAP commerce cloud smartedit learning notes

After creation, the status is draft:
SAP commerce cloud smartedit learning notes

SAP commerce cloud smartedit learning notes

An error is reported after clicking Sync:

Items cannot be synched. One or more items haven’t been approved for publishing

SAP commerce cloud smartedit learning notes

After creation:

SAP commerce cloud smartedit learning notes

In fact, page, content slot and other definitions can be directly imported into the system through IMPEX.

page draft status:
SAP commerce cloud smartedit learning notes

The precondition for page synchronization is that the status is changed to ready to Sync:

SAP commerce cloud smartedit learning notes

To sync, update page status to Ready to Sync

Note the following figure: I can’t see these when I log in with admin:

SAP commerce cloud smartedit learning notes

This involves permission management in smartedit.

More Jerry’s original articles are: “Wang Zixi”:
SAP commerce cloud smartedit learning notes