How to Decouple Drupal Commerce to Deliver Richer Shopping Cart Experiences: Useful Modules

Just imagine it: Drupal 8's robust features as a CMS, the flexible e-commerce functionality of the Drupal Commerce ecosystem and a JavaScript framework for the front-end! All in the same native mobile app! You can easily achieve this “combo” — a reliable content repository & a JS-based front-end providing a fantastic shopping cart experience — if you just... decouple Drupal Commerce.

For why should you trade Drupal's battle-tested content authoring and administration tools for a more interactive user experience? 

And why should you give up on your goal to deliver richer cart experiences just because Drupal 8 can't rival the JavaScript in terms of advanced native mobile app functionality?

 

• push notifications
• complex shopping options
• enabling users to manage their own delivery times and places
• ... to configure various aspects of their orders and so on
   

Just leverage a decoupled Drupal Commerce strategy in your shopping app project and you can have both:

 

• Drupal as your secure content service 
• the front-end framework of your choice “in charge” with the user experience 
   

In this respect, these are the most useful Drupal tools at hand for implementing an API-based headless architecture:

 

1. Headless Commerce Comes Down to...

… separating your commerce stack (back-end content handling area, data store etc.) from the user interface.

Or the “head”, if you wish.

The presentation layer would “retrieve” content from the back-end content storage area and is the one fully “responsible” with delivering fantastic user experience.

This way, you're free to choose your own front-end tools.

Now, why would you consider choosing a decoupled architecture for your e-commerce solution? The benefits are quite obvious and not at all negligible:

 

• higher flexibility and scalability (that JS frameworks are “famous” for)
• freedom to customize your app to your liking (for every platform or/and device)
• richer, more interactive shopping experiences 
   

2. Decoupled Drupal Commerce... Out of the Box? The Commerce Demo 

Narrowing our focus down to... Drupal, to Drupal Commerce, more specifically, the question's still there:

“How do I decouple Drupal Commerce?”

Considering that:

 

• there are specific challenges that such a decoupled front-end architecture poses
• Drupal solutions like Forms API and Views won't fit your specific (probably quite complex) design implementation requirements
   

Luckily, the Commerce Guys team has already faced and solved these challenges.

First of all, they've put together the Commerce Demo project, a store providing default content to be “injected” into Drupal.

Secondly, their attempt at integrating a design meant to support advanced functionality, for richer shopping cart experiences, resulted in 2 new modules:

 

• Commerce Cart API
• Commerce Cart Flyout
   

More about them, here below...

 

3. Useful Modules to Decouple Drupal Commerce 

Here's a collection of the most... relevant modules that you could use in your headless Drupal Commerce project:

 

3.1. The Commerce Cart API Module

It's no less than a handy Drupal tool that enables you to custom build your shopping cart widget. 

 

3.2. The Cart Flayout Module

The go-to module when you need to ajaxify the “Add to cart” form in your shopping app.

Basically, what it does is:

Provide a sidebar that “flies out” once the user clicks the “Add to cart” button or the cart block.

If I were to dive into details a bit, I'd add that the flyout enables users to:

 

• view the products in their shopping carts
• remove all the items there
• update the quantity of a specific item
   

Should I add also that Cart Layout comes with no less than 9 different Twig templates, for various parts of the module? By leveraging Drupal's library management feature you can easily override these JS segments of the module.

And not only that you get to customize it to suit your needs entirely, but:

 

• it comes with a well structured JS logic
• it's built on top of Backbone
   

… which translates into an efficient models-views separation.

 

3.3. Commerce 2

Use Drupal Commerce 2 as the core structure of your e-commerce project.

Being an ecosystem of Drupal 8 modules and “spoiling” you with unmatched extensibility via its APIs, Drupal Commerce empowers you to implement all kinds of headless commerce scenarios.

It enables you to use Drupal as your content/data (user and order-related info) repository and to easily serve this content to your mobile app. To your end-users.

 

3.4. The Commerce Recurring Framework Module

Some of its handy charging & billing features include:

 

• configurable billing cycles
• configurable retries in case of payment declines
• both prepaid and postpaid billing systems
   

3.5 The JSON API & JSON API Extras Modules   

Need to decouple Drupal Commerce, to enable a full REST API in JSON format? 

It's as easy as... enabling a module (or 2 at most): the JSON API module.

What it does is:

 

Expose the API so you can vizualize the data in JSON format.

 

And Drupal's built and perfectly adapted to support JSON API, which turns it into the go-to option when you need a back-end content repository for your headless shopping app.

In addition to this module, feel free to enable JSON API Extras, as well. It comes particularly handy if you need to customize the generated API. 

It allows you to:

 

• override the name of your resources
• change their path...
   

You'll then have a specific place in your app's user interface where you can visualize your content paths.

Once you have your data in JSON format, safely stored in your back-end content creation & moderation Drupal area, you're free to... serve it to your mobile shopping app!

 

The END!

And these are some of the already tested tools and techniques to decouple Drupal Commerce so that you can deliver richer, more interactive cart experiences.

Have you tried other modules/methods? Writing custom JavaScript code... maybe?