Auto update cart quantity when change quantity

Question

In the default cart of Magento, when the customer edit the quantity, he/she needs to press the button to update the quantity.

Is there a way that the cart update the quantity automatically when the user enter a other number in the quantity field?

Answer 1

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).

Answer 2

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.

Answer 3

Edit these two files

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 element with the name cart[<?php echo $_item->getId() ?>][qty] add this:

onchange="this.form.submit()"

Answer 4

If your jQuery version is old, you will not succeed. I have found a way which is as follows, follow as our friend Marius's instructions to insert

/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 open file

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

And scroll to the end of the file and you will find the javascript that does the increment and decrement of the quantity. The function will look like this:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
    }
}

Change for this:

function plusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);        
    qty++;
    $('qty'+itemId).value = qty;
    document.getElementById("cart-form").submit();  
}

function minusQty(itemId){
    qty = $('qty'+itemId).value;
    qty = parseInt(qty);

    if(qty>0){
        qty--;
        $('qty'+itemId).value = qty;
         document.getElementById("cart-form").submit();   
    }
}

Answer 5

In case you don't have jQuery loaded (yet), you can also find the <input> element (or in my case a <select> element since I built a dropdown field to select the amount) with the name name="cart[<?php echo $_item->getId() ?>][qty]" and add this:

onchange="this.form.submit()"

The phtml file which you have to edit is located here:

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