Spartacus Storefront – The Future of SAP Commerce!

Written by Abdul Wahab

Hybris Practice Lead at Royal Cyber

In a traditional eCommerce system, the front end, where customer directly interacts with your business, is tightly coupled with the back-end that deals with the database, code and integrations. What this means is that any changes required to the storefront need changes in back-end as well. There are many limitations on what can be changed or updated without significant risks or that would affect future updates.

With the emergence of Headless commerce, we now have a more powerful and versatile architecture. Developers can develop a new frontend from scratch or use the existing frontend depending on their needs. With users interacting with content in new ways, traditional CMS might not be enough for many companies.

SAP Commerce Cloud has a dedicated headless storefront catering to both B2C and B2B businesses.

What is Spartacus?

Spartacus is a free JavaScript storefront for SAP Commerce Cloud. It is an opensource project that anyone can access by downloading the source code freely. It is also published as a set of libraries that can be used to create a branded storefront app - import the published Spartacus libraries into the custom app, change styling, add features and publish the branded storefront!

Spartacus storefront pulls products and content from the back-end as needed. It is a single page application where the first page loads and the rest is driven by code. This has inherently good performance as Spartacus only loads the parts of the page that require updating. The whole page is not reloaded whenever something changes. This also provides a good user experience not just because of the speed, but also because you control everything in the UI.

Why would you use Spartacus?

With Commerce Cloud, you get JSP-based templates that are provided as part of the Accelerator storefronts. Then why would you move or start your project with a Spartacus based storefront?

Here are some of the key benefits.

  • Decoupled architecture - Spartacus storefronts are decoupled from SAP Commerce Cloud instances, allowing you to completely separate front-end and back-end development. Spartacus app runs on its own server node and makes OCC REST API calls to SAP Commerce Cloud backend servers. The benefit is that you can update Spartacus app separately when you update the platform, and you can also scale and cache different servers independently from each other.
  • Upgradable - Since Spartacus is published as libraries, upgrades are totally under the user’s control. The architecture of Spartacus ensures compatibility. It is configurable and extendable. That means you can add your functionalities or hide the existing ones based on your needs.
  • Faster Implementation - Spartacus is fast to develop for and it is a PWA, a Progressive Web App. It supports SEO even though that it is a single page application.

Extending SAP Commerce – SAP Cloud Platform Extension Factory

Source: SAP

CMS-Driven

Spartacus is driven by Content Management System (CMS). It has slots that you can edit with SmartEdit and builds with Commerce Cloud V2. It provides a great way to style the entire storefront using global variables and also has very specific selectors that allow you to configure specific sites in the storefront.

Spartacus supports all responsive components. When Spartacus gets information about a custom CMS component, you must also add to your storefront custom JavaScript that knows how to handle that custom CMS component information otherwise the custom CMS component won’t appear.

You can replace parts of Spartacus with static content if needed. However, adding static content to Spartacus may make your app less flexible and maintainable. If designed well, the same Spartacus app can work for multiple SAP Commerce Cloud stores.

Spartacus Storefront is Easy to Create

There are some prerequisites to create a Spartacus storefront. Have an SAP Commerce Cloud Backend running, preferably 1905, but you can also use 1811. It is configured to accept OCC (Omni-Commerce Connect) REST API calls to communicate with SAP Commerce Cloud environments. Your development environment is to be set up for angular coding.

The endpoints used in OCC adapters can be configured so that the customization of Spartacus can be very lightweight.

The primary step in creating the first Spartacus app is to create an angular app, add the dependencies that Spartacus requires to configure the app to use the Spartacus storefront module, and then add the default styling localization. It is better to use libraries to maintain upgradability.

Creating a Spartacus storefront is very fast and easy.

API Driven

Spartacus was designed in a way that it depends on SAP Commerce Cloud for all its product and content data. Some examples of the data that comes from SAP Commerce Cloud are catalog data, including product name and description, prices for products, images for products, stock and stock numbers, and the categories that the products belong to. Spartacus takes that data and controls how it is displayed and how the overall app works.

Whenever you search with Spartacus, the search is sent to the back-end and the result is sent back. Same with category results as well as facets. SAP Commerce Cloud controls all the cart calculations and checkout. CMS content – page layouts, logo, banners, carousels, header layout are handled by SAP Commerce Cloud back-end. Authentication and account settings are also controlled by the same. Nothing is stored in Spartacus itself.

With back-end handling these, the same Spartacus app can be used to point to different base sites. Decoupling also allows to use services developed outside SAP Commerce. These services would be implemented as separate microservices. These microservices can be hosted on any platform: for example, Azure, AWS or SAP Cloud Extension Factory can be used.

To conclude, Spartacus allows you to quickly create a fast, engaging PWA storefront for SAP Commerce Cloud, resulting in a delightful customer experience that increases conversion and revenue.

Future-proof your business

With growing customer expectations, content delivery is going to be of utmost importance. By moving to Spartacus, you can make sure that your business is moving in the right direction. Spartacus is the future and, the expectation is that within a few years, we will all stop using JSP-based accelerators and use Spartacus. SAP itself recommends using an open-source JavaScript-based Spartacus Storefront for an SAP Commerce Storefront.

Royal Cyber

Our dedicated team of SAP Commerce at Royal Cyber can help you with future-proofing your business.

For more details, you can email us at [email protected]

Also, check out the below URL to know more about our SAP Commerce services

https://www.royalcyber.com/technologies/sap-commerce-cloud-hybris

In a traditional eCommerce system, the front end, where customer directly interacts with your business, is tightly coupled with the back-end that deals with the database, code and integrations. What this means is that any changes required to the storefront need changes in back-end as well. There are many limitations on what can be changed or updated without significant risks or that would affect future updates.

Leave a Reply