Transitioning from SAP CMS (SmartEdit) to Contentful

During the transition from SAP CMS (SmartEdit) to Contentful, you have several options depending on your project’s needs and migration strategy. This document outlines the possible approaches and provides guidance on how to implement them.

Configuration Options

You can choose one of the following strategies for your content management during the transition period:

Migrate all content to Contentful (recommended for simplicity and future scalability).
Use both SAP CMS and Contentful for an iterative migration, allowing for a phased approach.
Retain only the header and footer in SAP CMS while moving the rest of the content to Contentful, which can simplify the migration of complex components.

Migrating All Content to Contentful

To fully transition your content management to Contentful:

Follow the steps outlined in our Installation Guide.
When defining your route configuration, omit the canActivate: [CmsPageGuard]. This bypasses the loading of CMS data from SAP, ensuring that only Contentful content is loaded.

// Example route definition without SAP CMS data loading
    provideConfiguration({
        routing: {
            home: {
                regex: /^\/?$/g,
                contentfulType: 'ncrPagesBlank',
                filter: () => ({'fields.slug': 'home'}),
                // Do not include canActivate: [CmsPageGuard]
            },
        }
    })

Using Both SAP CMS & Contentful

For a mixed content strategy:

Include canActivate: [CmsPageGuard], in your route configuration as detailed in the Installation Guide.
This configuration enables the loading of content from both SAP CMS and Contentful. You can then decide which source to use for different sections of your page. Displaying Header and Footer from SAP

To maintain your existing application’s header and footer from SAP Commerce CMS while using Contentful for other content:

Displaying Header and Footer from SAP

To maintain your existing application’s header and footer from SAP Commerce CMS while using Contentful for other content:

Modify the <cx-storefront> structure to only display the header and footer sections. Below is an example based on the 2211.20.1 release:

<!-- Example using only the header and footer from SAP CMS -->
<header
  id="cx-header"
  cxSkipLink="cx-header"
  [cxFocus]="{ disableMouseFocus: true }"
  [class.is-expanded]="isExpanded$ | async"
  (keydown.escape)="collapseMenu()"
  (click)="collapseMenuIfClickOutside($event)"
>
  <cx-page-layout section="header"></cx-page-layout>
  <cx-page-layout section="navigation"></cx-page-layout>
</header>
 
<router-outlet></router-outlet>
 
<footer cxSkipLink="cx-footer" [cxFocus]="{ disableMouseFocus: true }">
  <cx-page-layout section="footer"></cx-page-layout>
</footer>

Implementation Steps

Open your app.component.html
Remove the <cx-storefront> tag
Replace it with the code above from spartacus repository (take the code that matches your version!)
Keep only the sections you are interested in. For instance for the footer and header, we would need the following.
Import the required modules (i.e PageLayoutModule,KeyboardFocusModule,SkipLinkModule) and copy the missing attributes from sap cx-storefront.

Note - You could also use the provided “cxOutlet” to inject your code, but doing so results in less readable code and makes it harder to upgrade / maintain.

By following these guidelines, you can smoothly transition your content management system from SAP CMS to Contentful, tailoring the approach to fit your project’s unique requirements.

Custom Breakpoints SEO