如何防止在购物车中两次添加相同的产品
[英]how to prevent adding the same product 2 times in the shopping cart
问题描述
你能告诉我我在 js 代码中做错了什么......我试图通过单击“添加到购物车”按钮来防止添加相同的产品两次，然后提醒他该产品已添加到购物车中
JS代码：
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>
这是我所做的代码...你能告诉我我在 JS 中做错了什么吗？...谢谢
1 个解决方案
解决方案1
0 2019-02-28 08:41:33
代码片段中的就绪函数未运行，您必须在底部调用它。
在 addToCartClicked 函数中，只需使用 document 代替 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)
}
在 addItemToCart 函数中只使用文档而不是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
}
}
// ....
// ....
}
以上改动只是为了让你的代码更清晰。
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 add the same product with different sizes to the shopping cart as a separate item?
通过在文本框中输入多个产品ID将多个产品添加到购物车
[英]adding multiple produt to shopping cart by entering multiple product ID in a textbox
使用 React JS 将购物车中相同产品的数量限制为 1
[英]Limiting the number of same-product items to 1 in a shopping cart with React JS
将产品添加到购物车后，在Magento中显示带有“继续购物”和“转到购物车”选项的弹出窗口
[英]Show popup with the choices “Continue shopping” and “Go to cart”, after adding a product to cart, in Magento
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.