So we already had a custom block showing cart and wishlist icons with item counters inside. The site wasn't live at that moment, but development work was already finished by about 99.9%. First one was that the project was built entirely without an ajaxified add to cart logic. Well, in the end, it was the sum of a couple of small factors that led me into this direction.

Why I haven't used Cart Flyout in that project But these days I've decided to rather use custom coding to achieve an ajaxified add to cart experience. I really like Cart Flyout very much and also use it in certain projects. Thanks to Drupal's library management, you could even override single JS parts of this module with ease. The JS logic is cleanly structured and built on top of Backbone to offer a wonderful separation between models and views. Another plus is that Cart Flyout is highly customizable, offering nine different Twig templatetes for the output of different parts of the module. Both modules are maintained by Commerce co-maintainer Matt Glaman, who works for Commerce Guys - the company responsible for developing and maintaining Drupal Commerce, which is another pro argument in choosing this approach. The module is based on Commerce Cart API and provides a progressively decoupled cart experience.

The block includes an item counter as well. The flyout allows to view the cart's contents, change quantities or remove order items entirely. It provides a sidebar which will 'flyout', when either the cart block is clicked or the add to cart button was pressed. The Commerce Cart Flyout module is my clear recommendation when it comes to what of the existing Drupal contrib modules to use, when you want to have an ajaxified add to cart form. Additionally I'll show how you can achieve a simpler version of that with only a few lines of custom JS code. There are a couple of modules out there to ajaxify the add to cart form of Drupal Commerce, but I'll introduce to one that on top offers a real decoupled solution.

Drupal commerce options