Using the SAP OCC API and Contentstack for Custom Storefronts

Seeing the growing popularity of Headless architectures, we wanted to explore the available solutions, focusing mainly on the e-commerce industry. In our journey, we wanted to build a custom storefront using two popular headless technologies: Omni-Channel Connect (OCC) API as an e-commerce API and Contentstack as our headless CMS API.

On the technical part, our goal was to deliver a PoC that can have a simple yet extensible template engine built upon page templates that have dynamic and static content slots. From a content editor’s point of view, we wanted a simple and intuitive way of customizing templates and publishing new content.

We started off exploring Contentstack’s core features while trying to understand the architecture and the available integration features. Thankfully their documentation was rich and gave us a solid understanding of the solution.

First of all, we spent some time identifying all the moving components of a Page Builder application and mapped them with Contentstack’s out-of-the-box components. This resulted in a robust architecture with many customization and extension possibilities through Contentstack’s admin panel.

We ended up defining different Page Templates for each layout that we usually have on a storefront. Each template would provide slots where any type of components (OOB, custom) could be placed. Every page structure would consist of the type of the page (layout) and the list of slots with the configured components.

After having the Page Templates ready, we started modelling our custom components. Some of these components should be customizable from the admin panel ( eg. Banner, Image Gallery), others would be only placeholders (eg. Add to Cart button, Stock info). Some of the configurations of the components would require 3rd party dependencies. This was the moment where the OCC API would need to be consumed from the Contentstack Admin Panel. Luckily, Contentstack provides an SDK for developing custom fields so we could upload our own javascript to communicate with the OCC API layer.

With the page templates and the custom components ready, we quickly defined and configured some basic pages (Landing Page, Details Page) in Contentstack, so we could start consuming the Headless CMS.

Since there are no limitations regarding programming languages to consume both CMS and OCC API, we built an Angular application, which was able to map CMS page contents to Angular components.

Implementing a Headless architecture enabled us to separate (decouple) responsibilities between the presentation layer (Storefront), the CMS, and the e-commerce backbone.

The cost of getting a flexible solution is increased complexity, there are more systems to keep track of. It can also get more expensive, as you pay for another service.

A Headless CMS solution like Contentstack can be used as a simple yet extensible template engine, which from an editor’s point of view is intuitive and straightforward when customizing templates or publishing new content.