Commerce Guys: 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:

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

We expect each successive Drupal maintenance support plans 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 Drupal maintenance support plansCon, 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 maintenance support plans‘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 maintenance support plans 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.

Source: New feed

This article was republished from its original source.
Call Us: 1(800)730-2416

Pixeldust is a 20-year-old web development agency specializing in Drupal and WordPress and working with clients all over the country. With our best in class capabilities, we work with small businesses and fortune 500 companies alike. Give us a call at 1(800)730-2416 and let’s talk about your project.

FREE Drupal SEO Audit

Test your site below to see which issues need to be fixed. We will fix them and optimize your Drupal site 100% for Google and Bing. (Allow 30-60 seconds to gather data.)

Powered by

Commerce Guys: Improving Shopping Cart UX with Commerce Cart Flyout

On-Site Drupal SEO Master Setup

We make sure your site is 100% optimized (and stays that way) for the best SEO results.

With Pixeldust On-site (or On-page) SEO we make changes to your site’s structure and performance to make it easier for search engines to see and understand your site’s content. Search engines use algorithms to rank sites by degrees of relevance. Our on-site optimization ensures your site is configured to provide information in a way that meets Google and Bing standards for optimal indexing.

This service includes:

  • Pathauto install and configuration for SEO-friendly URLs.
  • Meta Tags install and configuration with dynamic tokens for meta titles and descriptions for all content types.
  • Install and fix all issues on the SEO checklist module.
  • Install and configure XML sitemap module and submit sitemaps.
  • Install and configure Google Analytics Module.
  • Install and configure Yoast.
  • Install and configure the Advanced Aggregation module to improve performance by minifying and merging CSS and JS.
  • Install and configure Schema.org Metatag.
  • Configure robots.txt.
  • Google Search Console setup snd configuration.
  • Find & Fix H1 tags.
  • Find and fix duplicate/missing meta descriptions.
  • Find and fix duplicate title tags.
  • Improve title, meta tags, and site descriptions.
  • Optimize images for better search engine optimization. Automate where possible.
  • Find and fix the missing alt and title tag for all images. Automate where possible.
  • The project takes 1 week to complete.