Sujet Précédent Sujet Suivant

Shopping cart

Résolu/Fermé
Richard92 - Modifié le 10 mai 2019 à 13:26
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 10 mai 2019 à 14:44
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. 


<!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
}

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
10 mai 2019 à 13:45
Bonjour,

Tu n'arrives pas à quoi exactement ?
Ajouter un bouton "remove"
Le place là où tu veux ?
Le faire fonctionner ?

Si c'est un souci de "placement" à l'endroit voulu... le souci ne concerne en rien le Javascript... mais plutôt le CSS ....




0
Richard92
10 mai 2019 à 14:43
Je viens de trouver la solution merci a toi.
0
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705 > Richard92
10 mai 2019 à 14:44
Dans ce cas, merci de mettre le sujet en RESOLU
https://www.commentcamarche.net/infos/25917-marquer-un-fil-de-discussion-comme-etant-resolu/
0

Discussions similaires

arnaque site factory shop
aligc3s -
Afrikarnak -

2 réponses
Ce site est-il une arnaque ?!?
Doughans -
Gege -

13 réponses
Foot factory shop arnaque ?
Imoreb -
Alex42 -

45 réponses
mondoshopping-boutique
hommedunord50 -
hommedunord50 -

2 réponses
Commande non reçue ONLINE STORE
Pat -
Leo -

4 réponses