Close

Adding increment and decrement buttons to quantity on the product page

JRon
4 months ago
#13585 Quote
Avatar
  • 26
PM
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>
hristian.dimov
3 months ago
#13600 Quote
Avatar
  • Moderator
  • 345
PM
JRon wrote:
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!
Regards,
Hristian Dimov
Nop-Templates.com
JRon
3 months ago
#13602 Quote
Avatar
  • 26
PM
That´s great, this works fine now.
Thank you very much for your assistance :-)