vegangirlthatcodes
3/28/2018 - 10:23 PM

Add minus and plus buttons on add to cart quantity input

Jquery snippets to add the minus and plus buttons right after the quantity input box (Magento 2).

Each script has the destination template commented.

minus-and-plus-buttons-on-input-jquery
content_copyfile_download
<script>
    require(['jquery'], function ($) {
       /* Product page: Magento_Catalog/templates/product/view/addtocart.phtml */
        jQuery('<div class="add-to-cart-quantity-nav"><div class="add-to-cart-quantity-button quantity-up">+</div><div class="add-to-cart-quantity-button quantity-down">-</div></div>').insertAfter('.box-tocart .fieldset .qty .control input');
        jQuery('.box-tocart').each(function () {
            var spinner = jQuery(this),
                input = spinner.find('input[type="number"]'),
                btnUp = spinner.find('.quantity-up'),
                btnDown = spinner.find('.quantity-down'),
                min = input.attr('min'),
                max = input.attr('max');

            btnUp.click(function () {
                var oldValue = parseFloat(input.val());
                if (oldValue >= max) {
                    var newVal = oldValue;
                } else {
                    var newVal = oldValue + 1;
                }
                spinner.find("input").val(newVal);
                spinner.find("input").trigger("change");
            });

            btnDown.click(function () {
                var oldValue = parseFloat(input.val());
                if (oldValue <= min) {
                    var newVal = oldValue;
                } else {
                    var newVal = oldValue - 1;
                }
                spinner.find("input").val(newVal);
                spinner.find("input").trigger("change");
            });
        });
    });
</script>


<script>
    require(['jquery'], function ($) {
       /* Product list: Magento_Catalog/templates/product/list.phtml */
        jQuery('<div class="add-to-cart-quantity-nav"><div class="add-to-cart-quantity-button quantity-up">+</div><div class="add-to-cart-quantity-button quantity-down">-</div></div>').insertAfter('.add-to-cart-quantity input');
    jQuery('.add-to-cart-quantity').each(function () {
        var spinner = jQuery(this),
            input = spinner.find('input[type="number"]'),
            btnUp = spinner.find('.quantity-up'),
            btnDown = spinner.find('.quantity-down'),
            min = input.attr('min'),
            max = input.attr('max');

        btnUp.click(function () {
            var oldValue = parseFloat(input.val());
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });

        btnDown.click(function () {
            var oldValue = parseFloat(input.val());
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            spinner.find("input").val(newVal);
            spinner.find("input").trigger("change");
        });
    });
    });
</script>