Name: Connecting SmartEdit to SAP Commerce Cloud, Composable Storefront
Uploaded: 2024-11-18
Duration: 572 s
Description: This video demonstrates how to connect SmartEdit to SAP Commerce Cloud, composable storefront.

Share feedback

<p><u><strong>Planned maintenance of Practice Systems</strong></u></p>

Planned maintenance of Practice Systems

Why create an SAP account?

Enhance your learning experience

SAP Learning

Choose your subscription

Manage your subscription

Live Sessions

Hands-on Practice

Certification

My Learning

Ready to start learning?

<div><div><div>This video demonstrates how to connect SmartEdit to SAP Commerce Cloud, composable storefront.</div></div></div>

Connecting SmartEdit to SAP Commerce Cloud, Composable Storefront

Welcome. In this video, we'll introduce you to the integration of SmartEdit with Composable Storefront.  Our agenda includes three main sections.  First, prerequisites.  We'll cover the essential software versions and extensions needed to ensure compatibility and readiness.  Second, configuration steps.  We'll guide you through the detailed steps required to configure the integration,  making sure SmartEdit can seamlessly interact with the Composable Storefront. And lastly, verification and troubleshooting.  We'll go over how to verify the configuration and fix some potential issues to ensure everything is working correctly.  Stay tuned as we break down each of these sections to give you a comprehensive understanding of the integration process.  Before we dive into the configuration steps,  it's crucial to ensure that your environment  meets the necessary prerequisites.  Here are the essential software versions and extensions you must have SAP Commerce Cloud 2211.  Ensure that your project is running on SAP Commerce Cloud version 2211 or a later version.  This version includes important updates and features required for the integration.  Composable Storefront 2211.  Similarly, make sure you are using the Composable Storefront version 2211, which is compatible with  the SAP Commerce Cloud 2211.  Spartacus Sample Data Extension.  This extension provides the sample data required for setting up the Composable Storefront.  Make sure it is included in your project setup  to facilitate smooth integration.  Having these prerequisites in place ensures that you have a compatible and ready environment for the integration steps ahead. Now, let's walk through the configuration steps required to integrate SmartEdit with your Composable Storefront.  Step one, build Angular app.  Step two, update SmartEdit  configuration in the app. Step three,  update backoffice configuration.  Step four, update SmartEdit configuration.  By following these steps, you'll configure the environment for effective integration between SmartEdit  and Composable Storefront.  Step one, build Angular app.  Begin by building your Angular application.  Use Angular schematics to add the necessary libraries  for the Composable Storefront.  This sets up the foundational structure needed to incorporate storefront features.  In a terminal window or command line interface, use the ng new command to generate an empty Angular project.  As part of the project preparation, it will automatically download and install the necessary Angular libraries or dependencies.  Once the Angular project is generated, navigate to the project folder, my store, and create an empty .npmrc file at the root folder of the project.  Open the .npmrc file in VIM or other text editors  and enter the Spartacus repository registry information,  including your NPM credentials generated from the RBSC repository.  Save the file and use ng add to add the Spartacus Schematics library to your project.  When prompted to choose the features, just hit enter to proceed with the default set of features.  At this time, the Spartacus libraries will be downloaded from the RBSC repository and installed to your project.  Next to install the SmartEdit library,  again we use the ng add command. Make sure to use the same version as the Schematics library.  The command will prompt you to configure the storefront preview  route and the origin URL.  Just hit enter to skip the configuration.  We'll configure the same in the code.  Now you run npm install to make sure all the required libraries are installed to your Angular project.  Step 2. Update SmartEdit configuration in the app.  Update the SmartEdit configuration within your Angular app.  Specifically, you need to modify the SmartEditFeature.module.ts file.  Override the default configuration by updating the values of Storefront Preview Route and Allow Origin.  This ensures that SmartEdit can correctly preview and interact with the Storefront.  Open the Angular project in any code editor like VS Code.  Open the package.json file at the root folder and add the SSL switch to the npm start script.  This is required by SmartEdit to load the Composable Storefront,  as by default SmartEdit is running on the https 443 port as well.  Open the angular.json file at the root folder,  and make sure the SmartEdit assets is added as part of the Angular build options. It should already be added by the Schematics tool.  Now find the SmartEdit feature module in the src-app-spartacus-features folder. Open the module file and configure the storefront preview route  and allow origin, which we skipped at the terminal window on the previous step.  Do not forget to save your changes.  Step 3. Update back office configuration.  Next update the configuration in the back office.  Set the WCMS cockpit preview URL to match your Composable Storefront website.  This step is crucial as it ensures that the preview URLs are aligned, allowing accurate previewing of content changes.  Now you can run NPM, start to bring up the Composable Storefront application in the local Angular dev server.  Once the Angular application is up, navigate to localhost 4200.  If this is the first time you integrate the SmartEdit with your Composable Storefront in a local development or testing environment using a self-signed SSL certificate.  The SmartEdit and Composable Storefront might not even load  because of the potential security issues.  In this case, you can go to the storefront homepage  and accept the risk by clicking on the Continue to Local Host unsafe link.  Now the SmartEdit site page should be able to load.  Running the application in SSL mode is imperative for securing communications and ensuring that SmartEdit can interact with the storefront without encountering security issues.  Log in the back office as admin and navigate to the WCMS website.  Open the Composable Storefront website you want to integrate with SmartEdit.  Choose the WCMS Properties tab and make sure the WCMS Cockpit Preview URL in the WCMS Preview Information section is correct.  Step 4. Update SmartEdit Configuration.  Finally, ensure that your Composable Storefront site is listed in the Allow List  within the SmartEdit Configuration.  This step is necessary to grant Smart Edit the permissions required to access and manage your storefront content.  Now log in to SmartEdit and click the gear icon on the top right corner to bring up the Edit Configurations popup.  Scroll down to the bottom and find the white listed storefront field. Replace everything in between the double quotes with the URL of the Composable Storefront.  Check the below option to accept the risk and click Save.  With the configuration steps completed, it's time to verify  and test the integration to ensure everything is functioning as expected. Back to the SmartEdit landing page, choose the storefront site from the Site dropdown on the top left.  Click the Stage Content Catalog and  open the Storefront application in SmartEdit. It takes a few seconds to load the SmartEdit tools.  Now you can switch to the different modes from the Mode dropdown on the top left corner.  We'll switch to the Advanced Edit mode to edit and sync the content slots or page.  Hover your mouse over the Our Best Selling Products carousel on the storefront homepage and choose the pencil button.  On the Product Carousel Component Editor pop-up, edit the title by appending for 2024 and click Save.  Change the sync mode from Draft to Ready to Sync from the drop-down on the top right corner.  Click the Sync button on the top to expand the list of content slots on the page.  You can choose all slots or specific slots and click Sync to start copying the changes to the Online Content Catalog version. When the Content Catalog version sync is done, head over to the storefront site and refresh the home page to reload the changes.  You'll see the new title of the best-selling product carousel.  By following this verification process, you can confirm that the integration is successful and functioning as intended, providing a robust content management solution for your Composable Storefront.  Thank you for watching.