Decoupled Drupal

Drupal Commerce 2.8 & Cart Flyout Module Updates

We recently released Drupal Commerce 2.8 and are excited to highlight some of the new features. We also published new releases of two key contributed modules that make lightning-fast, client-side Add to Cart forms possible, representing a significant improvement to the customer experience.

Drupal Commerce 2.8 adds BOGO support

The most significant new feature in the 2.8 release is the “Buy X, Get Y” offer type funded by Norwegian Drupal agency Ny Media. You can now configure promotions with just core functionality that grant free or reduced price products after a set number of other products have been added to the cart. This work required a re-architecture of parts of the promotions data model and a redesign of the user interface to make it easier for merchants to create promotions in general.

Configuring a BOGO promotion

Other key updates and improvements in this release include:

Read the release notes to get the full scope of additional updates and also to learn about some backward compatibility breaks that affect custom promotions, custom tax types, and order processors. We'll keep chipping away at the core roadmap and plan to add query-level entity access to the API for the next release.

Commerce Cart Flyout “Add to Cart” Update

The newest release of the Cart Flyout module includes notable updates to its JavaScript based “Add to Cart” feature. In addition to powering an editable shopping cart in a “flyout” sidebar, it now improves the Add to Cart experience with a very fast client-side solution using resources defined by the Commerce Cart API.

The standard Add to Cart form uses Drupal’s Forms API to update form elements based on attribute selection. It can submit three to four Ajax requests on average while customers select a product variation, but the new module can build, update, and submit the form purely in the client via JavaScript. Because the server sends the browser all the data it needs to build the interactive form in the initial request, we're able to avoid any additional requests to the server until the customer is actually ready to initiate the Add to Cart. Check it out:

Even under high visitor load, users will have a faster experience overall. Server resources are only devoted to users who decide to convert. Casual visitors can browse and modify product variations as much as they like and not affect other users’ load times. This is yet another step on our path toward providing a progressively decoupled eCommerce solution for the community to build robust experiences for merchants and consumers.

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.

Introducing the Cart API for Drupal Commerce

At the end of February, I began working on an series of API endpoints that would allow for a progressively decoupled cart experience. There are a few reasons why we decided that Drupal Commerce needed an API solely for the cart.

  1. Performance: when a cart block is rendered on the server it has complicated cache metadata. Cart block contents vary per user and change too often to be cached effectively. As such these blocks incur heavy logic and rendering costs.
  2. Flexibility: modern consumers expect interfaces to be more reactive and match common UX patterns. These patterns almost always require client-side implementation using JavaScript that communicates to backend APIs.

In my last blog I brought up why the API-First and JavaScript Modernization initiatives matter to Drupal Commerce. I wanted to target something limited in scope that would provide big wins for Drupal Commerce users as we ventured into the fully and progressively decoupled Drupal realm.

As a result, we now have the Commerce Cart API module. Our first implementation will be the Commerce Cart Flyout module, which uses the RESTful endpoints provided by the Cart API module to create the dynamic cart interface shown in the sample animation below.

Demo of the cart API with the upcoming flyout module

This moves us decidedly down the path of providing Drupal Commerce users with progressively decoupled components that improve the customer experience. In a following blog post, I’ll going to write about what it was like to build this module. (Hint: we didn’t “just do it” and release it into the Drupal.org namespace.)

I am planning on experimenting with more areas that we can perform progressive decoupling and look forward to connecting with folks about the topic at Decoupled Drupal Days in August. You should meet me there to join in the conversation!

Subscribe to Decoupled Drupal
X
In 2019 Commerce Guys rebranded to Centarro.

Change is at the center of eCommerce, but our team and mission remain the same.

Our consulting, development, and support offerings apply our expertise to help you adapt to change and grow.

Find us now at: https://www.centarro.io