Adding increment and decrement buttons to quantity on the product page

Hi there, I am trying to add increment and decrement buttons to the quantity box on the product page on my dev website, It´s based on the Alfresco theme but I am not using the Ajax cart plugin (due to another reason)

I am trying to implement the solution discussed here https://www.nop-templates.com/boards/topic/3052/increment-decrement-button but it´s not working for me, I am pasting my code from _AddToCart.cshtml here below, any suggestion to make this work?

<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,

You need to do 2 things. First - change those 2 lines:

from this:

$(document).on('click', '.add-to-cart .increase, .cart .increase', incrementQuantityValue);
$(document).on('click', '.add-to-cart .decrease, .cart .decrease', decrementQuantityValue);

to this:

$(document).on('click', '.increase', incrementQuantityValue);
$(document).on('click', '.decrease', decrementQuantityValue);

And second - add this line

handlePurchaseQuantityValue();

after this:

function handlePurchaseQuantityValue() {
      $(document).on('click', '.increase', incrementQuantityValue);
      $(document).on('click', '.decrease', decrementQuantityValue);
}

Hope this helps!

That´s great, this works fine now.
Thank you very much for your assistance :-)

Hi there,

This might be a stupid question but I am a complete noob when it comes to this.
Where in the _AddToCart.cshtml file do I insert the code?

Thanks in advance

I am using the Pavilion Theme with the Ajax Cart plugin active.

Hi,

This is the path to the _AddToCart.cshtml view: "Nop.Web\Themes\Pavilion\Views\Product\_AddToCart.cshtml"

Hope this helps!