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.
What did we want to achieve?
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.
Solution
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.
Advantages
Implementing a Headless architecture enabled us to separate (decouple)
responsibilities between the presentation layer (Storefront), the CMS, and
the e-commerce backbone.
One of the biggest advantages of using a headless
approach is that only the end consumer (web-app, mobile app) will be
responsible for the presentation logic. This solution's usability is also a
big advantage since it’s very easy to configure and modify content by a
non-technical person.
Disadvantages
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.
Conclusion
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.