Блог

На этом веб-сайте, над которым я работаю, я столкнулся с новой задачей, которую мне нужно решить, прежде чем двигаться дальше.

При добавлении товаров в корзину счетчик добавляет нужное количество товаров в корзине. Но, и это то, как далеко мне удалось зайти самостоятельно на данный момент, если пользователь хочет удалить товар, счетчик сбрасывается обратно на 0, и я знаю почему. Я настроил

 var qty = document.querySelector('.total-qty')    qty.innerText = 0
  

Если я добавлю 2 футболки и 1 альбом и удалю альбом, счетчик вернется к 0, хотя в корзине все еще есть 2 товара.

Как мне забрать каждый вставленный товар и после удаления товара должным образом обновить счетчик для товаров, оставшихся в корзине?Существует также такая же проблема, если пользователь пытается изменить количество элементов при использовании счетчика ввода.

Должен ли я перебирать все строки внутри корзины и оттуда определять количество?

 function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    var qty = document.querySelector('.total-qty')
    qty.innerText = 0
    updateCartTotal()
    CartIsEmpty()
}


function quantityChanged(event) {
    var input = event.target
    if (isNaN(input.value) || input.value <= 0) {
        input.value = 1
    }
    updateCartTotal()
}

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement.parentElement
    var title = shopItem.getElementsByClassName('product_description_h1')[0].innerText
    var price = shopItem.getElementsByClassName('product_price_button_price-2')[0].innerText
    var imageSrc = shopItem.getElementsByClassName('product_image')[0].src
    var dressing = shopItem.getElementsByClassName('dressing_tab')[0].value
    var itemCount = document.getElementsByClassName('total-qty')[0].innerText
    for (var i = 0; i < itemCount.length; i  ) {
        var itemCount = document.getElementsByClassName('total-qty')[i];
            itemCount.innerText=parseInt(itemCount.innerText) 1;
        }
    var id = shopItem.dataset.itemId
    addItemToCart(title, price, imageSrc, dressing, id)
    updateCartTotal()
}
  

https://jsfiddle.net/gracee1989/8d3sexo0/39/

Вы можете выбрать все входные данные количества после удаления одного и уменьшить их значения, чтобы получить новую сумму. Я переместил quantityInputs переменную из ready в глобальную область видимости, чтобы добиться этого в вашем JSFiddle, но вы можете объявить ее снова внутри removeCartItem , если действительно хотите:

 function removeCartItem(event) {
    var buttonClicked = event.target
    buttonClicked.parentElement.parentElement.remove()
    const total = Array.from(quantityInputs).reduce((a, c) => a   Number(c.value), 0);
    var qty = document.querySelector('.total-qty')
    qty.innerText = total;
    updateCartTotal()
}
  

Здесь reduce работает, присваивая ему начальное значение — в данном случае 0, — на которое ссылается переменная a . Затем он принимает значение из каждого ввода последовательно и добавляет его к последнему.

В более широком смысле, вам может потребоваться подумать о сохранении всех значений корзины в структуре данных, подобной объекту, вместо чтения из DOM каждый раз, когда вы хотите его обновить. Это значительно упростит отслеживание состояния корзины.