Online stores with decoupled architecture have all the chances to gain more happy customers. How does this work? Let’s see in this post. The “decoupled” or “headless” architecture is an increasingly popular trend in the Drupal world — especially now that the JSON:API module is in the core. So welcome to this review of the principles of decoupled Drupal Commerce and how it helps online stores engage users.
What is decoupled Drupal Commerce?
In decoupled, or headless Drupal Commerce, the presentation layer is separated from the e-commerce backend. Fast and reactive JavaScript interfaces communicate with powerful Drupal backends via a REST API. Decoupled, or headless architecture gives developers unlimited flexibility to create enhanced shopping experiences.
Decoupled approach as a priority for Drupal Commerce
Commerce Guys, the creators of Drupal Commerce, clearly focus on JavaScript-based solutions for online stores. They have a special team engaged in this area, including lead developers Bojan Živanović and Matt Glaman.
The team keeps polishing Drupal Commerce for headless setups and improves Drupal core in this process as well. They complete the documentation, help developers with their projects, and create an ecosystem of contributed projects in the “decoupled” sphere. Among them:
- Commerce Demo project filled with content.
- Contributed modules: Commerce Cart API, and its reference implementation — Commerce Cart Flyout for progressively decoupled cart experiences.
Let’s see in more detail, with examples and quotes, what benefits make decoupled Drupal Commerce deserve so much attention.
The benefits of decoupled Drupal Commerce
Super high speed
“One thing we’ve all heard about it is it's fast and reactive. You get a quicker response time and the person is more engaged. Customers have an attention problem, so they get easily distracted on a website. So the faster you can give them what they want, the more likely they are to give you their credit card.”
Nothing to add to the words of Matt Glaman, the main creator of the Commerce Cart API and the Cart Flyout modules. He shared this in his speech “The road to a headless Drupal Commerce future” at Drupal Europe 2018.
It is already a known and undoubtable fact that JavaScript front-ends are very quick. In addition, this setup does not overload Drupal, which is reflected in performance.
Matt Glaman said his demo’s product page began to load faster from 130 milliseconds to 60 milliseconds with the decoupled cart. One of the reasons was Drupal no longer had to render a form. All actions with the cart are done on the client side and do not involve the Drupal rendering system.
“The pages are so much faster now because we don’t have to be concerned about Drupal rendering a form or the cart block and all this extra data,” said the developer.
It’s nice for performance that caching can be done without Drupal. According to Matt Glaman, “your product page can be behind the Page Cache module or behind Varnish, and you never have to hit the server to render the cart form, because the JavaScript will do it for you.”
Rich and interactive features
Decoupled Drupal Commerce allows developers to enrich the shopping interfaces with interactive features. Users who enjoy the shopping are more likely to make conversions.
Among these features are:
- push notifications
- real-time updates for the shopping cart and all the other forms
- real-time previews with changed product attributes (like the clothing colors)
- the ability for the customer to change the order details without the page reloading
and much more.
For example, on the Commerce Demo project, every time a user clicks “Add to cart” or clicks on the cart icon, the cart flies out and shows the contents. The price is updated dynamically as the user changes the product quantity. We see the Commerce Cart API and the Cart Flyout in action.
On the Eldum Rétt website, the price is dynamically updated when the user selects the package size, and the cart sidebar also flies out. This project uses a React Native app combined with decoupled Drupal Commerce.
Freedom in front-end changes
With a decoupled approach, front-end developers are free to implement experiments and changes to improve user experience and application design.
While implementing them, they do not interfere with the backend setup and do not have to worry about it at all. There is no need to edit the database and the code, or redeploy the ecommerce platform.
So, in addition to the flexibility of customizations, decoupled or headless Drupal Commerce saves your time and money. Even small changes in traditional setups would often require the editing of several layers of code.
Front-end technologies of your choice
Your headless ecommerce store can send its data to a mobile app, web app, static site, and so on. You can also enjoy omnichannel commerce with the same store data presented in many ways. Hence, the large choice of front-end technologies.
You will not be restricted with what is offered by only one platform. When combined, platforms multiply their benefits.
Your decoupled Drupal Commerce setup is here
If you are interested in decoupled Drupal Commerce tailored to your business needs, contact our Drupal team. We love to create online stores and work with the latest JavaScript technologies.
So entrust us with any kind of tasks in this area — from decoupling your commerce to creating a new decoupled website from scratch. We specialize in Headless Drupal Development to ensure your project is a success.
