Reference Architectures, 1.0.0

Salesforce Composable Storefront

This document assumes familiarity with headless content delivery and headless commerce.

Product description

Connect for Commerce is a connector that extends the powerful and flexible Crownpeak CMS (FirstSpirit) with e-commerce functionalities that, in this case, can be used in combination with the headless commerce solution Salesforce Composable Storefront.

Connect for Commerce enables the connection to any e-commerce store system and, in combination with FirstSpirit and the Salesforce Composable Storefront, offers a modern, scalable, and future-proof e-commerce experience using Connect for Commerce and Salesforce B2C Commerce APIs.

High-level architecture

The following graph shows the high-level architecture of the Connect for Commerce and Salesforce Composable Storefront system and how the different components interact with each other.

System components and their interactions

The system components are identical to the components listed in headless commerce, except for the components described below, which apply specifically to this use case.

Salesforce bridge

The Salesforce bridge is a microservice that acts as a connector between the B2C Commerce Cloud and the Connect for Commerce module. It fetches the available product, category, and content data from the B2C Commerce Cloud using the B2C Commerce API and Open Commerce API of Salesforce and makes it available to the Connect for Commerce module.

You can either choose to implement your own bridge against your B2C Commerce Cloud instance or use our reference implementation on GitHub. To get started on the bridge implementation refer to our documentation.

B2C Commerce Cloud

The B2C Commerce Cloud instance holds the relevant product, category, and content information and is the e-commerce shop backend of this particular use case. In a headless environment the product, category, and content data can then be accessed via the Commerce API Layer.

Salesforce PWA Kit

The Salesforce PWA Kit is a React-based Progressive Web App (PWA) and part of the Composable Storefront with the other part being the Managed Runtime.
It provides out-of-the-box project templates, routing, and an integration with the Salesforce Commerce API Layer, consisting of the B2C Commerce API and Open Commerce API (OCAPI).

Relevant data is fetched through the Commerce API Layer and then displayed in the Salesforce PWA Kit. As the PWA is embedded in the ContentCreator through an iframe, the editor can preview the content and create, edit, and manage editorial content with the Omnichannel Manager. This is achieved by integrating the Frontend API client npm module that enhances the Salesforce PWA Kit with the needed functionalities to interact with the ContentCreator.

How to get started:
  • Set up and configure your Salesforce PWA Kit according to the Quick Start guide.
  • Follow the instructions in the Getting Started section of the Frontend API documentation to initialize the Frontend API in the entry point of your PWA.
Further information can be found in the Connect for Commerce documentation.

Deployment scenarios

For potential deployment scenarios, refer the the scenarios listed for headless commerce.

Salesforce recommends deploying the Salesforce PWA Kit to the Managed Runtime for improved speed and performance. Further information can be found in the Composable Storefront documentation.