No-code eCommerce platforms from the headless world

The worlds of designers and developers are totally different realms. However, they do overlap quite often—which can cause conflicts and frustration. Actually, there is a way to meet in the middle: no-code eCommerce platforms.

Why does the no-code movement matter?

How often have you heard that to put a single banner at the top of a page requires two hours of developer time and then a long wait for a deployment window in order to get it published? It’s a pretty serious issue when it comes to time-sensitive marketing. 

More and more brands leverage storytelling to represent themselves. When it comes to telling real-time stories, your visual content editors need reliable tools. 

The rising need for “No-Code” platforms is the trends we are observing right now. “All-Inclusive” monolithic platforms are disappearing and the future is moving towards architecture-driven platforms rather than feature-driven solutions.

No-code platforms: how do they work?

A No-Code platform usually leverages separated layers:

1. they provide the users with an interface which lets them build the whole application/website without entering a single line of code by providing them with a set of components,
2. they provide developers with the APIs to create these components the way they like, without compromising the clean-code/optimized UI qualities.

Separation of concerns

WYSIWYG editors are among the least liked tools used by developers. They often mess up HTML code and bring to mind MS Word-generated HTML of the 2000s. Of course, WYSIWYG-based tools have improved over time but working with visual editors, just like WYSIWYG, requires additional work and effort. I'd say it is because visual content editors cannot provide a sufficient separation of roles and styling, which is important for content editors. 

On the other hand, frontend developers like to take full control over rendering and optimization of the content to the end-user devices. They don't need to care about edition details and styling defined by editors which often cause trouble with proper display of the content. 

This conflict can be easily solved by generating static pages with the right separation of concerns that ensures the proper display of the content by its semantic meaning. In this case, the edition and rendering of the content are separated.

Headless CMS data flow

Modern CMS solutions like StoryBlok, Shopware Experiences, Hybris SmartEdit (to name but a few) separate the concerns in a very clever way.

The Shopware PWA product that we’re building for Shopware 6 is one of the examples here. The data flow for the Customer Experience CMS is presented on the flowchart below:

The general idea is that the user uses a WYSIWYG page builder in order to compose the pages from pre-built components. The components are rendered as they appear in the editor; however, to make them appear in the production site makes the process a little bit more complex.

First, each building block/widget is represented by a single Vue.js component. The data for those components is provided by JSON documents. The components are dynamically instantiated by the Vue Storefront Next rendering engine and fed with the JSON data. The components are optimized and created by developers but managed by content editors.

This new approach totally differs from the WYSIWYG editors we all know from the early 2000, in which you just edited a bunch of HTML tags and styles. Shopware6 CMS is 100% semantic and you edit documents rather than their visual representations.

Mashup

Another story is how to merge the statically designed components with dynamic data (for example product stocks and prices).

There are different ways of achieving the same result. Actually putting the dynamic data into CMS content is rarely a good idea as it changes a lot and will be hard to maintain regarding the caching strategies.

A better option is probably to include the category/product references (IDs) so the frontend engine can automatically mash-up the product data with the static content (and include actual product information as it came from PIM/eCommerce backend).

Examples of no-code eCommerce platforms

The examples provided above are based on the Shopware PWA development of Showpare 6 customer experiences. Other frameworks and tools which support similar integrations are: 

• Spartacus for Hybris/SAP Commerce Cloud  - which integrates Smart Edit CMS with set of Angular UI components representing the widgets,
• Adobe Experience Manager integration with Vue Storefront,
• Coremedia integration with Vue Storefront including a dynamic preview,
• Storyblok  - WYSIWYG editor integrated with the Vue Storefront components.