SmartEdit

Install the module

From the root of your Storefront project, run the following command:

npx @vsf-enterprise/storefront-cli add-module cms-smartedit

Follow the instructions in the command line to complete the installation. The command will:

• install the Alokai SmartEdit API Client @vsf-enterprise/smartedit-api in the Middleware,
• install the Alokai SmartEdit SDK module @vsf-enterprise/smarttedit-sdk in the Storefront,
• copy the webApplicationInjector.js file to the Storefront public directory

Update configuration

In the apps/storefront-middleware/sf-modules/cms-smartedit/config.ts file, you need to update the api object with your SAP Commerce Cloud's API configuration:

export const config = {
  location: "@vsf-enterprise/smartedit-api/server",
  configuration: {
    api: {
      uri: SAPCC_API_URI,
-      baseSiteId: "apparel-uk",
+      baseSiteId: "<your-base-site-id>",
-      catalogId: "apparelProductCatalog",
+      catalogId: "<your-catalog-id>",
-      catalogVersion: "Online",
+      catalogVersion: "<your-catalog-version>",
-      defaultLanguage: "en",
+      defaultLanguage: "<your-default-language>",
-      defaultCurrency: "USD",
+      defaultCurrency: "<your-default-currency>",
    },
    unified: {
      // ...
    },
  },
} satisfies Integration<MiddlewareConfig>;

Copy extension files to the bin/custom directory.

Add the alokaismartedit extension to config/localextensions.xml:

<extension dir="${HYBRIS_BIN_DIR}/custom/alokaismartedit"/>

Build

cd bin/platform
. ./setantenv.sh
ant clean all
ant updatesystem

Loading the preview route

SmartEdit loads your Storefront within an iframe. The loaded URL consists of:

• the WCMS > Website > Website-ID > WCMS Properties > WCMS Cockpit Preview URL setting in Backoffice,
• the storefrontPreviewRoute setting in SmartEdit,
• a preview token passed as the cmsTicketId query param

As a result, example loaded URL looks like this:

http://localhost:3000/cx-preview?cmsTicketId=<preview-token>

Redirecting to a proper Storefront route

The cx-preview page component extracts value of the preview token from the cmsTicketId query param and uses it to fetch the currently edited page data from SmartEdit. Then it uses the label property to redirect to a correct Storefront page.

For example, when the currently edited SmartEdit page has label equal to test, the /test Storefront route will be loaded.

Rendering the currently edited page

The loaded Storefront route handler fetches the page data from SmartEdit and renders it using the RenderCmsContent wrapper. It fulfills the HTML Markup Contract by adding properties recognized by SmartEdit to HTML elements representing slots and components.

<div
  class="smartEditComponent"
  data-smartedit-component-type="SimpleResponsiveBannerComponent"
  data-smartedit-component-id="ApparelUKHompageSplashBannerComponent"
  data-smartedit-component-uuid="somecompositekeyserialization"
  data-smartedit-catalog-version-uuid="apparel-deContentCatalog/Staged"
>
    <!-- component code -->
</div>

Initializing the Live Preview

Finally, the loaded Storefront route calls the initLivePreview() utility provided by our SmartEdit SDK module. As a result, the webApplicationInjector.js script is loaded and the page becomes editable.

sdk.smartedit.utils.initLivePreview({
  page,
  allowedOrigins: ['your-sap-environment-uri-and-port'],
});

Create a new page template in SmartEdit

In the SAP Commerce Cloud Back office, navigate to the Page Template page. Then click a + button to create a new page template.

Define the slots

In the newly created page template, specify the slots where you can add components. For dynamic page, you should add:

• componentsAboveFold for components above the fold,
• componentsBelowFold for components which should be lazy-loaded.

For category page, you should add:

• componentsTop for components above the product list,
• componentsBottom for components below the product list.

For product page, you should add:

• componentsBottom for components below the main product data.

Add valid component types

For each slot, add all the Alokai component types in Valid Component Types field.

Change the template name

As all the page templates are named Page Template by default, you should change the name in the Administration tab to be able to distinguish them in the SmartEdit.

Add the template to the page type

In the Page Type page, add the newly created template to the Content Page in Common -> Restricted Page Templates field.