Introduction
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.
Exploring SAP Composable Storefront: Transforming E-Commerce Experiences
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.
Introduction to SAP Commerce Cloud SmartEdit
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.
Key Features and Use Cases of SmartEdit
- Real-time Visual Editing: SmartEdit provides a user-friendly WYSIWYG (What You See Is What You Get) interface that allows content managers to edit the front end of their website directly. This empowers them to make immediate changes and see the results in real-time, reducing their dependency on IT teams for minor content adjustments.
- Content Personalisation: With SmartEdit, you can create and edit multiple websites (including content versioning and locales) across various brands. Content can be shared across sites to support multiple regions, brands, or lines of business.
- Navigation Management: SAP SmartEdit gives content users the feasibility of maintaining navigation nodes for the site. These nodes can be directly linked to the product or categories without referencing the URLs directly.
- Page Types: SAP Commerce supports various types of pages and content users can use the predefined templates available for the use case. It has multiple pages, including a category page, a content page, an email page, a product page, a page for configuring a product, and an overview.
- Responsive Design Management: Ensuring a consistent experience across various devices is crucial. SmartEdit allows content managers to preview and optimise content for different screen sizes, making responsive design adjustments effortless.
- Search Engine Optimisation: SEO is essential to the composable storefront framework. The implementation of SEO in a composable storefront is focused on the architecture rather than the features, which helps add a wide range of SEO capabilities.
- Quick Content Updates: SmartEdit is helpful for time-sensitive promotions, announcements, or events. Content managers can swiftly update banners, call-to-action buttons, and other visuals to align with marketing strategies and seasonal campaigns.
- Collaboration: Multiple team members can collaborate within SmartEdit, ensuring seamless content creation and updates. Content can be reviewed, edited, and approved within the platform, streamlining workflow processes.
- Drag-and-Drop Functionality: SmartEdit simplifies content creation by providing drag-and-drop functionality for adding new components, widgets, and blocks to web pages. This intuitive approach reduces the learning curve for new users.
- Global Content Management: For businesses operating in multiple regions, SmartEdit offers global content management capabilities. Content managers can adjust and localise content for different markets, languages, and cultural contexts.
- Content Versioning: SmartEdit maintains a version history of changes made to the storefront, allowing users to revert to previous versions if needed. This feature ensures accountability and provides a safety net for content updates.
- Streamlined Preview and Publication: Before making live content changes, SmartEdit offers a preview mode that shows how the changes will look on the website. Once satisfied, content managers can publish updates instantly.
Configuration Steps
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:
- In Backoffice, in WCMS > Website > your site, click the WCMS Properties tab.
- Set the WCMS Cockpit Preview URL to match your SAP Composable Storefront website. Example: https://spartacus-demo.eastus.cloudapp.azure.com:8443/
6. Add the SAP Composable Storefront file to the whitelist:
- Sign in to SmartEdit as the admin user
- In the Configuration Editor, scroll down to whiteListedStorefronts and add the exact URL of your SAP Composable Storefront. For this example, it is [“https://spartacus-demo.eastus.cloudapp.azure.com:8443/”].
7. Start the Angular app in SSL mode with the following command:
yarn start --ssl
CMS Page Concept Overview
Before creating a page, we must understand what a page is and what it consists of:
- Page: Defines a page on your site.
- Page Template: Defines the structure of a page. It is composed of many sections (slots).
- Slots: Page layout elements that host one or more components.
- Components: Represents different types of content or functionality, such as text, images, or more complex elements like carousels and placeholders for special functionality.
CMS Component Mapping (Using out-of-the-box components)
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.
Example of CMS Component Mapping
Create an angular component using angular CLI in the SAP Composable Storefront project:
ng g c extraBanner
Component Metadata
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",
...
}]
SAP Composable Storefront Code
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.
Creating a new CMS page in SmartEdit
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.
3. After selecting the page type, select the template for the page. I have chosen a content page 1 template with a header and footer.
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.
6. Create new components on the newly created page and map them in SAP Composable Storefront using component mapping.
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 )
Conclusion
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.
