將 12 件產品添加到購物車

Question

您好，我的代碼有問題，我想做同樣的事情，但使用 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>

Answer 1

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}

Answer 2

非常感謝@hapi，你為我節省了寶貴的時間:)

現在我的進度條還有另一個問題。 每次我們添加 12 個附加產品時，是否可以將其重置為 0？ （例如：當添加 13 個產品時，進度條就像只添加了一個產品而與 25 等相同）

再次感謝你的幫助 ：）

這里是我更新的代碼和工作進度的新鏈接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>