[英]Shopping Cart Total Price and Quantity
Below there's a shopping cart that when you remove the product it works and price gets updated, but when I try to add more quantity like 2 or 3 then Total Price doesn't get updated, but when I remove the product it gets updated and that's where's the problem that I don't know how to solve it. 下面有一个购物车,当你删除产品时,它工作,价格得到更新,但当我尝试添加更多的数量,如2或3,然后总价格不会更新,但当我删除产品,它得到更新,这是哪里是我不知道如何解决它的问题。 Also I have added an function with quantity so the minimum of order could be only 1 and if you try to add less than 1 like 0 or -1,-2 it will be changed automatically at number 1, but doesn't work and I need some help.
此外,我添加了一个数量函数,所以最小的顺序可能只有1,如果你尝试添加少于1,如0或-1,-2它将自动更改为1号,但不起作用,我需要一些帮助。
<div class="click-cart">
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span></div>
<div class="olp">
<div class="lakn">
<img class="shop-item-cart" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="shop-title">Product 1</span>
<span class="shop-price">$19.99</span>
<input class="quantity-input" type="number" value="1">
<button class="delete-cart">X</button>
</div></div>
<div class="clear-checkout">
<button class="checkout">Checkout</button>
<button class="clear-cart">Clear Cart</button></div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$10.79</span>
</div>
</div>```
-------------------------------------------------------------------------
let removeCartItemButtons = document.querySelectorAll('.delete-cart');
for (let i = 0; i < removeCartItemButtons.length; i++) {
let button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
let quantityInputs = document.querySelector('.quantity-input');
for (let i = 0; i < quantityInputs.length; i++) {
let input = quantityInputs[i]
input.addEventListener('change', quantityChanged);
}
function removeCartItem (event) {
let buttonCliked = event.target;
buttonCliked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged () {
let input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal ()
}
function updateCartTotal () {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelector('.cart-row');
let total = 0
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelectorAll('.quantity-input');
let price = parseFloat(priceElement.innerText.replace('$', ''))
let quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.querySelector('.cart-total-price').innerText = '$' + total;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" >
<div>
<div class="click-cart">
<div class="cart-row2">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<div class="cart-row">
<div class="lakn">
<img class="shop-item-cart" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
<span class="shop-title">Product 1</span>
<span class="shop-price">$19.99</span>
<input class="quantity-input" type="number" value="1" />
<button class="delete-cart">X</button>
</div>
</div>
<div class="clear-checkout">
<button class="checkout">Checkout</button>
<button class="clear-cart">Clear Cart</button>
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$10.79</span>
</div>
</div>
</div>
</form>
<script>
let removeCartItemButtons = document.querySelectorAll('.delete-cart');
for (let i = 0; i < removeCartItemButtons.length; i++) {
let button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
let quantityInputs = document.querySelectorAll('.quantity-input');
for (let i = 0; i < quantityInputs.length; i++) {
let input = quantityInputs[i]
input.addEventListener('change', quantityChanged);
}
function removeCartItem(event) {
let buttonCliked = event.target;
buttonCliked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged() {
let input = event.target;
if (isNaN(input.value) || input.value <= 0) {
input.value = 1;
}
updateCartTotal()
}
function updateCartTotal() {
let cartItemContainer = document.querySelector('.click-cart');
let cartRows = cartItemContainer.querySelectorAll('.cart-row');
let total = 0
for (let i = 0; i < cartRows.length; i++) {
let cartRow = cartRows[i]
let priceElement = cartRow.querySelector('.shop-price');
let quantityElement = cartRow.querySelector('.quantity-input');
let price = parseFloat(priceElement.innerText.replace('$', ''))
let quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.querySelector('.cart-total-price').innerText = '$' + total;
}
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.