Auto update cart quantity when change quantity

First edit the cart template /app/design/frontend/{package}/{theme}/template/checkout/cart.phtml and add an id on the form element for easier access. Let's say you add 'id="cart-form"';

Now edit the templates that render the cart items:

  • app/design/frontend/{package}/{theme}/template/checkout/cart/item/default.phtml
  • app/design/frontend/{package}/{theme}/template/downloadable/checkout/cart/item/default.phtml

and on the <input> element with the name cart[<?php echo $_item->getId() ?>][qty] add this:

onchange="$('cart-form').submit()"

But I don't recommend doing this. It's really annoying for the users. (at least for me).


Assuming your site has jQuery included in no-conflict mode, here's a way of doing this asynchronously (much less annoying!).

jQuery(document).ready(function(){
jQuery('#shopping-cart-table')
    .on(
        'change',
        'input[name$="[qty]"]',
        function(){
            var form = jQuery(jQuery(this).closest('form'));

            // we'll extract the action and method attributes out of the form

            // kick off an ajax request using the form's action and method,
            // with the form data as payload
            jQuery.ajax({
                url: form.attr('action'),
                method: form.attr('method'),
                data: form.serializeArray()
            });
        }
    );
});

I should point out that this makes the following assumptions:

  • Your shopping cart lives within an element with the id of shopping-cart-table
  • Your input fields for quantity have a name attribute that ends with [qty]

It should be easy to adjust the selectors in the code on lines 2 and 5 respectively to match your circumstances.