Decoupled Drupal Commerce as a new trend for online stores
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?
Decoupled approach as a priority for Drupal Commerce
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.
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.
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 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 omni-channel 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
So entrust us with any kind of tasks in this area — from decoupling your commerce to creating a new decoupled website from scratch.