We’ve had several great opportunities this summer to connect with the Drupal community and share our latest work on Drupal Commerce. We’ve been able to highlight specifically our efforts to progressively decouple Drupal Commerce on Drupal 8.
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.
Other key updates and improvements in this release include:
- Tax calculations now properly account for promotions
- Added product category conditions for product and order level promotions
- Automatically create matching product variation types for new product types
- Following changes in core, Jonathan updated our Avatax integration to accommodate promotions and shipments
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
— Drupal Commerce (@drupalcommerce) August 1, 2018
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.
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.
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.
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!
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.
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.
- 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.
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.
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!
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.
On March 21st 2018, the Drupal security team posted a public service announcement that Drupal core would be receiving a security release. The vulnerability affected Drupal 6, Drupal 7, all versions of Drupal 8, and Backdrop (a fork of Drupal during the rewrite to version 8.) On March 28th that security release landed, and the Drupal world went scrambling to apply updates. As maintainers of Commerce Kickstart we have to be conscious of Drupal core releases, especially security ones.
In preparation for the upcoming security release, we had patches ready to commit. Since there would be no other Drupal core releases before the security update, we could make our prepared changes ahead of time and push them once the releases landed. Within minutes of the security release dropping and the Git backend for drupal.org becoming available, the release tags were pushed.
For our Pantheon users, our first step was to merge in Pantheon’s Drupal 7 upstream and receive the Drupal core security fix. Once the packaging system of drupal.org built the Commerce Kickstart 2.53 release, we pushed that out as well.
All in all, by 3PM CDT the drupal.org releases for Commerce Kickstart 1.51 and 2.53 were out. We experienced some packaging issues due to a malicious attack hitting drupal.org during the security announcement and a backed up packaging queue. However, we monitored chat channels and communicated the process throughout.
Commerce Kickstart 1.51, 2.53 released. The @getpantheon upstream has been updated as well. GO AND GET YOUR SA-CORE-2018-002 FIXES NOW.
— Matt Glaman (@nmdmatt) March 28, 2018
Thanks to the Drupal Security and Infrastructure teams for handling this release and all the stress they endured.
What is API-First, and why should it matter?
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.
When Commerce Guys raised $5m in 2012 to grow Drupal Commerce and its ecosystem, we invested a big chunk of it in improving our user experience for both customers and administrators. With competing platforms like Shopify and Magento really coming into their own, we knew it was essential to provide a solid out-of-the-box experience. While Drupal Commerce was and is truly unique as an eCommerce framework natively extending and deeply integrated into a CMS, it turns out "flexibility" doesn't pitch nearly as well as a polished demo.
Investing in Drupal Commerce adoption
The product we developed to address that need is Commerce Kickstart, by far the most popular Drupal distribution ever built. I named it such to underscore the fact that we intended it to be an accelerator, both for Drupal Commerce's own adoption but also for newcomers wondering how to demo and develop with the software. At its height, we supported over 13,000 sites reporting in to drupal.org, and we continue to see new sites launch with it to this day.
Building the distribution proved to be a fantastic learning experience. The project drove improvements that worked their way into many contributed modules and Drupal core itself (e.g. contributions to Views, VBO, Entity Reference, Inline Entity Form). Its broad appeal also gave us a platform to invite Technology Partners to invest in the community in a way that Drupal hadn't seen before, many of whom continue to invest in Drupal today (e.g. Authorize.Net, PayPal, Avalara).
It was a ton of work, but Bojan, Jonathan, and their team accomplished everything we set out to do and more. With the release of Commerce 2.0 last fall, we now find ourselves regularly fielding the question, "What's the plan for Commerce Kickstart on Drupal 8?" The reality is, porting Commerce Kickstart as it is to Drupal 8 would be both too costly for our team today and a poor strategy for the way the Drupal market is developing. We're doing something new again.
Accelerating adoption today
Another frequent question we field is, "Why does Drupal Commerce require Composer?" Composer is often highlighted as a barrier to Drupal 8 adoption, and I can understand why. I always felt the same way about drush. I had a UI; why did I need a CLI? I had my process and never had to battle the command line to make sure drush worked, was up to date, and did what I expected. I always felt that way ... until I buckled down and learned it. Now I can't imagine using Drupal without it.
I felt the same about Composer at first, but I was determined to learn how to use it as I learned Drupal 8 and modern PHP in general. I know I'm not the only person suffering from tool fatigue (cf. Dries ; ), so we're doing what we can to help you ease into using Composer on your own terms.
We started by releasing Ludwig last summer, a Drupal project that lets you manage Composer dependencies similarly to the familiar Libraries module. We also expanded and documented a Composer project template that lets you create a new Commerce 2.x site with
composer create-project, and we then began planning how to let users customize a project template via the browser while prototyping a GUI for Composer.
With today's release of the new CommerceKickstart.com, developed in partnership with Acro Media (thanks to Shawn McCabe, Mike Hubbard, et al), we're taking the next step!
Commerce Kickstart for Drupal 8
What you'll find there is that Commerce Kickstart has been reimagined for Drupal 8 rather than rebuilt on Drupal 8. The quickest way to get up and running with Drupal Commerce today is not through a distribution as it was 6 years ago, it's through Composer. This is the tool for modern PHP developers, and we see prioritizing Composer while also making it simpler to use as essential to growing Drupal Commerce adoption both from without and within the Drupal community.
While still in its infancy, CommerceKickstart.com presents a form that lets you construct a Composer JSON file ready-made to support Commerce 2.x and the contributed modules you specify. Module categories include payment and shipping providers, product catalog and search tools, data migration, and more. As with Commerce Kickstart 2.x, it features Technology Partners whose modules we have integrated into Commerce 2.x, and we expect the selection to continue expand.
Future plans for the tool include clarifying and improving the tool's usability, adding additional modules and Technology Partners, and evolving it to continue to lower the barrier to entry for new Composer users. If you give it a whirl, we'd love to hear your ideas as well in the Commerce Kickstart issue queue.