API-First

Enabling headless Drupal Commerce while improving its core

The Drupal community has been abuzz for the past two years with talk of "Becoming Headless" or "Decoupling All The Things." The trend raises reasonable questions from end users who feel this means Drupal is moving into a space that no longer represents them. We hear similar concerns from Drupal Commerce users when we talk about delivering headless commerce. However, we don't believe anyone should be worried that improving support for Drupal as a REST API server will detract from efforts to improve its utility as a traditional CMS.

From our perspective, you can (and we do) support at the same time both traditional applications, where Drupal itself provides the front end, and headless applications, where a JavaScript application renders data served from a Drupal powered REST API. In fact, in this post I'll demonstrate how supporting the latter has actually improved Drupal (and Drupal Commerce) for everyone. Headless initiatives help uncover bugs and fine-tune the underlying application architecture.

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!

Drupal Commerce needs API-first and modern JavaScript in Drupal

Drupal core has two initiatives that are helping modernize our platform and make it easier to work with. There is the API-First Initiative and the proposed JavaScript Framework Initiative. While separate, these two initiatives have a big and somewhat overlapping impact. Together they will make Drupal an even greater eCommerce platform and allow us to do more amazing things with Drupal Commerce.

What is API-First, and why should it matter?

API-First

The initiative has a simple purpose: make it easy for the data managed by Drupal to be consumed anywhere. A common need driving the initiative is the usage of Drupal with a decoupled frontend — i.e. where a JavaScript library or mobile app is rendering content from Drupal but Drupal itself has no part in the render process.

We have our own hot buzzword in the eCommerce realm: omnichannel. What does omnichannel mean? Well, it’s this idea you’re selling anywhere and everywhere. Your products are controlled in one location and appear on Amazon, Walmart.com Marketplace, Google Merchant Seller, custom mobile apps, in-store kiosks, etc. You manage your products in Drupal and push the relevant data out. The API-First initiative will make it easier to integrate with these kinds of services.

It also expands what Drupal Commerce can be, beyond just a full-stack store. In one recent case study, Running a Billion Dollar Business on Drupal Commerce, Drupal Commerce was used in a micro-service architecture. Drupal Commerce has the data model act as a product information manager, inventory management, an order workflow manager, and more — all the components you expect out of an ERP and tools Drupal Commerce users generally already use. The API-First initiative can make it easier to interface with Drupal and allow Drupal Commerce to serve in these capacities.

read more

Subscribe to API-First
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