Блог

Главная - Вопросы по программированию - Добавление наборов из 12 товаров в корзину

Добавление наборов из 12 товаров в корзину

#javascript #jquery #e-commerce #webflow

#javascript #jquery #электронная коммерция #webflow

Вопрос:

Здравствуйте, у меня проблема с моим кодом, я хотел бы сделать то же самое, но с числом, кратным 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>

Ответ №1:

 var leftQty = targetQty - (currentQty % targetQuantity);

оператор Modulus % выдаст вам остаток после деления текущего количества на целевое количество. Затем вы можете вычесть это из 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}

Ответ №2:

Большое тебе спасибо @hapi, ты сэкономил мне драгоценное время 🙂

Теперь у меня другая проблема с моей панелью прогресса. Можно ли сбрасывать значение 0 каждый раз, когда мы добавляем 12 дополнительных товаров? (Пример: при добавлении 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>

Комментарии:

1. Последняя часть моего первоначального ответа должна помочь в этом. Оставшееся количество должно соответствовать тому, что вы ищете var leftQty = targetQty — (currentQty % targetQuantity);

Метки: