Close

increment decrement button

monishrafi
3 years ago
#12910 Quote
Avatar
  • 6
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
hristo
2 years ago
#12939 Quote
Avatar
  • Moderator
  • 123
monishrafi wrote:
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
Regards,
Hristo Gospodinov
Nop-Templates.com
monishrafi
2 years ago
#12940 Quote
Avatar
  • 6
Thanks a lot for great support
JRon
2 years ago
#13584 Quote
Avatar
  • 43
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>
hristo
2 years ago
#13587 Quote
Avatar
  • Moderator
  • 123
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();
Regards,
Hristo Gospodinov
Nop-Templates.com
JRon
2 years ago
#13588 Quote
Avatar
  • 43
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. :-)
bmoc2
one year ago
#14185 Quote
Avatar
  • 7
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
JRon
one year ago
#14186 Quote
Avatar
  • 43
https://www.nop-templates.com/boards/topic/3202/adding-increment-and-decrement-buttons-to-quantity-on-the-product-page