how to prevent adding the same product 2 times in the shopping cart

Question

Can you please tell me what i did wrong in js code ...I'm trying to prevent adding the the same product twice by clicking 'add to cart' button then alert him that this product was already added in the shopping cart

JS code:

 function ready() { //REMOVE THE SHOPPING ITEM FROM THE CART var removeCartItemButtons = document.getElementsByClassName('btn-danger') for (var i = 0; i < removeCartItemButtons.length; i++) { var button = removeCartItemButtons[i] button.addEventListener('click', removeCartItem) } var quantityInputs = document.getElementsByClassName('cart-quantity-input') for (var i = 0; i < quantityInputs.length; i++) { var input = quantityInputs[i] input.addEventListener('change', quantityChanged) } var addToCartButtons = document.getElementsByClassName('add-to-cart') for (var i = 0; i < addToCartButtons.length; i++) { var button = addToCartButtons[i] button.addEventListener('click', addToCartClicked) } } function addToCartClicked(event) { event.preventDefault() var button = event.target var shopItem = button.parentElement.parentElement.parentElement.parentElement var title = shopItem.getElementsByClassName('shop-title')[0].innerText var price = shopItem.getElementsByClassName('new-price')[0].innerText var image = shopItem.getElementsByClassName('img')[0].src addItemToCart(title, price, image) } //Add the product to the shopping Cart function addItemToCart(title, price, image) { var cartRow = document.createElement('div') var cartItems = document.getElementsByClassName('cart-items')[0] var cartItemsNames = cartItems.getElementsByClassName('cart-title') //prevent the same product to be added twice for (var i = 0; i < cartItemsNames.length; i++) { if (cartItemsNames[i].innerText == title) { alert('error') return } } var cartRowContents = ` <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"><a href="#"></a></i> <a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">${title}</h5> <span class="product-color">Color : Black</span> <span class="product-size">Size : SL</span> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">${price}</strong> </div> </div> ` cartRow.innerHTML = cartRowContents cartItems.append(cartRow) }

 <html> <head> <title>shopping cart</title> </head> <body> <div class="cart-items"> <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"></i> <a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">product1</h5> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">$12.00</strong> </div> </div> </div> <div class="row shop-item"> <div class="col-xs-12 col-md-4"> <div class="list-img"> <div class="product-img"> <div class="pro-type"> <span>new</span> </div> <a href="#"><img src="img/products/13.jpg" class="img" alt="Product Title" /></a> </div> </div> </div> <div class="col-xs-12 col-md-8"> <div class="list-text"> <h3 class="shop-title">product1</h3> <h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5> <div class="list-btn"> <a href="#" class="add-to-cart" data-id="4">add to cart</a> </div> </div> </div> </div> </body> </html>

Here is the code what i did...can you please tell me what i did wrong in JS ?...thanks

Answer 1

ready function in code snippet not run,you have to call it at the bottom.

in addToCartClicked function, just use document instead shopItem

function addToCartClicked(event) {
  event.preventDefault()
  var title = document.getElementsByClassName('shop-title')[0].innerText
  var price = document.getElementsByClassName('new-price')[0].innerText
  var image = document.getElementsByClassName('img')[0].src
  addItemToCart(title, price, image)
}

in addItemToCart function just use document instead cartItems

function addItemToCart(title, price, image) {
  var cartRow = document.createElement('div')
  var cartItemsNames = document.getElementsByClassName('cart-title')
  //prevent the same product to be added twice
  for (let i = 0; i < cartItemsNames.length; i++) {
    if (cartItemsNames[i].innerText == title) {
      alert('error')
      return
    }
  }
  // ....
  // ....
}

The above changes are just to make your code clearer.

 function ready() { //REMOVE THE SHOPPING ITEM FROM THE CART var removeCartItemButtons = document.getElementsByClassName('btn-danger') for (var i = 0; i < removeCartItemButtons.length; i++) { var button = removeCartItemButtons[i] // button.addEventListener('click', removeCartItem) } var quantityInputs = document.getElementsByClassName('cart-quantity-input') for (var i = 0; i < quantityInputs.length; i++) { var input = quantityInputs[i] // input.addEventListener('change', quantityChanged) } var addToCartButtons = document.getElementsByClassName('add-to-cart') for (var i = 0; i < addToCartButtons.length; i++) { var button = addToCartButtons[i] button.addEventListener('click', addToCartClicked) } } function addToCartClicked(event) { event.preventDefault() console.log(123) var title = document.getElementsByClassName('shop-title')[0].innerText var price = document.getElementsByClassName('new-price')[0].innerText var image = document.getElementsByClassName('img')[0].src addItemToCart(title, price, image) } //Add the product to the shopping Cart function addItemToCart(title, price, image) { var cartRow = document.createElement('div') var cartItemsNames = document.getElementsByClassName('cart-title') //prevent the same product to be added twice for (let i = 0; i < cartItemsNames.length; i++) { if (cartItemsNames[i].innerText == title) { alert('error') return } } var cartRowContents = ` <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"><a href="#"></a></i> <a class="cart-img" href="cart.html"><img src="${image}" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">${title}</h5> <span class="product-color">Color : Black</span> <span class="product-size">Size : SL</span> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">${price}</strong> </div> </div> ` cartRow.innerHTML = cartRowContents cartItems.append(cartRow) } ready()

 <html> <head> <title>shopping cart</title> </head> <body> <div class="cart-items"> <div class="sin-itme clearfix cart-row"> <i class="mdi mdi-close btn-danger"></i> <a class="cart-img" href="cart.html"><img src="img/cart/2.png" alt="" /></a> <div class="menu-cart-text"> <h5 class="cart-title">product1</h5> <label for="quantity" class="quantity-text">Quantity: </label> <input type="text" class="cart-quantity-input" name="quantity" type="number" value="1"> <strong class="price">$12.00</strong> </div> </div> </div> <div class="row shop-item"> <div class="col-xs-12 col-md-4"> <div class="list-img"> <div class="product-img"> <div class="pro-type"> <span>new</span> </div> <a href="#"><img src="img/products/13.jpg" class="img" alt="Product Title" /></a> </div> </div> </div> <div class="col-xs-12 col-md-8"> <div class="list-text"> <h3 class="shop-title">product1</h3> <h5><span class="new-price">$69.30</span><del class="old-price">$79.30</del></h5> <div class="list-btn"> <a href="#" class="add-to-cart" data-id="4">add to cart</a> </div> </div> </div> </div> </body> </html>

how to prevent adding the same product 2 times in the shopping cart

Question

1 answers

solution1
0 2019-02-28 08:41:33

how to prevent adding the same product 2 times in the shopping cart

Question

1 answers

solution1 0 2019-02-28 08:41:33

solution1
0 2019-02-28 08:41:33