Planet Drupal

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.

Introducing Centarro Toolbox at DrupalCon Seattle

Commerce Guys is joining forces with some of our Technology Partners and a variety of contributors to promote Drupal Commerce at DrupalCon Seattle from April 9-11, 2019.

We're excited to introduce the Drupal community to Centarro Toolbox, a collection of SaaS products and support packages that help Drupal Commerce teams build with confidence. First revealed at MidCamp last month, we can't wait to show it off to the community at large while also connecting about all things Commerce 2.x.

Come demo Centarro Toolbox (and grab some sweet swag)

Centarro Toolbox includes three of our own SaaS tools designed to complement any Drupal Commerce site. They provide update automation, code quality monitoring, and a sales and analytics dashboard that delivers key insights to merchants. We've also bundled in offers from our partners at Avalara, Human Presence, and Lockr, and we'd love to share all about them.

Read more about what we're bringing, giving away, and speaking about...

Eliminating barriers to Drupal Commerce growth

At the end of 2018, Dries Buytaert, creator of Drupal, asked folks involved with the project to share their thoughts on what's "holding Drupal back." His prompt came on the heels of two great blog posts related to his company Acquia's growth strategy and lessons he's learned and applied from Amazon's growth strategy. I didn’t beat his third post on overcoming Drupal’s obstacles to the punch, but the series did prompt me to think long and hard about the barriers we face as maintainers and leaders of the Commerce project within the Drupal ecosystem.

For the entirety of our existence, Commerce Guys has focused on building and promoting Drupal as an eCommerce platform, first through Ubercart and then Drupal Commerce. While eCommerce is a huge industry, our reach within the community has only averaged around 5% of all Drupal sites. Given the diverse and varied types of users Drupal serves, I consider this relatively low number unsurprising. (A certain percentage will also choose to integrate third party shopping cart systems, but historically that’s always been a fraction of the number of Drupal sites using our native solutions.)

It’s tempting to be fatalistic about Drupal Commerce’s growth and accept that our growth rate will be pegged to Drupal’s own growth rate so long as our relative percentage holds. It actually is an important baseline to acknowledge - our success is tied to Drupal’s success, and so we prioritize contributing to initiatives that help improve Drupal’s core APIs, make it easier to maintain and upgrade, and attract new audiences through API-first / JavaScript initiatives. However, I think we can and should do better than just waiting for growth to happen upon us.

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.

Scheduling time for maintaining Drupal Commerce integrations

Commerce Guys maintains a suite of ecosystem modules that give merchants easy access to third-party integrations as part of leading the Drupal Commerce project.

Historically, the issue queues for these modules were looked at when a client requested it or someone from our team had spare time, but that timing was pretty irregular. To provide developers and merchants with a better experience, we’ve decided that moving forward we’re committing dedicated time to review these third-party issue queues on a regular basis.

Human Presence protects Drupal forms after Mollom

On April 2, 2018, Acquia retired Mollom, a spam fighting tool built by Drupal founder Dries Buytaert. As Dries tells the story, Mollom was both a technical and financial success but was ultimately shut down to enable Acquia to deploy its resources more strategically. At its peak, Mollom served over 60,000 websites, including many of ours!

Many sites are looking for alternatives now that Mollom is shut down. One such service Commerce Guys integrated earlier this year in anticipation of Mollom's closing is Human Presence, a fraud prevention and form protection service that uses multiple overlapping strategies to fight form spam. In the context of Drupal, this includes protecting user registration and login forms, content creation forms, contact forms, and more.

Similar to Mollom, Human Presence evaluates various parameters of a visitor's session to decide if the visitor is a human or a bot. When a protected form is submitted, the Drupal module requests a "human presence" confidence rating from the API (hence the name), and if the response does not meet a configurable confidence threshold, it will block form submission or let you configure additional validation steps if you choose. For example, out of the box, the module integrates the CAPTCHA module to rebuild the submitted form with a CAPTCHA that must be completed before the form will submit.

We believe Human Presence is a great tool to integrate on its own or in conjunction with other standalone modules like Honeypot. Furthermore, they're joining other companies like Authorize.Net, Avalara, and PayPal as Drupal Commerce Technology Partners. Their integration includes support for protecting shopping cart and checkout forms, and we are looking for other ways they can help us combat payment fraud in addition to spam.

Learn more about Human Presence or reach the company's support engineer through their project page on drupal.org.

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!

Visit the Commerce Saloon at DrupalCon Nashville

Commerce Guys is joining forces with some of our Technology Partners and several contributing agencies to promote Drupal Commerce at DrupalCon Nashville from April 10-12, 2018.

We are colocating our booths to create the Commerce Saloon, your one stop shop to learn all things Drupal Commerce. Our booths will feature jam band instruments, multiple demos (including a new store theme), exclusive swag, and case studies to help you learn how teams are succeeding with Drupal Commerce.

Come try Drupal Commerce 2.x

DrupalCon Nashville is the perfect time to learn what's new by joining our week long sprint at the "Power Up" tables by the Commerce Saloon. We'll be training new contributors and working on the project together using sprint kits powered by DRUD's ddev local development environment.

We prepared the following sessions to help you learn more about Drupal Commerce and its ecosystem:

  • Contributing to Drupal Commerce (for beginners)
    Tuesday, April 10th, 12:00 PM | Commerce Saloon: "Power Up" Table | By: Matt Glaman
  • Drupal Commerce 2.x Update and Roadmap Planning (add it to your conference schedule)
    Tuesday, April 10th, 3:45 PM | Room: 203A | By: Ryan Szrama / Bojan Zivanovic
  • Marketing and Selling the Drupal Commerce Ecosystem (as seen at DrupalCon Vienna)
    Wednesday, April 11th, 10:45 AM | Commerce Saloon: "Power Up" Table | By: Ryan Szrama
  • Decoupled Drupal Commerce / REST APIs (for developers)
    Wednesday, April 11th, 3:45 PM | Commerce Saloon: "Power Up" Table | By: Matt Glaman
  • Subscriptions and Recurring Billing in Commerce 2.x
    Thursday, April 12th, 10:45 AM | Commerce Saloon: "Power Up" Table | By: Bojan Zivanovic

Hear from every Commerce Saloon sponsor

There's a lot to be said about how Drupal Commerce is making merchant and agency teams more productive, and you don't just have to take our word for it. Each Commerce Saloon sponsor has something unique to teach you about succeeding in eCommerce, and we encourage you to seek them and their sessions out:

  • Acro Media (Booth 803) - Test drive Commerce POS at their booth and hear its business case from Becky and Josh! You can also purchase (for free) a limited edition Drupal Commerce t-shirt through Acro Media's demo site.
  • Authorize.Net (Booth 911) - Authorize.Net offers several payment tools that let merchants get paid securely online. We've joined forces to demo Accept.js, their new drop-in solution for PCI compliant payment.
  • Bluespark (Booth 908) - Bluespark contributed significantly to Commerce 2.x development via their Sport Obermeyer project (check out their awesome case study) and have long promoted Drupal Commerce as a hotel booking solution.
  • Commerce Guys (Booth 809) - Stop by for a demo of Belgrade, our new default store theme for Commerce 2.x, or for a demo of, Lean Commerce Reports, our first SaaS product that offers a plug-n-play sales dashboard for Drupal Commerce.
  • Drupal Commerce Technology Partners (Both 811) - This booth features representatives and demos from Avalara and Lockr. Talk to them about tax automation and about eCommerce security respectively.
  • MailChimp (Booth 813) - MailChimp has revitalized their approach to eCommerce email marketing and has a full integration available for Drupal in the MailChimp eCommerce module. Stop by to learn more!
  • Zivtech (Booth 909) - Zivtech has a long history of implementing eCommerce in Drupal, including joining the Drupal Commerce project in late 2009. Talk to them about using Drupal Commerce as a front-end for third party applications.

Finally, be sure to catch Promet Source's showcase session on helping The Corning Museum of Glass migrate from Commerce 1.x to Commerce 2.x and Rick Manelius's session on the dos and don'ts Drupal Commerce project estimation.

Schedule Time to Meet

If you're heading to DrupalCon, we'd love to chat about Drupal Commerce with you. Use our meeting request form to get on our calendar to discuss a particular project or need, or subscribe to our newsletter to be kept in the loop more generally.

Pages

Subscribe to Planet 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