Loading...

AJAX Shopping Cart Comparison for Drupal Commerce

Posted 25 November by admin Design , Development 0  Comments

Error message

Notice: Undefined offset: 0 in include() (line 32 of /home4/jasonsaf/sites/jsafro.com/docroot/sites/all/themes/md_bigstream/templates/view/view_block/team/views-view-unformatted--md-team--random.tpl.php).

A Comparison of Three Modules Which Add AJAX Functionality to the Drupal Commerce Shopping Cart.

Our Goal

AJAX-ify the cart. When the user clicks "add to cart", update the data Drupal is storing for this user's cart with AJAX. Then, update the onscreen display of the contents of the user's cart with AJAX.

The Options

Commerce Cart Ajax

This module does half the job. It AJAX-ifies the add to cart button. But, the cart block will not change without a page refresh.

Commerce Ajax Cart

This module does the other half of the job. It AJAX-ifies the on-screen display of the cart.

Commerce Ajax Add to Cart

This module does the whole job from beginning to end.

The Solution

I went with the Commerce Ajax Add to Cart module. It did everything I wanted out of the box. As a bonus, the tpl files contain all of the raw data I wanted; it was easy to manipulate the output of the AJAX cart block. The installation instructions are solid:

  1. Install the module in a Drupal Commerce installation.
  2. Go to blocks page admin/structure/block and place the blocks called AJAX shopping cart and AJAX shopping cart teaser in desired regions.
  3. 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".
  4. 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.
Leave a comment