我正在构建自定义WordPress和WooCommerce主题,并将自定义加号和减号按钮添加到 Product page quantity field . 按钮确实更新了数量输入的值,当我提交添加到购物车时,我也会收到"Item has been added to your cart"通知(在产品页面上) . 但购物车页面没有显示任何商品,也没有说购物车是空的 .
我无法解决我想要挂钩的WooCommerce JS函数,以及如何挂钩它 . 我可以请求帮助吗?!提前致谢!
我的HTML布局:
<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>
我的自定义jQuery函数:
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();
1 回答
您的第一个代码部分来自
global/quantity-input.php
Woocommerce模板代码的自定义...因此,对于测试,我已经部分更改了
global/quantity-input.php
模板代码,其中包含以下内容(非常接近您的代码):现在必要的CSS和重新访问的jQuery代码函数:
代码位于活动子主题(或活动主题)的function.php文件中 . 经过测试和工作 .
数量按钮“加”和“减”完美地工作,并以这种方式显示:
产品以正确的数量添加到购物车:
如果使用加号和减号按钮更改数量字段值,则在更改任何数量字段时,将激活“更新购物车”按钮 .
当您点击“更新购物车”时,数量正确更新 .