Woocommerce 3 中的自定义加减数量按钮 [英] Custom plus and minus quantity buttons in Woocommerce 3

问题描述

我正在构建自定义 WordPress 和 WooCommerce 主题，并向产品页面数量字段添加自定义加号和减号按钮.这些按钮会更新数量输入的值，并且当我提交添加到购物车时，我还会收到商品已添加到您的购物车"通知(在产品页面上).但是购物车页面没有显示任何商品，也没有说购物车是空的.

我不知道我想挂钩哪个 WooCommerce JS 函数，也不知道如何挂钩.请问可以帮忙吗?！提前致谢！

我的 HTML 布局:

<label class="quantity__label" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e('Quantity:', 'woocommerce');?></label><div class="quantity__wrapper"><input type="button" value="-" class="quantity__button数量__remove js-qty-remove"/><输入类型=文本"id="<?php echo esc_attr( $input_id ); ?>"class="输入文本数量 文本数量__输入"step="<?php echo esc_attr( $step ); ?>"min="<?php echo esc_attr( $min_value ); ?>"max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"name="<?php echo esc_attr( $input_name ); ?>"value="<?php echo esc_attr( $input_value ); ?>"title="<?php echo esc_attr_x( 'Qty', '产品数量输入工具提示', 'woocommerce'); ?>"大小=4"模式="<?php echo esc_attr( $pattern ); ?>"inputmode="<?php echo esc_attr( $inputmode ); ?>"aria-labelledby="<?php echo esc_attr( $labelledby ); ?>"/><input type="button" value="+" class="数量__按钮数量__add js-qty-add"/>

我的自定义 jQuery 函数:

functionquantityButtons() {var $qtyAdd = $('.js-qty-add'),$qtyRemove = $('.js-qty-remove'),$qtyInput = $('.quantity__input');$qtyAdd.on('点击', addQty);$qtyRemove.on('点击', removeQty);函数 addQty() {var $qtyInput = $('.quantity__input'),$qtyRemove = $('.js-qty-remove'),$i = $qtyInput.val();$i++;$qtyRemove.attr("禁用", !$i);$qtyInput.val($i);}函数 removeQty() {var $qtyInput = $('.quantity__input'),$qtyRemove = $('.js-qty-remove'),$i = $qtyInput.val();如果 ($i >= 1) {$i--;$qtyInput.val($i);} 别的 {$qtyRemove.attr("禁用", true);}}$qtyRemove.attr("禁用", !$qtyInput.val());}数量按钮()；

解决方案

您的第一个代码部分是由 global/quantity-input.php Woocommerce 模板代码的自定义...

因此，为了测试，我已经部分更改了 global/quantity-input.php 模板代码，如下(非常接近您的代码):

<代码>?><div class="数量"><label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e('Quantity', 'woocommerce');?></label><input type="button" value="-" class="qty_button减"/><输入类型=数字"id="<?php echo esc_attr( $input_id ); ?>"类=输入文本数量文本"step="<?php echo esc_attr( $step ); ?>"min="<?php echo esc_attr( $min_value ); ?>"max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"name="<?php echo esc_attr( $input_name ); ?>"value="<?php echo esc_attr( $input_value ); ?>"title="<?php echo esc_attr_x( 'Qty', '产品数量输入工具提示', 'woocommerce'); ?>"大小=4"模式="<?php echo esc_attr( $pattern ); ?>"inputmode="<?php echo esc_attr( $inputmode ); ?>"aria-labelledby="<?php echo esc_attr( $labelledby ); ?>"/><input type="button" value="+" class="qty_button plus"/>

<?php

现在必要的 CSS 和重新审视的 jQuery 代码功能:

//删除输入字段类型编号上的 +/- 默认按钮的最小 CSSadd_action('wp_head', 'custom_quantity_fields_css');函数 custom_quantity_fields_css(){?><风格>.quantity input::-webkit-outer-spin-button,.quantity input::-webkit-inner-spin-button {显示:无；边距:0；}.数量输入.数量{外观:文本框；-webkit 外观:无；-moz 外观:文本字段；}</风格><?php}add_action('wp_footer', 'custom_quantity_fields_script');函数 custom_quantity_fields_script(){?><script type='text/javascript'>jQuery( 函数( $ ) {如果(！String.prototype.getDecimals){String.prototype.getDecimals = function() {var num = 这个，match = ('' + num).match(/(?:.(d+))?(?:[eE]([+-]?d+))?$/);如果(！匹配){返回0；}return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );}}//数量加"和减"按钮$( document.body ).on( 'click', '.plus, .minus', function() {var $qty = $( this ).closest( '.quantity' ).find( '.qty'),currentVal = parseFloat( $qty.val() ),max = parseFloat( $qty.attr( 'max' ) ),min = parseFloat( $qty.attr( 'min' ) ),step = $qty.attr('step');//格式化值if ( !currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;if ( max === '' || max === 'NaN' ) max = '';if ( min === '' || min === 'NaN' ) min = 0;if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;//改变值if ( $( this ).is( '.plus' ) ) {if ( max && ( currentVal >= max ) ) {$qty.val(max);} 别的 {$qty.val(( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );}} 别的 {if ( min && ( currentVal <= min ) ) {$qty.val(min);} else if ( currentVal > 0 ) {$qty.val((currentVal-parseFloat(step)).toFixed(step.getDecimals()));}}//触发变化事件$qty.trigger('改变');});});<?php}

代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.

数量按钮加号"和减号"工作正常并以这种方式显示:

将正确数量的产品添加到购物车:

如果您使用加号和减号按钮更改数量字段值，则任何数量字段更改时都会激活更新购物车"按钮.

当您点击更新购物车"时，数量会正确更新.

I’m building custom WordPress and WooCommerce theme and adding custom plus and minus buttons to Product page quantity field. The buttons do update quantity input's value and I also receive "Item has been added to your cart" notification (on Product page) when I submit Add to Cart. But the cart page doesn’t show any items, neither says the cart is empty.

I can not work out which WooCommerce JS function I’m suppose to hook into, neither how to hook into it. Could I ask for help please?! Thanks in advance!

My HTML layout:

<div class="quantity">
    <label class="quantity__label" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity:', 'woocommerce' ); ?></label>
    <div class="quantity__wrapper">
        <input type="button" value="-" class="quantity__button quantity__remove js-qty-remove" />
        <input
            type="text"
            id="<?php echo esc_attr( $input_id ); ?>"
            class="input-text qty text quantity__input"
            step="<?php echo esc_attr( $step ); ?>"
            min="<?php echo esc_attr( $min_value ); ?>"
            max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
            name="<?php echo esc_attr( $input_name ); ?>"
            value="<?php echo esc_attr( $input_value ); ?>"
            title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
            size="4"
            pattern="<?php echo esc_attr( $pattern ); ?>"
            inputmode="<?php echo esc_attr( $inputmode ); ?>"
            aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
        <input type="button" value="+" class="quantity__button quantity__add js-qty-add" />
    </div>
</div>

My custom jQuery function:

function quantityButtons() {
    var $qtyAdd = $('.js-qty-add'),
        $qtyRemove = $('.js-qty-remove'),
        $qtyInput = $('.quantity__input');

    $qtyAdd.on('click', addQty);
    $qtyRemove.on('click', removeQty);

    function addQty() {
        var $qtyInput = $('.quantity__input'),
        $qtyRemove = $('.js-qty-remove'),
        $i = $qtyInput.val();

        $i++;
        $qtyRemove.attr("disabled", !$i);
        $qtyInput.val($i);
    }

    function removeQty() {
        var $qtyInput = $('.quantity__input'),
        $qtyRemove = $('.js-qty-remove'),
        $i = $qtyInput.val();

        if ($i >= 1) {
            $i--;
            $qtyInput.val($i);
        } else {
            $qtyRemove.attr("disabled", true);
        }
    }

    $qtyRemove.attr("disabled", !$qtyInput.val());
}

quantityButtons();

解决方案

Your First code part is made from a customization of global/quantity-input.php Woocommerce template code…

So for testing, I have changed partially that global/quantity-input.php template code with the following (very near to your code):

?>
<div class="quantity">
    <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
    <input type="button" value="-" class="qty_button minus" />
    <input
        type="number"
        id="<?php echo esc_attr( $input_id ); ?>"
        class="input-text qty text"
        step="<?php echo esc_attr( $step ); ?>"
        min="<?php echo esc_attr( $min_value ); ?>"
        max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
        name="<?php echo esc_attr( $input_name ); ?>"
        value="<?php echo esc_attr( $input_value ); ?>"
        title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>"
        size="4"
        pattern="<?php echo esc_attr( $pattern ); ?>"
        inputmode="<?php echo esc_attr( $inputmode ); ?>"
        aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
    <input type="button" value="+" class="qty_button plus" />
</div>
<?php

Now the necessary CSS and revisited jQuery code functions:

// Minimum CSS to remove +/- default buttons on input field type number
add_action( 'wp_head' , 'custom_quantity_fields_css' );
function custom_quantity_fields_css(){
    ?>
    <style>
    .quantity input::-webkit-outer-spin-button,
    .quantity input::-webkit-inner-spin-button {
        display: none;
        margin: 0;
    }
    .quantity input.qty {
        appearance: textfield;
        -webkit-appearance: none;
        -moz-appearance: textfield;
    }
    </style>
    <?php
}


add_action( 'wp_footer' , 'custom_quantity_fields_script' );
function custom_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
    jQuery( function( $ ) {
        if ( ! String.prototype.getDecimals ) {
            String.prototype.getDecimals = function() {
                var num = this,
                    match = ('' + num).match(/(?:.(d+))?(?:[eE]([+-]?d+))?$/);
                if ( ! match ) {
                    return 0;
                }
                return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) );
            }
        }
        // Quantity "plus" and "minus" buttons
        $( document.body ).on( 'click', '.plus, .minus', function() {
            var $qty        = $( this ).closest( '.quantity' ).find( '.qty'),
                currentVal  = parseFloat( $qty.val() ),
                max         = parseFloat( $qty.attr( 'max' ) ),
                min         = parseFloat( $qty.attr( 'min' ) ),
                step        = $qty.attr( 'step' );

            // Format values
            if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
            if ( max === '' || max === 'NaN' ) max = '';
            if ( min === '' || min === 'NaN' ) min = 0;
            if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;

            // Change the value
            if ( $( this ).is( '.plus' ) ) {
                if ( max && ( currentVal >= max ) ) {
                    $qty.val( max );
                } else {
                    $qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            } else {
                if ( min && ( currentVal <= min ) ) {
                    $qty.val( min );
                } else if ( currentVal > 0 ) {
                    $qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) );
                }
            }

            // Trigger change event
            $qty.trigger( 'change' );
        });
    });
    </script>
    <?php
}

Code goes in function.php file of your active child theme (or active theme). Tested and works.

The quantity buttons "plus" and "minus" work perfectly and are displayed this way:

Products are added to cart with the correct quantity:

if you change the quantity field value with plus and minus buttons, the "Update cart" button is activated when any quantity field change.

When you click on "Update cart", the quantities as correctly updated.

这篇关于Woocommerce 3 中的自定义加减数量按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！