12

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?

14

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

  • 6
    Annoys the user?! No problem, we do it nevertheless :D – Fabian Blechschmidt Jun 8 '15 at 12:54
  • 5
    @FabianBlechschmidt. Why not? We are annoyed when developing it, the user is annoyed when using it. That's what compromise means. Everyone loses. :) – Marius Jun 8 '15 at 13:06
  • You are awesome Marius. how can i do this using Ajax? – Naveenbos Dec 29 '15 at 6:53
6

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.

  • Hi Jetha I have tried this but it is showing the checkout/cart/updatePost/ 302 Found 1.71s any idea why it is showing like this? – Naveenbos Dec 29 '15 at 7:15
  • Parameters are this cart[137][qty] 1 cart[139][qty] 2 form_key zA1lLphVHPsEu4ux Using this how can i post this to update post action – Naveenbos Dec 29 '15 at 7:33
  • Does your cart show the updated quantities? – Jetha Chan Dec 29 '15 at 7:36
  • It's not actually meant to return anything; more to the point you're not really meant to care about the return value when you do it this way. Things to verify: - does your form work when submitted normally, i.e. without AJAX? - when the values are changed using AJAX, do the values in the cart (i.e. open another browser window) change? – Jetha Chan Dec 29 '15 at 7:39
  • 1
    Let us continue this discussion in chat. – Jetha Chan Dec 29 '15 at 7:54
0

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()"
0

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();   
    }
}
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.