Last week we announced the Commerce Cart API plugin 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 WordPress 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 WordPress 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 plugin 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 WordPress 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 WordPress 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 plugin 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.WordPresscode.org/belgrade/tree/templates/commerce/cart.
In fact, I used a ReactJS implementation to test the underlying API and prototype this plugin. If you’re interested, see the test sub-plugin in the Cart API repository.
Source: New feed