Home
The goal of this section is to show you how to set up your environment and copy the integration code in order to try out
the Contentful and Composable Storefront Powertools Store demo. Each step will:
- Describe the required actions
- Provide links to the official documentation from Contentful or SAP
- Show an example of the expected output so you can verify that the step is completed.
The assumption is that you will be starting with none of the required tools and applications set up, however, if you
already have an SAP Commerce or a Contentful instance set up, feel free to skip some steps as long as you can verify
that what you have matches the expected output for that particular section.
Before we dive into the specifics of the integration between Contentful and Composable storefront, we would like to get to a state where we have both of those products installed, configured and working independently.
Since we will be using SAP Composable Storefront and one of the SAP’s default storefronts for product information
(Powertools Store), we need to have an SAP Commerce instance set-up and initialize it with proper data.
We can do this in two ways:
- Download and install a local copy of SAP Commerce Cloud 2211
- Use an existing instance of SAP Commerce Cloud 2211 deployed on Commerce Cloud V2
In order to correctly install Commerce Cloud 2211 on your local machine and initialize it with the Powertools Store data,
please follow the official documentation found here:
Installing SAP Commerce Cloud 2211 for use with Composable Storefront
If you already have an instance of SAP Commerce Cloud deployed in SAP CCV2 cloud solution, you will have to set up
additional HTTP response headers in order to let Contentful host the store website in an iframe when using the Live
Preview functionality.
Setting up additional HTTP response headers in order to use Live Preview
You can find the required headers in the official Contentful Live Preview setup guide:
Contentful - Live Preview Setup
Refer to the official SAP documentation on how to add HTTP Response header sets:
SAP Commerce Cloud in the Public Cloud - Creating an HTTP Response Header Set
At the time of writing, headers that need to be set up under Security > HTTP Response Header Sets in order for Live
Preview to work are the following:
-
Header Name:
Content-Security-Policy -
Header Value:
frame-ancestors 'self' https://app.contentful.com -
Apply Condition:
ALWAYS -
Apply Action:
SET
and:
-
Header Name:
X-Frame-Options -
Header Value:
-
Apply Condition:
ALWAYS -
Apply Action:
UNSET
After you create a set containing these headers, you will have to assign the newly created set to the JS Storefront
endpoint, please follow the official SAP documentation in order to achieve this:
SAP Commerce Cloud in the Public Cloud - Assigning an HTTP Response Header Set to an Endpoint
After you install your SAP Commerce Cloud 2211 instance, make sure to have access to the following resources:
-
SAP Commerce Backoffice
a. For local instances, you can access the Backoffice at https://localhost:9002/backoffice/
b. For CCV2 instances, you can find the Backoffice endpoint at Environments > [environment] > Public
Endpoints > Backoffice
-
powertools-spa website within the WCMS > Website section of the Backoffice:
You will also need a Contentful Space for importing the content data we prepared for this demo. Simply by signing up
with Contentful you will receive a single Space and access to everything that you need in order to get started.
For additional info we recommend the official docs:
Beginner's guide to Contentful
In order to set up Contentful for use with this demo, you will have to set up a couple of access tokens, import content
model and content that we have prepared, install a couple of Contentful Marketplace Apps, set up the localization options and the content preview platform for the Live Preview.
In order to successfully import the data that we have prepared and later connect to the Composable Storefront
application, you will have to create the following tokens as described in the official documentation Authentication:
- Content Management API key. This key will be used during the data import.
- Content Delivery API and Content Preview API tokens. These tokens will be used in the Composable Storefront application in order to fetch the content and during the Live Preview to fetch the edited content.
We have provided a set of data that has been exported from an existing Integration Demo space.
In order to import data:
-
Set up the Space localization to
en
Default localization for a new Space is usuallyen-US, but for the data that we are importing we specifically need it to
been
Check the official docs on how to change the localization of the space: Manage locales -
Locate the the provided import files in the repository by navigating to the
import-export/powertools-demo-data-importfolder. The folder should have the following structure:import-export/ ├─ powertools-demo-data-import/ │ ├─ import-data/ │ │ ├─ images.ctfassets.net/ │ │ │ ├─ .../ │ │ │ ├─ .../ │ │ │ ├─ .../ │ │ ├─ import-data.json │ ├─ import-config.json │ ├─ README.md
Configure the
import-config.jsonfile by adding your:- Space ID
- Environment ID ('master' will be used if left empty)
- Content Management API key (as described in Setting up the Contentful Access Tokens)
-
Open the
powertools-demo-data-importfolder in your terminal -
Follow the instructions from the Importing and exporting content with the Contentful CLI in order to install
contentful library and authenticate -
Execute the following import command:
contentful space import --config import-config.json
You should expect the following output:
┌──────────────────────────────────────────────────┐
│ The following entities are going to be imported: │
├────────────────────────────────┬─────────────────┤
│ Content Types │ 25 │
├────────────────────────────────┼─────────────────┤
│ Tags │ 7 │
├────────────────────────────────┼─────────────────┤
│ Editor Interfaces │ 25 │
├────────────────────────────────┼─────────────────┤
│ Entries │ 332 │
├────────────────────────────────┼─────────────────┤
│ Assets │ 50 │
├────────────────────────────────┼─────────────────┤
│ Locales │ 2 │
├────────────────────────────────┼─────────────────┤
│ Webhooks │ 0 │
└────────────────────────────────┴─────────────────┘
✔ Validating content-file
✔ Initialize client (1s)
✔ Checking if destination space already has any content and retrieving it (2s)
✔ Apply transformations to source data (1s)
✔ Push content to destination space
✔ Connecting to space (1s)
✔ Importing Locales (1s)
✔ Importing Content Types (4s)
✔ Publishing Content Types (12s)
✔ Importing Tags (2s)
✔ Importing Editor Interfaces (8s)
↓ Uploading Assets [skipped]
✔ Importing Assets (264s)
✔ Publishing Assets (16s)
✔ Archiving Assets (1s)
✔ Importing Content Entries (48s)
✔ Publishing Content Entries (129s)
✔ Archiving Entries (0s)
✔ Creating Web Hooks (1s)
Finished importing all data
┌─────────────────────────┐
│ Imported entities │
├───────────────────┬─────┤
│ Locales │ 2 │
├───────────────────┼─────┤
│ Content Types │ 25 │
├───────────────────┼─────┤
│ Tags │ 7 │
├───────────────────┼─────┤
│ Editor Interfaces │ 25 │
├───────────────────┼─────┤
│ Assets │ 50 │
├───────────────────┼─────┤
│ Published Assets │ 50 │
├───────────────────┼─────┤
│ Archived Assets │ 0 │
├───────────────────┼─────┤
│ Entries │ 332 │
├───────────────────┼─────┤
│ Published Entries │ 332 │
├───────────────────┼─────┤
│ Archived Entries │ 0 │
├───────────────────┼─────┤
│ Webhooks │ 0 │
└───────────────────┴─────┘
The import took 8 minutes (480s)
The import was successful.After refreshing your Contentful page, you should see the imported Content Model and Content:
In order to choose the products that we want displayed in the carousel component on the homepage, we need an official
SAP Commerce Cloud connector which will make it easier to browse and select the products from our Commerce Cloud
2211 instance.
Without installing the app, in the Best Selling Products carousel component, you should be seeing something similar to
this:
On your Contentful web page go to the Apps > Marketplace , then find and install the Contentful Connector for SAP
Commerce Cloud app.
In order to install, you will have to:
- Provide API endpoint
- For CCV2 Commerce instances, it can be found in the CCV2 panel under
Environments > [environment] > Public Endpoints > API - For locally installed Commerce instance, you can use the following value:
https://localhost:9002
- For CCV2 Commerce instances, it can be found in the CCV2 panel under
- Select the proper fields to connect:
Product Carousel > Products
After installing the app, you should be able to add new products to the Product Carousel component.
You should be seeing Select Products button and after clicking it, you should see all the products for the selected store
available for selection.
Note: The app is using the URLs to find the data in the Commerce Cloud instance. We have provided data that relies on
the local installation of Cloud Commerce but if you’re providing a CCV2 instance data, or it runs on a different port in your
local system, the imported url links might not match your environment, thus you would have to reimport the products to
get the app to show product name and picture in the Contentful UI. The imported links should still work in the component
itself because the product id data is what is being parsed and that should match the powertools-spa initialization data.
Another marketplace app that will be useful to us is Flex Fields.
This app will enable us to conditionally show what page sections are available during page creation. You can read more
about this in the Content Architecture documentation.
Before the installation (and, more importantly, configuration) of the Flex Fields, when you are creating or viewing a
CMSPage entry, you will have all page sections available regardless of the template the page is based upon. This can get
quite chaotic in time with more templates and different section naming schemes, this is why we will import FlexFields
rules in order to show only the needed page sections.
Note: During the installation of the FlexFields app you might have to add a random rule in order for the app to let you
proceed with the installation, you can delete the rule as soon as the installation is confirmed.
In order to import the prepared rules for FlexFields, you should execute the script that we have provided within the import-export folder, in the subfolder flexfields-demo-data-import.
Within the import-script.sh you will have to configure the required properties:
- Space ID (SPACEID)
- Content Management API Token (CMATOKEN) (as described in Setting up the Contentful Access Tokens)
- App Installaion ID (APPINSTALLATION) should remain as provided, since every Marketplace App provides their own
unique ID on the app installation info page
After executing the script you will be seeing 20 rules configured for the FlexFields app.
Note: After import of the FlexFields rules you might have to go into FlexFields Configuration and click Save and reload
the Contentful web app in order to update the UI components properly and activate the rules.
After you import the rules, creating a CMSPage with template ContentPage1Template will now hide all the page sections
that are not used by that specific template.
Demo data that we have provided has two locales: en for English and de for German language. After the import, you
should be able to set up localized versions of content, but in order to see these options you will have to check the
additional locale in the Web UI:
-
Open the
HomepageCMSPagecontent -
On the right side you should be seeing
Locales listand the buttonEdit locales list
-
After clicking the button you should be able to add the German language locale to the list
-
You should now see the input fields for all the fields that have a German localization
Note: Sample code has been created and updated to work with Composable Storefront v2211.43.0 and Contentful live-preview v4.6.52
- Checkout the code in
composable-storefront-integration-examplerepository - Place your SAP RBSC key in the
.npmrcfile instead of the${SAP_RBSC_TOKEN}string - Edit the
src/environments/environment.local.tsfile and add the required configuration
a.contentful/spaceId- The Space Id of your Contentful instance where your CMS data is stored
b.contentful/accessToken- Access Token
(described in Setting up the Contentful Access Tokens )
c.contentful/previewAccessToken- Preview Token
(described in Setting up the Contentful Access Tokens )
d.baseUrl- Your SAP Commerce base URL property that points to the API of your instance of Commerce Cloud. (usuallyhttps://localhost:9002for local instances but for CCV2 instances can be found at Environments > [environment] > Public Endpoints > API) - Run
npm install - Run
npm start
If you’ve gone through the Contentful setup as described in the rest of this guide, the Powertools store that reflects the
Contentful Content Model and Content should be available at
https://localhost:4200/powertools-spa/en/USD/
Note: Depending on your browser settings, you might get a Your connection is not private warning window, this is due to Composable Storefront application running locally in SSL mode but not having the proper certificates set up. Accept the risks and proceed to localhost to see your storefront.
Once we set up the integration between Composable Storefront and Contentful you will be able to access Live Preview
functionality directly from the Contentfull app, but you will have to set up the Content Preview settings.
Follow the official documentation Set up content preview and set up the live preview URL as follows:
- Content types:
CMS Page - Preview URL:
https://localhost:4200/powertools-spa/{locale}/USD/{entry.fields.previewUrl}?preview=true
And then you should be seeing an Open Live Preview button for the platform you’ve created. This will become useful
after the integration code is copied and installed in the next chapter.
In this section we will go through a couple of basic usecases to confirm that the demo setup has been completed
successfully.
-
Navigate to the root folder of the demo app in a terminal window and enter:
npm start -
Verify that you still see the Powertools Homepage at:
https://localhost:4200/powertools-spa/en/USD/
We will be updating the footer paragraph that contains copyright information by updating the year:
Navigate to your Contentful space, browse the content and find the Notice Text Paragraph component.
Edit the component’s Content field, change the year from 2024 to 2025 and hit Publish changes.
Return to the store page and hit refresh and the new copyright text should be there.
Navigate to your Contentful space, browse the content and find the Homepage CMSPage.
Open the page and click on the Live preview button. A new overlay structure will appear with the page data on the left
and the preview window on the right.
Click on the green i on the top right corner of the page and confirm that:
-
Inspector Mode is on - this means that all of the components on the page will have an outline around them and you
can click on the corresponding Edit button to quickly jump to the properties of that particular component -
Live Updated is on - this means that the changes will be visible as soon as you make them on the component
Hover one of the product carousels and click the Edit button that shows above them, the component properties will be
shown on the left side of the Live Preview window. This is the Inspector Mode feature of the Live Preview.
In the products field, rearrange the positions of the produtcts, swap the first and the second products by dragging one in
front of the other and observe the instant change that occurs on the preview page. This is the Live updates functionality
of the Live Preview.
If you wish, you can click Publish and publish the changes that you’ve created so that they are visible when visiting the
page directly at https://localhost:4200/powertools-spa/en/USD/