Headless commerce

This document assumes familiarity with headless content delivery.

Product description

Connect for Commerce is a connector that extends the powerful and flexible Crownpeak CMS (FirstSpirit) with e-commerce functionalities that can be used in combination with any Progressive Web Application (PWA).

Connect for Commerce enables the connection to any e-commerce store system and, in combination with FirstSpirit and a PWA, offers a modern, scalable, and future-proof e-commerce experience. With Connect for Commerce, content can be integrated into any headless system on the commerce side.

High-level architecture

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

System components and their interactions

Connect for Commerce module

The Connect for Commerce module receives the product, category, and content data from the Connect for Commerce bridge and displays them in the product, category, or content report of the ContentCreator where the editor can use it freely for the creation of content.

Bridge

The bridge is a service that fetches the available product, category, and content data from the shop using its API and makes it available to the Connect of Commerce module. It can be a separate (micro-)service or part of the shop itself. What is important is that it offers the API scheme that the Connect for Commerce module expects.

It may include the Bridge Commons npm module that contains the OpenAPI specification of the Bridge API and common parts that are used to simplify the bridge implementation. This is entirely optional.

You can either choose to implement your own bridge against your shop backend or use one of our reference implementations on GitHub. To get started on the bridge implementation refer to our documentation.

Frontend API backend

The Frontend API backend is a service that connects the PWA with the CaaS and Navigation Service to fetch the editorial content and site structure that is managed by FirstSpirit.

It uses the Frontend API server npm module to fetch, transform, and enrich data for an optimized use in the frontend. Additionally, it hides the API keys that secure the content from the client and validates the source of the request to enable editing mode in the preview.

You can either choose to implement your own service against your CaaS and Navigation Service instance or use our reference implementation on GitHub.

Frontend API client

The Frontend API client is an npm module that is part of the Frontend API and serves multiple purposes:

If the preview mode is detected, it enables content editing of the preview content in the ContentCreator using the Omnichannel Manager.
It passes on editorial and structural data from the Frontend API to the PWA and enhances it with functionalities to interact with the ContentCreator.

Frontend API server

The Frontend API server is an npm module that is part of the Frontend API and needs to be integrated into the backend service that fetches the editorial and structural data of the FirstSpirit project.

It provides an interface that uses the remote API of the JavaScript Content API Library to easily process, preview, and release data coming from the CaaS and Navigation Service.

Shop backend

The shop backend is the central part of the shop. It takes care of everything that should not run on the frontend, such as persisting data.

Storefront

The storefront is the frontend of the shop and the customers touchpoint to the system.

How to get started:

Set up your PWA.
Install the Frontend API client module.
Initialize the Frontend API in the entry point of your PWA. The required steps are documented in the Getting Started section of the Frontend API.

Further information can be found in the Connect for Commerce documentation.

Deployment scenarios

You can consider multiple deployment scenarios, including but not limited to:

Deploying your Connect for Commerce microservices, such as bridge and Frontend API backend server, as well as other services to a Kubernetes cluster.
Deploying your Connect for Commerce microservices, such as bridge and Frontend API backend server, as well as other services using a hosting service like Netlify.
Adding Connect for Commerce microservices, such as bridge and Frontend API backend server, as well as other services to your store infrastructure similarly to the existing services needed for your composable strategy.