如何将相同的商品添加到购物车

Question

i want on this website to be able to add the same item to the cart but without creating a new row. With if (cartItemNames[i].innerText == title) {alert('This item is already added to the cart')return i prevent the user from adding the same item to the cart and an alert popup.

how would i have to proceed if i want to target the cartItemNames[i] element from the loop to get the quantity input from the same row as that cartItemNames[i] element?

Then i would just add one to the value and set the value?

But than i will have to use the parent method on the cartItemNames[i] element in conjunction with the getElementsByClassName to find the row of the cart and then the quantity input in that row.

That brings me to another question, how to find the row of the cart and then the quantity input in that row?

function addItemToCart(title, price, imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            alert('This item is already added to the cart')
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

JSFiddle: https://jsfiddle.net/sigurd14/3z2c9hjn/1/

Answer 1

This works fine, given the scenario.

Just check for the existence of the row containing the title you are adding. I suggest you use IDs for uniqueness.

Also, use querySelector and querySelectorAll to make your code look cleaner and to remove checks for index of zero.

function addItemToCart(title, price, imageSrc) {
  const exists = [...document.querySelectorAll('.cart-row')].find(row => {
    const target = row.querySelector('.cart-item-title');
    return target && target.textContent === title;
  });

  if (exists) {
    const input = exists.querySelector('.cart-quantity-input');
    input.value = parseInt(input.value, 10) + 1;
  } else {
    var cartItems = document.querySelector('.cart-items');
    var cartRow = document.createElement('div');
    var cartRowContents = `
      <div class="cart-item cart-column">
        <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
          <span class="cart-item-title">${title}</span>
      </div>
      <span class="cart-price cart-column">${price}</span>
      <div class="cart-quantity cart-column">
        <input class="cart-quantity-input" type="number" value="1">
        <button class="btn btn-danger" type="button">REMOVE</button>
      </div>`
    cartRow.classList.add('cart-row');
    cartRow.innerHTML = cartRowContents;
    cartItems.append(cartRow);
    cartRow.querySelector('.btn-danger').addEventListener('click', removeCartItem);
    cartRow.querySelector('.cart-quantity-input').addEventListener('change', quantityChanged);
  }
}

Answer 2

You just need to find the right selectors for the row columns you added. Since you didn't assign rows really per item you have to go by the index of the columns per item you find. I updated the fiddle you posted and this updates the quantity and cart total

function addItemToCart(title, price, imageSrc) {
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
    for (var i = 0; i < cartItemNames.length; i++) {
        if (cartItemNames[i].innerText == title) {
            //alert('This item is already added to the cart')
            var priceCol=cartItems.getElementsByClassName('cart-price')[i];
            var qty=cartItems.getElementsByClassName('cart-quantity-input')[i];
            qty.value=parseInt(qty.value)+1;
            return
        }
    }
    var cartRowContents = `
        <div class="cart-item cart-column">
            <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
            <span class="cart-item-title">${title}</span>
        </div>
        <span class="cart-price cart-column">${price}</span>
        <div class="cart-quantity cart-column">
            <input class="cart-quantity-input" type="number" value="1">
            <button class="btn btn-danger" type="button">REMOVE</button>
        </div>`
    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
    cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartRows = cartItemContainer.getElementsByClassName('cart-row')
    var total = 0
    for (var i = 0; i < cartRows.length; i++) {
        var cartRow = cartRows[i]
        var priceElement = cartRow.getElementsByClassName('cart-price')[0]
        var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0];
        var price = parseFloat(priceElement.innerText.replace('$', '')).toFixed(2);
        var quantity = quantityElement.value
        total = total + (price * quantity)
    }
    total = Math.round(total * 100) / 100
    document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}

https://jsfiddle.net/z26bwhk1/1/