Commerce Ajax Add to Cart

Travis CI build status

Using this module you can ajaxify the add to cart operation. The updated cart will be displayed without page refresh and a popup message will be shown after you add an item to cart. You can
customize the look of the blocks using its template files.

8.x

Features:

8.x is still in development. Follow #2850576: [dc_ajax_add_cart] Commerce Ajax Add to Cart for updates. You can also clone this GitHub repository to get the fresh-est features, that are not even available in the dev release of this module. Following features are available:

• Ajax add to cart form as a product variation display formatter

Installation and usage:

• Install the module in a Drupal Commerce installation. Steps for installing module in Drupal can be found here.
• Go to admin/commerce/config/product-types/default/edit/display,
  select Ajax add to cart form format for Variations.

7.x

Features:

• Shopping cart block (minified version of cart page), that updates every time you add product to cart.
• Remove product from cart through AJAX
• Pop up message will appear showing the current item you have added to cart.
• Update product quantity in cart itself

Installation and usage:

• Install the module in a Drupal Commerce installation. Steps for installing module in Drupal can be found here.
• Go to blocks page admin/structure/block and place the blocks called AJAX shopping cart and AJAX shopping cart teaser in desired regions. If you are working on Commerce Kickstart distribution and have "Commerce Kickstart Theme" as the default theme then it would be best if you put block "AJAX shopping cart" in "Sidebar Second" region and AJAX Custom shopping cart teaser" in "User Bar Second" region. Remove the default block from "User Bar Second" region.
• This module provides a popup message that the product item has been successfully added to cart. By default Commerce Kickstart distribution also provides a similar kind of popup message that appears on page refresh. You can disable the default popup message if you disable this rule: "Kickstart Add to Cart message".
• This module provides template files to provide further customizations. Copy the template files in theme's templates directory and make desired changes.
• Configuration of the module can be found on this page: admin/commerce/config/ajax-cart.

How it is different from other related modules:

• Commerce Cart Ajax - This module ajax-ifies only cart page. It does not ajax-ifies the teaser cart block. However, this module provides ajax-ified cart block and teaser cart block, and you can place them anywhere.
• Commerce Ajax Cart - This module ajax-ifies only the teaser cart block.

You can implement ajax cart using these two modules (with some customizations as per your need). But "Commerce Ajax Add to Cart" provides ajax cart out of the box, and also you can customize its appearance.

Credits:

• Thanks to Iconfinder for providing the icons.