Shopping cart
Résolu
Richard92
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
je voudrais ajouter le button remove a coter de la quantité de produit mais je n'y arrive pas, je comprend pas la logique.
je voudrais ajouter le button remove a coter de la quantité de produit mais je n'y arrive pas, je comprend pas la logique.
<!DOCTYPE html>
<html>
<head>
<title>
Panier Js
</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="store.js" async></script>
</head>
<body>
<section class="container content-section">
<h2 class="section-header">Coffee</h2>
</section>
<section class="container content-section">
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Expresso</span>
<img class="shop-item-image" src="img/img-1.jpg">
<div class="shop-item-details">
<span class="shop-item-price">$19.99</span>
<button class="shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<span class="shop-item-title">Cappuccino</span>
<img class="shop-item-image" src="img/img-2.jpg">
<div class="shop-item-details">
<span class="shop-item-price">$6.99</span>
<button class="shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
</div>
</section>
<section class="container content-section">
<h2 class="section-header">CART</h2>
<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="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>
</body>
</html>
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
}else {
ready()
}
function ready() {
var removeCartItemsButtons = document.getElementsByClassName('btn-danger')
for (var i = 0 ; i < removeCartItemsButtons.length; i++) {
var button = removeCartItemsButtons[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('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
}
function removeCartItem(e) {
var buttonClicked = e.target
buttonClicked.remove()
}
function quantityChanged(e) {
var input = e.target
if(isNaN(input.value) || input.value < 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
addItemToCard(title, price, imageSrc)
}
function addItemToCard(title, price, imageSrc) {
var cartRow = document.createElement('div')
var cartItems = document.getElementsByClassName('cart-items')[0]
cartRow.classList.add('cart-row')
var cartRowContents =
`
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<input class="cart-quantity-input" type="number" value="1">
<button class="btn-danger">Remove</button>
`
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow)
}
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 cartRows = cartRows[i]
var priceElement = cartRows.getElementsByClassName('cart-price')[0]
var quantityElement = cartRows.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}
https://www.commentcamarche.net/infos/25917-marquer-un-fil-de-discussion-comme-etant-resolu/