WooCommerce 定制数量（有变化）

Question

我尝试将 JS 代码用于自定义数量，并为 WC 提供变化
当变化发生变化时 - 数量无法正常工作
错误步骤或值
也许是“show_variation”事件中的原因

链接到测试页面

请帮我找出并纠正此代码中的错误

PHP

    <div class="quantity-button quantity-down">&minus;</div>
    <input
        type="number"
        id="<?php echo esc_attr( $input_id ); ?>"
        class="<?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"
        step="<?php echo esc_attr( $step ); ?>"
        min="<?php echo esc_attr( $min_value ); ?>"
        max="<?php echo esc_attr( 0 < $max_value ? $max_value : 1 ); ?>"
        name="<?php echo esc_attr( $input_name ); ?>"
        value="<?php echo esc_attr( $input_value ); ?>"
        title="<?php _e( 'Кількість', AGDS_THEME_TD ) ?>"
        size="4"
        placeholder="<?php echo esc_attr( $placeholder ); ?>"
        inputmode="<?php echo esc_attr( $inputmode ); ?>"
        autocomplete="<?php echo esc_attr( isset( $autocomplete ) ? $autocomplete : 'on' ); ?>"
    />
    <div class="quantity-button quantity-up">&plus;</div>

JS

    var quantityCustom = () => {
    jQuery(".quantity").each(function () {
        var quantity = jQuery(this),
            input = quantity.find('input[type="number"]'),
            btnUp = quantity.find(".quantity-up"),
            btnDown = quantity.find(".quantity-down"),
            min = input.attr("min") !== '' ? Number(input.attr("min")) : 0,
            max = input.attr("max") !== '' ? Number(input.attr("max")) : 999,
            oldValue = parseFloat(input.val());

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

        btnDown.click(function (e) {
            e.preventDefault()
            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            input.val(newVal);
            input.trigger("change");
        });
    })

}

$(document).on('show_variation', function (e, variation) {
    quantityCustom()
})

Answer 1

问题出在你的 JS 中。 它将旧值保持为 1，因此数量仅在 2 之前不起作用或起作用。 您需要在单击而不是在加载页面时获取旧值。

这是相同的更正版本，但它也可以更好：

    var quantityCustom = () => {
    jQuery(".quantity").each(function () {
        var quantity = jQuery(this),
        btnUp = quantity.find(".quantity-up"),
        btnDown = quantity.find(".quantity-down");
        
        
        btnUp.click(function (e) {
            e.preventDefault();
            var input = quantity.find('input[type="number"]'),
            min = input.attr("min") !== '' ? Number(input.attr("min")) : 0,
            max = input.attr("max") !== '' ? Number(input.attr("max")) : 999,
            oldValue = parseFloat(input.val());

            
            if (oldValue >= max) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue + 1;
            }
            input.val(newVal);
            input.trigger("change");
        });

        btnDown.click(function (e) {
            e.preventDefault();
            var input = quantity.find('input[type="number"]'),
            min = input.attr("min") !== '' ? Number(input.attr("min")) : 0,
            max = input.attr("max") !== '' ? Number(input.attr("max")) : 999,
            oldValue = parseFloat(input.val());

            if (oldValue <= min) {
                var newVal = oldValue;
            } else {
                var newVal = oldValue - 1;
            }
            input.val(newVal);
            input.trigger("change");
        });
    })

}

$(document).on('show_variation', function (e, variation) {
    quantityCustom()
})

我个人不喜欢一次又一次地重复相同的代码，但在你的情况下，我认为这个更改是最简单的。 它应该可以解决您的问题。