The digital landscape has evolved dramatically over the years, and customers now expect more than just products or services. They seek immersive experiences, personalised recommendations and seamless interactions. This blog serves as a guide to help businesses and digital professionals harness the potential of SAP Composable Storefront and SmartEdit. Whether you’re a marketer looking to enhance your campaigns with personalised content or a developer seeking to streamline the technical aspects of content management, this article provides insights, tips and step-by-step instructions to help you leverage these tools effectively. By the end of this article, you’ll be equipped with the knowledge and skills to create captivating content that not only engages your audience but also aligns with your business goals. So, let’s jump into the world of SAP Composable Storefront and SmartEdit.
SAP Composable Storefront is a free, open-source storefront for SAP Commerce Cloud. It boasts powerful features such as Progressive Web Applications (PWA) and Server-Side Rendering (SSR). Spartacus operates on an API-driven model and emphasises decoupling. The source code for SAP Composable Storefront 4.3.8 is publicly available and undergoes upgrades every six weeks for minor versions and every six months for major versions. You can find the Spartacus Repository here. If you’re new to SAP Composable Storefront, you can kickstart your journey by following the instructions here.
SAP Commerce Cloud SmartEdit is a robust and user-friendly storefront editor crafted to simplify the management of website content within the SAP Commerce Cloud ecosystem. It empowers content managers, marketers and business users, allowing them to effortlessly shape the look and feel of their online storefront. With SmartEdit, you can ensure a seamless and captivating customer experience. Going beyond traditional content management systems, it offers real-time visual editing capabilities that enable on-the-fly adjustments, content creation and updates, all without requiring technical expertise.
We must follow the steps below to create a connection between SmartEdit and SAP Composable Storefront.
1. Install SmartEdit in the SAP Composable Storefront project by running the following command:
ng add @spartacus/smartedit
2. Copy the SmartEdit file “webApplicationInjector.js” to the src folder of your SAP Composable Storefront application. The file can be found at:
modules/smartedit/smarteditaddon/acceleratoraddon/web/webroot/_ui /shared /common /js/webApplicationInjector.js
3. Change the “angular.json” file in the SAP Composable Storefront application. Add node_modules/@spartacus/smartedit/assets into the assets array in angular.json:
{
"glob": "**/*",
"input": "node_modules/@spartacus/smartedit/assets",
"output": "assets/"
}
4. Update the SmartEdit configuration file in your application if you want to replace the default values:
export const defaultSmartEditConfig: SmartEditConfig = {
smartEdit: {
storefrontPreviewRoute: 'cx-preview',
allowOrigin: 'localhost:9002', //Server URL
},
};
5. Set the WCMS Cockpit Preview URL in Backoffice:
6. Add the SAP Composable Storefront file to the whitelist:
7. Start the Angular app in SSL mode with the following command:
yarn start --ssl
Before creating a page, we must understand what a page is and what it consists of:
SAP Composable Storefront has out-of-the-box components that can be used and rendered to the page with the help of component mapping. An aerial view of component mapping is explained in the diagram below.
As shown in the diagram, we have a SimpleBannerComponent obtained from the component’s metadata. We use the typeCode key from the metadata in SAP Composable Storefront to render the component.
Create an angular component using angular CLI in the SAP Composable Storefront project:
ng g c extraBanner
Component metadata from the backend of SAP Commerce Cloud as an out-of-the-box component will look like the image below.
"component": [{
"uid": "StaticBanner",
"uuid": "…",
"typeCode": "StaticBannerComponent",
...
}]
To access the component/page, we use the typeCode key in the SAP Composable Storefront code.
"component": [{
"uid": "StaticBanner",
"uuid": "…",
"typeCode": "StaticBannerComponent",
...import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExtraBannerComponent } from './extra/extra.component';
import { provideCmsStructure } from '@spartacus/storefront';
import { CmsConfig, ConfigModule } from '@spartacus/core';
@NgModule({
declerations: [ExtraBannerComponent],
imports:[
CommonModule,
ConfigModule.withConfig({
cmsComponents:{
StaticBanner:{ // out-of-the-box Component
component: ExtraBannerComponent // Angular Component
},
},
}as CmsConfig),
],
providers:[
provideCmsStructure({
componentId:'StaticBanner',
pageSlotPosition:'StaticBannerSlot'
})
]
})
export class ExtraBannerModule {}
}]
Your SAP Composable Storefront will look like this after adding a custom component to an existing out-of-the-box page.
Using the following steps, create a custom page for the SAP Composable Storefront using SmartEdit.
1. Sign in to SmartEdit and go to the page view.
2. Click the Create Page button and select the desired page type.
4. Add the display conditions and information about the page, like a meaningful name, description and title.
5. The new page will look like this on the SAP Composable Storefront.
cmsComponents:{
YOUR_NEW_COMPONENT_TYPE:{
component: CustomComponent // Angular Component
},
},
}
7. We can give a custom layout to the newly created page using layoutSlots in the LayoutConfig module file.
ConfigModule.withConfig({
layoutSlots:{
ContentPage1Template:{
lg:{
slots:[
'StaticBannerSlot',
'Section1',
'Section2',
'Section3',
'Section5',
'Section4']
},
}
}
}as LayoutConfig )
Creating great customer experiences is crucial for the success of any online business. By using SAP Composable Storefront and SmartEdit together, you can now easily create content that connects with your audience. In this guide, we’ve explored how to use these tools to create dynamic content without any hassle. Whether you’re a marketer looking to improve your campaigns or a developer handling the technical stuff, remember that SAP Composable Storefront and SmartEdit are here to help. As we finish this guide, it’s time for you to unleash your creativity, grow your strategies and make your customers happy in this new world of possibilities.