Shopping cart usability & Commerce Cart Flyout Drupal module

Shopping cart usability & Commerce Cart Flyout Drupal module

The shopping cart is a vital place in your online store, where the moment of truth often happens — the customer either proceeds to checkout or abandons the purchase.

The situation can be changed in favor of option 1 if you increase shopping cart usability. Among the nice Drupal 8 shopping cart modules, we would like to discuss one today. Its name is the Commerce Cart Flyout module in Drupal 8. Let’s see what it does in the usability arena!

The importance of shopping cart usability

Why all this fuss about usability? According to Statista, the global shopping cart abandonment rate is 69.57%. This means that less than a third of customers finish their purchases and more than two-thirds leave at this stage.

The shopping cart abandonment reasons are varied and are not always linked to usability. They can be related to:

  • Disagreeable terms. Users find the shipping costs too high or the estimated delivery time too long.
  • Lack of the customer’s readiness. They may not be completely ready for purchase and need to think some more.
  • Bugs in a shopping cart. Your customer may be annoyed with technical problems like discount coupons not working.

But “the moment of truth” in a purchase will also greatly depend on the shopping cart usability. Is your shopping basket easy to use, intuitively understandable, and enjoyable? To answer “yes,” you need to consider the aspects of shopping cart usability, some of which are as follows:

  • the shopping basket should be easily accessible from the store pages
  • its contents should be easy to edit and change
  • loading speed should be high because performance goes hand-in-hand with usability

All this and more is an easy task for the Commerce Cart Flyout module in Drupal 8 that will suit Drupal Commerce 2 online stores. See next about its features in the area of shopping cart usability.

The Commerce Cart Flyout Drupal module

The Commerce Cart Flyout contributed Drupal 8 module replaces the default cart with one that flies out in the right sidebar. The flyout happens whenever a user adds a product to the cart or clicks on the cart icon. The user can then proceed with viewing or editing the contents, which is great for usability.

They can change the product quantity and immediately see the updated costs. The sidebar can be closed, or the user can click anywhere on the page and the cart will collapse.

Shopping Cart Flyout Drupal 8 module

All these interactions are happening on the client side and do not overload the Drupal rendering system. They are entrusted to JavaScript for better usability. Read more about what exactly is improved.

Cart Flyout Drupal module’s benefits for cart usability

  • Very high speed. Users are impatient to get what they want, so give them a fast-loading cart. This is achieved by JavaScript being superfast and Drupal not being overloaded.
  • Immediate changes. All changes to the shopping basket are applied dynamically with no page reloading, which is a big usability advantage. Here, JavaScript is a winner again.
  • Quick availability. A sidebar flyout is very easy to access, and it looks very welcoming.

You can try the module in action on the demo website from the creators. Meanwhile, it’s time to take a little look under the hood of the module.

Shopping cart usability

The progressive decoupling architecture

The module implements the “progressively decoupled” approach. This is different from full decoupling, where the backend is fully separated from the presentation layer.

In progressive decoupling, Drupal still handles the front-end while JavaScript takes responsibility for certain portions of the page rendering.

The Commerce Cart Flyout module is based on the core JavaScript libraries — Backbone and Underscore. It works together with the Commerce Cart API module and also needs the core RESTful Web Services and Serialization modules.

Improve your shopping cart usability

If you are interested in boosting your shopping cart usability with the Cart Flyout Drupal 8 module, contact our ecommerce development agency for the implementation. Or maybe a Drupal Commerce store is only in your plans — in this case, we are ready to build it from scratch.

In any case, you will benefit — e-commerce is meant to be profitable, and web development tricks can boost this!

4 votes, Rating: 4

Read also


The Drupal 9 release is scheduled to come on June 3, 2020. One more big step has just brought it closer — the Drupal 8.7.7 version. In this blog post, we will tell you what’s new in it and...


Welcome on a tour of building users profiles in Drupal 8. Let's start from the basics and move on to a few tweaks with new core modules such as Media Library & Layout Builder.


If you want the visitors to settle down on your website and register, you definitely need a special tool to make both the registration and login processes easier and faster. Luckily, Drupal 8...


Editorial workflows in Drupal 8 are easy to create and manage. This is achieved by the Content Moderation and Workflows modules. These modules are Drupal 8’s innovation — they have appeared...


It’s exciting to see how once unimaginable things become popular digital practices! A vivid example is artificial intelligence. What about Drupal websites — are they ready for AI? The answer is a...

Subscribe to our blog updates