修改WooCommerce数量输入(jQuery)

时间:2016-05-25 13:07:44

标签: javascript php jquery input woocommerce

我正在编辑quantity-input.php以拥有这样的按钮:

Quantity Button for Woocommerce

我找到了this,我正在尝试将其添加到我的网站,但它有问题。

在单个产品页面中它工作正常,在变量产品中数量不会改变,当我在购物车页面中尝试这个时,最后一个产品也可以正常工作,但是当我在第一个产品数量输入时使用加号按钮时为所有产品增加1个单位。

这正是我正在使用的代码

jQuery('.btn-number').click(function(e){
    e.preventDefault();
    
    fieldName = jQuery(this).attr('data-field');
    type      = jQuery(this).attr('data-type');
    var input = jQuery("input[name='<?php echo esc_attr( $input_name ); ?>']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
        if(type == 'minus') {
            
            if(currentVal > input.attr('min')) {
                input.val(currentVal - 1).change();
            } 
            if(parseInt(input.val()) == input.attr('min')) {
                jQuery(this).attr('disabled', true);
            }

        } else if(type == 'plus') {

            if(currentVal < input.attr('max')) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(input.val()) == input.attr('max')) {
                jQuery(this).attr('disabled', true);
            }

        }
    } else {
        input.val(0);
    }
});
jQuery('.input-number').focusin(function(){
   jQuery(this).data('oldValue', jQuery(this).val());
});
jQuery('.input-number').change(function() {
    
    minValue =  parseInt(jQuery(this).attr('min'));
    maxValue =  parseInt(jQuery(this).attr('max'));
    valueCurrent = parseInt(jQuery(this).val());
    
    name = jQuery(this).attr('name');
    if(valueCurrent >= minValue) {
        jQuery(".btn-number[data-type='minus'][data-field='<?php echo esc_attr( $input_name ); ?>']").removeAttr('disabled')
    } else {
        alert('Sorry, the minimum value was reached');
        jQuery(this).val(jQuery(this).data('oldValue'));
    }
    if(valueCurrent <= maxValue) {
        jQuery(".btn-number[data-type='plus'][data-field='<?php echo esc_attr( $input_name ); ?>']").removeAttr('disabled')
    } else {
        alert('Sorry, the maximum value was reached');
        jQuery(this).val(jQuery(this).data('oldValue'));
    }
    
    
});
<div class="quantity input-number__wrap">
	<div class="input-group">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="<?php echo esc_attr( $input_name ); ?>">
                  <span class="glyphicon glyphicon-minus"></span>
              </button>
          </span>
          <input type="text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $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' ) ?>" class="input-text qty text form-control input-number">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="<?php echo esc_attr( $input_name ); ?>">
                  <span class="glyphicon glyphicon-plus"></span>
              </button>
          </span>
      </div>
</div>

  

编辑最后我在评论中使用了插件WilsonWilson   在下面工作正常。

0 个答案:

没有答案