Revealing the secrets of decoupled Drupal Commerce

17 Jan 2021

Decoupled Drupal Commerce secrets revealed

There is a technology that allows developers to upscale and speed up e-commerce sites and take their customers’ shopping experiences to a whole new level. It’s called decoupled Drupal Commerce. The Drupal development world is buzzing with discussions of this hot trend. Of course, the Golems Drupal team is happy to join in. Dear readers, our tour of decoupled Drupal e-commerce begins.

What is decoupled Drupal Commerce?

Decoupled Drupal Commerce is an architecture where your online store backend, or data hub of your e-commerce shop is separated from the user interface, or customer experience layer. Another frequently used term is headless Drupal Commerce.

In decoupled setups, Drupal serves as a robust content repository but is not responsible for the data rendering — it’s up to the front-end application. This is exactly what is necessary to take the load off Drupal and improve e-commerce site performance and interactivity level, including real-time cart updates, rich product previews with different attributes, flyout cart sidebars, and much more.

Decoupling can be full or progressive, the second option being more popular among developers. In progressive decoupling, Drupal’s rendering system remains involved, while a JavaScript front-end application (on React, Vue, Angular, etc.) takes responsibility for particular parts of the data output, making it faster and richer.

In general, decoupled setups with Drupal have been made seamless thanks to the special pack of integration modules in the D8/9 core (“Web services”). The creators of Drupal Commerce — the Centarro team, formerly known as Commerce Guys — are also building Commerce-oriented solutions for the decoupled sphere. Just some examples of a wide array of these solutions are these contributed modules for decoupling e-commerce carts:

  • the Commerce Cart API module — a streamlined API that deals with cart management and the add-to-cart process
  • the Cart Flyout module — a progressively decoupled cart implementation working on the client side

To showcase the progressively decoupled e-commerce carts, they created a demo project with decoupled Drupal Commerce, which is available to install via Composer for anyone who wants to explore what’s inside.

Why choose decoupled Drupal Commerce?

E-commerce website scaling

One of the key reasons you’ll want to use decoupled DC is to scale your e-commerce project, says Matt Glaman, the product lead at Centarro, in his “Decoupling Drupal commerce to multiply and scale the front end” presentation. He compares decoupled commerce to so-called full-stack e-commerce websites — the ones where the back-end data gets fully rendered on the front-end. This part tends to be very resource-consuming, so separating the presentation layer is really a great way to speed up e-commerce websites.

Fact & reactive interfaces leading to better sales

The ability of the decoupled approach to create faster and more reactive interfaces is incredibly important. Giving a quicker response to every e-commerce website visitor helps you make them more engaged and less distracted, which significantly improves the chances of a purchase. Matt Glaman discusses all this in his “The road to a headless Drupal Commerce future” speech at Drupal Europe. Decoupling is able to resolve even hard Drupal website performance problems related to caching, sessions, and more.

One backend, multiple front-ends

Decoupled DC also helps you set up multiple types of front-end applications and reach out to users of different devices while having just one backend data source in Drupal. According to Matt Glaman, this multi-tenancy may also come in very handy for creating branded and localized store versions for different markets based on different localization requirements, franchise rules, and things like that. Basically, each front-end can serve as its own store that is able to have its own dynamic pricing, product availability, currencies, purchasing rules, condition-based promotions, shipping information, and so on.

Chatbots in decoupled Drupal Commerce

One of the niches where decoupled Drupal Commerce perfectly fits in is conversational commerce, or chatbot building. Chatbots can transform your customers’ shopping experiences amazingly. For building them, you can use bot frameworks like Google’s Dialogflow, Microsoft’s Bot Framework, Wit.ai, IBM Watson, and open-source libraries like Rasa. At Decoupled Drupal Days, Developer Prateek Jain shared how he built a DC chatbot using the open source Bot Builder SDK for Node.js.

Drupal Commerce vs Ubercart: why not decouple UB?

While discussing decoupled e-commerce, we should mention that Drupal Commerce is just one of the two “engines” that can power Drupal e-commerce stores. The other option is Ubercart, and customers keep asking questions about modernizing or improving their stores based on it.

Both Drupal Commerce and Ubercart are comprehensive e-commerce solutions by Centarro. They are packaged as contributed modules, free and open-source just like Drupal itself. Both were designed for setting up online stores that are ready to go. Both are extensible with a wide array of add-ons.

However, it’s easy to notice that no one is talking about such a thing as “decoupled Ubercart” and all are focused on “decoupled Drupal Commerce” instead. Indeed, the growth, scaling, and modernization opportunities, including the decoupling option, are really different for these two platforms today. Let’s have a quick review of Ubercart and Drupal Commerce.

Ubercart

Ubercart was the first ever Drupal e-commerce solution, with its initial version released in 2007 for Drupal 5. Ubercart is pretty simple in content management, user-friendly, and self-explanatory, which made it an especially great product in the niche of small and simple stores. The default settings are ready to go, and important e-commerce functionalities such as payment and shipping are built in.

Currently, 20,500+ websites are using Ubercart. These numbers are quickly going down — for example, we had 61,000+ in March 2015. Well, what’s the problem?

The Drupal Ubercart module was flourishing at the times of D6, and even when ported to D7, it wasn’t thoroughly rebuilt. As far as Ubercart’s D8 version, it is still in alpha development, which makes it not ready for production websites. Moreover, it dates back to 2016, so we can see no signs of active development for Drupal 8/9.

All this means that Ubercart stores are stuck with D7 and cannot be using all the advancements of Drupal 8/9, including the solutions for decoupled technologies. To resolve this, you might ask our Drupal team to migrate your store from Ubercart to Drupal Commerce, as well as upgrade your whole website.

Drupal Commerce

The creators of Ubercart also built Drupal Commerce on its basis. It is more complex in its setup and structure compared to Ubercart, but at the same time it is extremely customizable and allows developers to fulfill any Drupal store functionality ideas. The creators say that DC was created with a framework mindset, so it focuses more on what you can build with it rather than what you can do with it out of the box.

The Drupal Commerce module had its first release in 2010 for D7. When Drupal 8 arrived, Drupal Commerce required a complete overhaul. In September 2017, Drupal Commerce 2.0 for Drupal 8/9 online stores came out as a stable version bursting with modern features. Today, there are 52,500+ websites using it, with the D8 share growing. DC is also compatible with D9. The dedicated team is actively working on the product’s development and optimization. The ecosystem of extra modules for Drupal Commerce is also growing.

A very efficient system of product types, variations, and attributes, robust payment APIs, smart tax calculation, and flexible promotions are just the beginning of the long list of DC’s capabilities. One of the top-notch options is also decoupled Drupal Commerce that we are now moving on to.

Get your decoupled Drupal Commerce setup!

The idea of decoupled Drupal Commerce looks very interesting. Would you like to get a quote from the Golems development team on decoupling your store? Yes, decoupled architecture is the best fit for Drupal 8 or 9 stores based on DC2 — but don’t worry if your shop does not fit into this description. Whatever platform your e-commerce site is based on or whatever Drupal core version you are using, Golems can start with helping you migrate/upgrade and get fully ready for decoupled e-commerce.

Happy decoupling!
Sincerely, your Golems