Improving Shopping Cart UX with Commerce Cart Flyout

Last week we announced the Commerce Cart API module with a goal of facilitating new patterns for Commerce 2.x shopping cart management. As far back as the launch of Lush's UK store, we began seeing more sites adopt one such pattern where the cart block just shows an icon or the number of items in the cart but clicking on it expands a sidebar that lets customers update the cart contents via JavaScript interactions:

Lush UK cart flyout

We saw this more recently with a similar feature on the Orlo watches website launched by our friends at 1xINTERNET:

Orlo watches cart flyout

We expect each successive Drupal Commerce release to cut down the number of things every site developer has to do to launch a new store. Providing a general solution to this cart paradigm would do just that! We received positive feedback on the cart flyout at DrupalCon, so building on the Cart API, we have now released Commerce Cart Flyout to provide a progressively decoupled cart block and form, which gives customers a more modern cart update experience.

What does the Cart Flyout module do?

  • Provides a new cart block which triggers the cart form flyout.
  • Allows quickly changing quantities of an order item.
  • Allows removing order items without a page refresh.
  • Gives flexibility for design and interaction that is not limited by Drupal's Form API and rendering layer.

What is next

  • Provide better user feedback when an operation occurs, such as dimming the form when the auto-update happens.
  • I would love to see the add to cart message's "your cart" link trigger the flyout.

Check out the demo video!

Demo of the Cart Flyout module

How is it built?

In discussion with Bojan, we decided to use Backbone.js and Underscore.js for the implementation since they ship with Drupal core. Yes, it was a journey back in time, but it also provided a way to ship a contributed project without introducing an additional dependency for end users.

The module stores Underscore.js templates in Twig files that register to the theme registry. The decision to use Twig and the theme registry allows themes to customize the template and markup. We do this for our demo theme Belgrade, which you can see in its code repository: http://cgit.drupalcode.org/belgrade/tree/templates/commerce/cart.

In fact, I used a ReactJS implementation to test the underlying API and prototype this module. If you’re interested, see the test sub-module in the Cart API repository.

Senior Drupal Consultant
Posted April 27, 2018

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <p> <br>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.