increment decrement button

Hi,

Please any body help on this as we need to add increment decrement button inline with quantity box so that user can change quantity through mouse click

we are using motion responsive theme and nop ajax cart

Here is a script you can use for that, but you have to initialize it (and style the new elements) on your own, since this is not a part of the theme:

function incrementQuantityValue(event) {
    event.preventDefault();
    event.stopPropagation();
    var input = $(this).siblings('.qty-input');
    var value = parseInt(input.val());
    if (isNaN(value)) {
        input.val(1);
        return;
    }
    value++;
    input.val(value);
        
    input.trigger('input');
}
function decrementQuantityValue(event) {
    event.preventDefault();
    event.stopPropagation();
    var input = $(this).siblings('.qty-input');
    var value = parseInt(input.val());
    if (isNaN(value)) {
        input.val(1);
        return;
    }
    if (value <= 1) {
        return;
    }
    value--;
    input.val(value);

    input.trigger('input');
}
function handlePurchaseQuantityValue() {
    $(document).on('click', '.add-to-cart .increase, .cart .increase', incrementQuantityValue);
    $(document).on('click', '.add-to-cart .decrease, .cart .decrease', decrementQuantityValue);
}

You have to add 2 new elements (e.g. <span>) around your quantity input text box in all possible scenarios (product templates, shopping cart table, plugins...) and use the class names "increase" and "decrease" to get them targeted by the above script. When ready, initialize the handlePurchaseQuantityValue() function and test.


Regards

Thanks a lot for great support

I am trying to do the same on the product page to my modded Alfresco theme but it´s not working, here´s the code I have added to the _AddToCart.cshtml, what am I doing wrong?

<button type="button" class="minus decrease left">
                    <span>-</span>
                </button>
                @Html.TextBoxFor(model => model.EnteredQuantity, new {@class = "qty-input left"})
                <button type="button" class="plus increase left">
                    <span>+</span>
                </button>

                <script>
                    $(document).ready(function() {
                        function incrementQuantityValue(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            var input = $(this).siblings('.qty-input');
                            var value = parseInt(input.val());
                            if (isNaN(value)) {
                                input.val(1);
                                return;
                            }
                            value++;
                            input.val(value);
                                
                            input.trigger('input');
                        }
                        function decrementQuantityValue(event) {
                            event.preventDefault();
                            event.stopPropagation();
                            var input = $(this).siblings('.qty-input');
                            var value = parseInt(input.val());
                            if (isNaN(value)) {
                                input.val(1);
                                return;
                            }
                            if (value <= 1) {
                                return;
                            }
                            value--;
                            input.val(value);

                            input.trigger('input');
                        }
                        function handlePurchaseQuantityValue() {
                            $(document).on('click', '.add-to-cart .increase, .cart .increase', incrementQuantityValue);
                            $(document).on('click', '.add-to-cart .decrease, .cart .decrease', decrementQuantityValue);
                        }
                    });
                </script>

Hi,

I can see your main function is defined but not invoked. As written in the previous post you have to initialize this script in order to get it working. You can invoke the function before the closing script tag:

handlePurchaseQuantityValue();

Thanks for the reply but my Javascript coding skills are really very limited so I don´t know how to do that, I will check with my site  developer if he has the time to fix this for me. :-)

Hi there,

Is there any easy way to do this? My coding skills are still pretty basic. Where would the function be added in the script? From the post above it seems that it should be added to the _AddToCart.cshtml?

Is there anyone after acheiving this and if so would they be willing to share their code?
I am really stuck and need to sort the problem out asap.

I am using the Pavilion Theme with the Ajax Cart plugin

https://www.nop-templates.com/boards/topic/3202/adding-increment-and-decrement-buttons-to-quantity-on-the-product-page