html 在添加到购物车数量输入时添加减号和加号按钮

Posted 2021-05-10

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