SAP Commerce Cloud JavaScript Storefront

Recently I joined a 3 month fellowship in Spartacus Team at SAP. This blog covers some information about what I learnt about this product during the program.

What is Spartacus?

Spartacus is a lean, single page, Angular-based JavaScript storefront for SAP Commerce Cloud. It talks to SAP Commerce Cloud exclusively through the Commerce REST API. Spartacus is designed to be upgradable while maintaining full extendibility and intended to be fully compliant with the Progressive Web Application (PWA) checklist. 

To get up and running with Spartacus, the recommended approach is to build your storefront application from ready-made libraries. 

Spartacus currently can only be used with a SAP Commerce Cloud instance through Commerce APIs.

For more information you can check Building the Spartacus Storefront from Libraries guide.

What technologies are used in Spartacus?

Spartacus is using the range of new web technologies like Angular, TypeScript, RXJS, ngRX, Redux, SAAS, etc.

How we can customize CMS Components in Spartacus?

As an example, here I would explain how we can customize CMS components in Spartacus.

-Rendering process

As an example, here I would explain how we can customize CMS components in Spartacus. The Spartacus storefront is based on JavaScript, and accordingly, it is composed of a large number of fine-grained JavaScript components. However, there is a special kind of component to render CMS content. CMS components are dynamically added at runtime. The CMS component type, given by the back end, is mapped to an equivalent JS component. Unfortunately backend does not provide all the information to render a page and some of these configurations required for rendering are stored in Layout configuration file. Layout config contains information about page templates and slots within them. The slots contain CMS components and the information about components attached to slots comes from the backend.

In addition, component-specific business logic can be customized. This requires an additional configuration where the custom service can be provided to the (default) component.

Below diagram shows how the rendering process is done:

-Configuring Custom Component

So let's assume we want to map a component to our custom one.

We need to create a new component module and Configure the mapping. The key is the component type code that comes from the backend. And value is the component class that the component is mapped to. In the end we have to add the component to the entry components as this component will be loaded dynamically.

-Component data

Components can have data attached to it. For example banner component has information about its media.

-Accessing CMS Data in Custom Components

The CMS data that is related to a component is provided to the component by the CmsComponentData service during instantiation. The CmsComponentData service contains the component uid, and also data$, which is an observable to the component payload. By making use of the Angular dependency injection (DI) system, components and component-specific services can use the CmsComponentData.

In order to understand what data type is assigned to what component type, we can check that in the network tab of the dev tools to know what data do we expect.

-Controlling Server Side Rendering (SSR)

We might not want to render all CMS components in the server. The following are some examples of when not to render a CMS component in the server:

• a CMS component requires personalized input and should not, or cannot, be rendered without it
• a CMS component is not required for SSR output, and for performance reasons, it will be removed from the rendering process
• a CMS component interacts with external services (latency) and is not relevant for indexing and social sharing

While it is possible to add conditional logic in a component to render (parts of) the view in SSR, Spartacus offers a configuration for components to make this more generic, and to avoid any specific logic in components. The following is an example:

In Summary:

Spartacus will give you a good jump start to create your own javascript storefront, it is a open source and it uses latest front end development technologies to provide upgradability, cloud readiness and scalability.

If you have technical questions, you can post your question on Stack Overflow. For non-technical questions, you can reach the team on their Slack workspace.

For more information about how you can contribute to the project See Contributing to the Spartacus Storefront for more information.