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.