将 12 件套产品添加到购物车
Add in sets of 12 products to cart
您好,我的代码有问题
我想做同样的事情,但是是 12 的倍数而不是数字 12
例如 12 瓶啤酒、24 瓶啤酒等,但不是 13、14 或 15 瓶啤酒。
抱歉我的英文很烂
https://bcambre-eshop.webflow.io/test
谢谢
<script>
// Initialize texts
$(".beer-info").hide();
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
// select the target node — here : .cart-list
var target = document.getElementById('target');
// input here your reference value
var targetQty = 12;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
//console.log('cart update');
setTimeout(function(){
var currentQty = $('.w-commerce-commercecartopenlinkcount').text();
var leftQty = targetQty - currentQty ;
// update counter — console.log('cans missing' + ' ' + leftQty);
if ( leftQty <= 0 ) {
$(".beers-left").text(leftQty);
$(".beer-info").hide();
$(".beer-info-alt").show();
$(".checkout-abs").show();
}
else {
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
$(".beer-info").show();
$(".beers-left").text(leftQty);
}
// update progression stackbar — console.log(progressBar);
var progressBar = currentQty / targetQty * 100;
$(".completed-bar").css('width', progressBar + '%');
}, 300);
});
});
// configuration of the observer:
var config = {
attributes: false,
childList: true,
characterData: false
};
// pass in the target node, as well as the observer options
observer.observe(target, config);
</script>
var leftQty = targetQty - (currentQty % targetQuantity);
模数运算符 %
将为您提供 currentQuantity 除以目标数量后的余数。然后,您可以从 targetQuantity 中减去它以获得一包啤酒的数量。
1 % 12 = 1
12 - 1 = 11 beers remaining in a 12 pack
13 % 12 = 1
12 - 1 = 11 beers remaining in a 24 pack
25 % 12 = 1
12 - 1 = 11 beers remaining in a 36 pack
等等
您可以在进度指示器旁边显示当前的礼包数量。
var totalPacks = Math.ceil(currentQuantity/targetQuantity)
You have {leftQty} beers of pack {totalPacks}
非常感谢@hapi,你节省了我宝贵的时间:)
现在我的进度条出现了另一个问题。
每次我们添加 12 个附加产品时是否可以重置为 0?
(示例:添加 13 个产品时,进度条就像只添加了一个产品,与 25 个等相同)
再次感谢您的帮助:)
这是我更新的代码和新的 link 我的工作进度 https://bcambre-eshop.webflow.io/untitled
<script>
// Initialize texts
$(".beer-info").hide();
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
// select the target node — here : .cart-list
var target = document.getElementById('target');
// input here your reference value
var targetQty = 12;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
//console.log('cart update');
setTimeout(function(){
var currentQty = $('.w-commerce-commercecartopenlinkcount').text();
var leftQty = targetQty - currentQty ;
// update counter — console.log('cans missing' + ' ' + leftQty);
if ( leftQty <= 0 ) {
$(".beers-left").text(leftQty);
$(".beer-info").hide();
//$(".beer-info-alt").show();
//$(".checkout-abs").show();
}
else {
//$(".beer-info-alt").hide();
//$(".checkout-abs").hide();
$(".beer-info").show();
$(".beers-left").text(leftQty);
}
//
var leftQuantity = targetQty - (currentQty % targetQty);
if ( leftQuantity >= 12 ) {
$(".beer-info-alt").show();
$(".checkout-abs").show();
}
else {
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
}
var totalPacks = Math.ceil(currentQty/targetQty);
$(".number-of-packs").text(totalPacks);
$(".beers-left").text(leftQty);
$(".beers-left2").text(leftQuantity);
// update progression stackbar — console.log(progressBar);
var progressBar = currentQty / targetQty * 100;
$(".completed-bar").css('width', progressBar + '%');
}, 300);
});
});
// configuration of the observer:
var config = {
attributes: false,
childList: true,
characterData: false
};
// pass in the target node, as well as the observer options
observer.observe(target, config);
</script>
您好,我的代码有问题 我想做同样的事情,但是是 12 的倍数而不是数字 12
例如 12 瓶啤酒、24 瓶啤酒等,但不是 13、14 或 15 瓶啤酒。
抱歉我的英文很烂
https://bcambre-eshop.webflow.io/test
谢谢
<script>
// Initialize texts
$(".beer-info").hide();
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
// select the target node — here : .cart-list
var target = document.getElementById('target');
// input here your reference value
var targetQty = 12;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
//console.log('cart update');
setTimeout(function(){
var currentQty = $('.w-commerce-commercecartopenlinkcount').text();
var leftQty = targetQty - currentQty ;
// update counter — console.log('cans missing' + ' ' + leftQty);
if ( leftQty <= 0 ) {
$(".beers-left").text(leftQty);
$(".beer-info").hide();
$(".beer-info-alt").show();
$(".checkout-abs").show();
}
else {
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
$(".beer-info").show();
$(".beers-left").text(leftQty);
}
// update progression stackbar — console.log(progressBar);
var progressBar = currentQty / targetQty * 100;
$(".completed-bar").css('width', progressBar + '%');
}, 300);
});
});
// configuration of the observer:
var config = {
attributes: false,
childList: true,
characterData: false
};
// pass in the target node, as well as the observer options
observer.observe(target, config);
</script>
var leftQty = targetQty - (currentQty % targetQuantity);
模数运算符 %
将为您提供 currentQuantity 除以目标数量后的余数。然后,您可以从 targetQuantity 中减去它以获得一包啤酒的数量。
1 % 12 = 1
12 - 1 = 11 beers remaining in a 12 pack
13 % 12 = 1
12 - 1 = 11 beers remaining in a 24 pack
25 % 12 = 1
12 - 1 = 11 beers remaining in a 36 pack
等等
您可以在进度指示器旁边显示当前的礼包数量。
var totalPacks = Math.ceil(currentQuantity/targetQuantity)
You have {leftQty} beers of pack {totalPacks}
非常感谢@hapi,你节省了我宝贵的时间:)
现在我的进度条出现了另一个问题。 每次我们添加 12 个附加产品时是否可以重置为 0? (示例:添加 13 个产品时,进度条就像只添加了一个产品,与 25 个等相同)
再次感谢您的帮助:)
这是我更新的代码和新的 link 我的工作进度 https://bcambre-eshop.webflow.io/untitled
<script>
// Initialize texts
$(".beer-info").hide();
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
// select the target node — here : .cart-list
var target = document.getElementById('target');
// input here your reference value
var targetQty = 12;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
//console.log('cart update');
setTimeout(function(){
var currentQty = $('.w-commerce-commercecartopenlinkcount').text();
var leftQty = targetQty - currentQty ;
// update counter — console.log('cans missing' + ' ' + leftQty);
if ( leftQty <= 0 ) {
$(".beers-left").text(leftQty);
$(".beer-info").hide();
//$(".beer-info-alt").show();
//$(".checkout-abs").show();
}
else {
//$(".beer-info-alt").hide();
//$(".checkout-abs").hide();
$(".beer-info").show();
$(".beers-left").text(leftQty);
}
//
var leftQuantity = targetQty - (currentQty % targetQty);
if ( leftQuantity >= 12 ) {
$(".beer-info-alt").show();
$(".checkout-abs").show();
}
else {
$(".beer-info-alt").hide();
$(".checkout-abs").hide();
}
var totalPacks = Math.ceil(currentQty/targetQty);
$(".number-of-packs").text(totalPacks);
$(".beers-left").text(leftQty);
$(".beers-left2").text(leftQuantity);
// update progression stackbar — console.log(progressBar);
var progressBar = currentQty / targetQty * 100;
$(".completed-bar").css('width', progressBar + '%');
}, 300);
});
});
// configuration of the observer:
var config = {
attributes: false,
childList: true,
characterData: false
};
// pass in the target node, as well as the observer options
observer.observe(target, config);
</script>