我在每个页面(产品页面、单个产品页面)上都有加减按钮,旁边是要添加的数量,按钮旁边是AJAX中的添加到购物车图标。
我想不出两个问题:
Issue 1: 我的加号和减号按钮加起来是一个奇怪的总和,而不是+1和-1。当我点击+时,它会增加35(猜测将页面上的产品总数相加,并将其添加到数量中)
Issue 2: 当我单击“添加到购物车”按钮时,即使数量是2、3或10,它也只添加1,而不是数量字段中的金额。
woocommerce/global/quantity-input.php
<?php if ( ! defined( \'ABSPATH\' ) ) exit; // Exit if accessed directly
?>
<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( \'Qty\', \'Product quantity input tooltip\', \'woocommerce\' ) ?>" class="input-text qty text" size="4" />
<input class="plus" type="button" value="+">
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$(\'.quantity\').on(\'click\', \'.plus\', function(e) {
$input = $(this).prev(\'input.qty\');
var val = parseInt($input.val());
$input.val( val+1 ).change();
});
$(\'.quantity\').on(\'click\', \'.minus\',
function(e) {
$input = $(this).next(\'input.qty\');
var val = parseInt($input.val());
if (val > 0) {
$input.val( val-1 ).change();
}
});
});
</script>
child-theme/functions.php
add_filter( \'woocommerce_loop_add_to_cart_link\', \'quantity_inputs_for_loop_ajax_add_to_cart\', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( \'simple\' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = implode( \' \', array_filter( array(
\'button\',
\'product_type_\' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? \'add_to_cart_button\' : \'\',
$product->supports( \'ajax_add_to_cart\' ) ? \'ajax_add_to_cart\' : \'\',
) ) );
// Adding embeding <form> tag and the quantity field
$html = sprintf( \'%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s\',
\'<form class="cart">\',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : \'button\' ),
$product->add_to_cart_text(),
\'</form>\'
);
}
return $html;
}
SO网友:Mahmoud Eid
我用一些ID修复了它
add in function.php
add_filter( \'woocommerce_loop_add_to_cart_link\', \'quantity_inputs_for_loop_ajax_add_to_cart\', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
if ( $product && $product->is_type( \'simple\' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
// Get the necessary classes
$class = implode( \' \', array_filter( array(
\'button\',
\'product_type_\' . $product->get_type(),
$product->is_purchasable() && $product->is_in_stock() ? \'add_to_cart_button\' : \'\',
$product->supports( \'ajax_add_to_cart\' ) ? \'ajax_add_to_cart\' : \'\',
) ) );
// Adding embeding <form> tag and the quantity field
$html = sprintf( \'%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" id="%s" data-product_sku="%s" class="%s">%s</a>%s\',
\'<form class="cart">\',
woocommerce_quantity_input( array(), $product, false ),
esc_url( $product->add_to_cart_url() ),
esc_attr( isset( $quantity ) ? $quantity : 1 ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_id() ),
esc_attr( $product->get_sku() ),
esc_attr( isset( $class ) ? $class : \'button\' ),
$product->add_to_cart_text(),
\'</form>\'
);
}
return $html;
}
Add jQuery file without loop
<?php if ( ! defined( \'ABSPATH\' ) ) exit; // Exit if accessed directly
global $product;
?>
<div class="quantity">
<input class="minus" type="button" value="-">
<input type="number" data-product="<?= $product->id; ?>" step="<?php echo esc_attr( $step ); ?>" <?php if ( is_numeric( $min_value ) ) : ?>min="<?php echo esc_attr( $min_value ); ?>"<?php endif; ?> <?php if ( is_numeric( $max_value ) ) : ?>max="<?php echo esc_attr( $max_value ); ?>"<?php endif; ?> name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php _ex( \'Qty\', \'Product quantity input tooltip\', \'woocommerce\' ) ?>" class="input-text qty text" size="4" />
<input class="plus" type="button" value="+">
</div>
添加文件jQuery ex.(添加到card.js)
jQuery(document).ready(function($){
$(\'.plus\').on(\'click\', function(e) {
$input = $(this).prev(\'input.qty\');
var id = $(this).prev(\'input.qty\').attr("data-product");
var val = $input.val();
var sum = Number(val) + Number(1);
$("#"+ id).attr("data-quantity", sum);
$input.val(sum).change();
});
$(\'.minus\').on(\'click\', function(e) {
$input = $(this).next(\'input.qty\');
var id = $(this).next(\'input.qty\').attr("data-product");
var val = $input.val();
var sum = Number(val) - Number(1);
if (sum > 0) {
$("#"+ id).attr("data-quantity", sum);
$input.val(sum).change();
}
});
});