Plus & Minus buttons - Magento Cart - jQuery Error

Question

I use the jQuery script bellow to increment and decrement the quantity of items in my Magento cart, however the plus button is below the box and the minus button above.

Thinking this was a simple fix I switched the .append and .prepend parameters around but with no success.

This put the icons in the correct order but the functions simply stopped working. I'm assuming this is something to do with the order the functions are laid out below, however I'm not to savvy with jQuery!

jQuery(document).ready(function () {
    jQuery("div.quantity")
    .append('<input type="image" src="/checkout/plus.png" name="update_cart_action" value="+" id="add1" class="plus" />')
    .prepend('<input type="image" src="/checkout/minus.png" name="update_cart_action" value="-" id="minus1" class="minus" />');

jQuery(".plus").click(function () {
    var currentVal = parseInt(jQuery(this).prev(".qty").val());
    if (!currentVal || currentVal == "" || currentVal == "NaN") currentVal = 1;
    jQuery(this).prev(".qty").val(currentVal + 1);
});

jQuery(".minus").click(function () {
    var currentVal = parseInt(jQuery(this).next(".qty").val());
    if (currentVal == "NaN") currentVal = 1;
    if (currentVal > 1) {
        jQuery(this).next(".qty").val(currentVal - 1);

    }
});
});

score 1 · Accepted Answer · answered May 08 '14 at 09:52

When you switched the .append and .prepend around you would have needed to change the .next and .prev around within the click functions as you have changed the order of the elements. Try this:

jQuery(".plus").click(function (e) {
    e.preventDefault();
    var currentVal = parseInt(jQuery(this).next(".qty").val());
    if (!currentVal || currentVal == "" || currentVal == "NaN") currentVal = 1;
    jQuery(this).next(".qty").val(currentVal + 1);
});

jQuery(".minus").click(function (e) {
    e.preventDefault();
    var currentVal = parseInt(jQuery(this).prev(".qty").val());
    if (currentVal == "NaN") currentVal = 1;
    if (currentVal > 1) {
        jQuery(this).prev(".qty").val(currentVal - 1);
    }
});

I have added the e.preventDefault() to stop the form from posting back when the buttons are clicked.

Also, I would remove the ids from the buttons as if you have more than one quantity div, you will have multiple buttons with the same id

Thanks, This has solved it! I do however need the form to post back to refresh the cart totals :) Haven't got round to implementing Ajax yet! — Harry, May 08 '14 at 10:22

score 0 · Answer 2 · answered May 08 '14 at 09:45

You need to follow event delegation syntax with .on() handler:

jQuery('div.quantity').on('click', '.plus', function () { // for plus

and

jQuery('div.quantity').on('click', '.minus', function () { // for minus

Because your buttons are dynamically added with js so event bound on them won't work that way, so you have to delegate the event to the closest static parent $('div.quantity') is in your case or bind directly to $(document)not preffered.

Plus & Minus buttons - Magento Cart - jQuery Error

2 Answers2