带有 Javascript 香草的购物车。 // 键值问题（数量和价格）

Question

我最近一直在研究开发。 我将创建我的第一个购物车，但我不明白如何为每种产品获取正确的数量和价格键，看起来数据正在覆盖其他数据.. 有人可以启发我吗？

你好，我最近一直在研究开发。 我将创建我的第一个购物车，但我不明白如何为每种产品获取正确的数量和价格键，看起来数据正在覆盖其他数据.. 有人可以启发我吗？

let btnProduit = document.getElementsByClassName("produit");
let total = document.getElementById("total-panier");
let contenuPanier = document.getElementById("contenue");
let panierHTML = document.getElementById("produit-area");
let formPanier = document.getElementById("form-panier");
let input_qt = document.getElementsByClassName("inputqt");
const validate = document.getElementById("validate");
let panier = {};

for (let btn of btnProduit) {
  btn.addEventListener("click", ajouterObjet);
}

function ajouterObjet(event) {
  let nom_objet = event.target.getAttribute("data-name");
  let prix_objet = event.target.getAttribute("data-price");
  console.log(panier);

  produitPanier = {
    produit: nom_objet,
    prix: prix_objet,
    quantite: "100",
  };
  console.log(nom_objet);

  if (panier.hasOwnProperty(nom_objet)) {
    // Ajout d'une classe pour animer la box produit
    // Ajout de la fonction majTotal pour mettre à jour les prix dans "Total" et ainsi eviter les erreurs console en cas de doublon
  } else {
    // Add box-list + liaison au panier
    let boxList = document.createElement("div");
    boxList.classList.add("box-list");
    formPanier.appendChild(boxList);

    // Add box-img + liaison à box-list
    let boxImg = document.createElement("div");
    boxImg.classList.add("box-img");
    boxList.appendChild(boxImg);

    // Add img + liaison à box-img
    let imgProduit = document.createElement("img");
    imgProduit.style.width = "50%";
    imgProduit.style.height = "50%";
    imgProduit.src = "./images/potatoes.jpg";
    boxImg.appendChild(imgProduit);

    // Add box-qte + liaison à box-list
    let boxQte = document.createElement("div");
    boxQte.classList.add("box-qte");
    boxList.appendChild(boxQte);

    // Add Input type number + liaison à box-qte
    let inputProd = document.createElement("input");
    inputProd.classList.add("inputqt");
    inputProd.setAttribute("type", "number");
    inputProd.setAttribute("value", "100");
    inputProd.setAttribute("min", "100");
    inputProd.setAttribute("max", "6000");
    inputProd.setAttribute("data-prix", prix_objet);
    inputProd.setAttribute("step", "100");
    inputProd.style.width = "50%";
    boxQte.appendChild(inputProd);

    // Add box-name + liaison à box-list
    let boxName = document.createElement("div");
    boxName.classList.add("box-name");
    boxList.appendChild(boxName);

    // Add name-panier + liaison à box-name
    let namePanier = document.createElement("div");
    boxName.classList.add("name-panier");
    boxName.appendChild(namePanier);

    // Add name-produit + liaison à name-panier
    let nameProduit = document.createElement("p");
    nameProduit.classList.add("name-produit");
    nameProduit.innerHTML = nom_objet;
    namePanier.appendChild(nameProduit);

    // Add box-price + liaison à box-list
    let boxPrice = document.createElement("div");
    boxPrice.classList.add("box-price");
    boxList.appendChild(boxPrice);

    // Add price-produit + liaison à box-price
    let priceProduit = document.createElement("p");
    priceProduit.classList.add("price-produit");
    boxPrice.appendChild(priceProduit);

    // Empêche que le même produit se clone dans le panier
    panier[nom_objet] = produitPanier;

    majTotal(input_qt);
  }

  for (const input of input_qt) {
    input.addEventListener("change", (event) => {
      majTotal(input_qt);

      produitPanier = {
        produit: nom_objet,
        prix: ((prix_objet * input.value) / 1000).toFixed(2),
        quantite: input.value,
      };
      panier[nom_objet] = produitPanier;
      contenuPanier.value = JSON.stringify(panier);
      console.log(panier);
    });
  }
  // Ajout de la fonction majTotal pour mettre à jour le prix dans "Total"
  function majTotal(prods) {
    let somme = 0;
    for (const input of prods) {
      let prix = input.getAttribute("data-prix");
      let val = input.value;
      somme += (prix * val) / 1000;
    }
    total.innerText = "Total : " + somme.toFixed(2) + "  €";
  }
}
}```

Answer 1

一旦产品进入购物车，它们就会与它们的密钥（数量价格名称）一起存储在 produitPanier {} 中，而 produitPanier {} 本身存储在 panier {} 中。 我无法获得使用输入数字设置的正确数量和正确价格

当我将几件商品放入购物车并用输入数字更改最后一个的数量时，我所有产品的数量都相同

    <title>Click & Collect</title>
</head>

<body>
    <header>
        <div class="box-header">
            <div id="box-txtheader">
                <?php $tab_Information = selectAllData('Information'); ?>
                <p class="txt-header"><?php  echo $tab_Information[0]['adresse']?></p>
                <p class="txt-header"><?php  echo $tab_Information[0]['horaire']?></p>
                <p class="txt-header"><?php  echo $tab_Information[0]['telephonne']?></p>
            </div>
        </div>
    </header>
    <main>
        <!-- BOUCLE FOR PRODUCTS-->
        <div class="list">
            <?php $produit = selectAllData('Produit'); ?>
            <?php foreach($produit as $i) { ?>
            <div class="box-product" id="<?php  echo $i["id"] ?>">
                <p class="name-product"><?php  echo $i["nom"] ?></p>
                <img src="./images/potatoes.jpg" width="100%" height="100%" alt="product">
                <div class="priceqte">
                    <p class="price"><?php  echo $i["prixAuKg"] ?></p>
                    <p class="qte"><?php  echo $i["stock"] ?></p>
                </div>
                <button class="ajouter produit" id="<?php  echo $i["nom"] ?>" data-name="<?php  echo $i["nom"] ?>"
                    data-price="<?php  echo $i["prixAuKg"] ?>">Ajouter</button>
            </div>
            <?php }?>
        </div>
        <!-- SECTION PANIER -->
        <div id="panier">
            <div class="box-panier">
                <i class="fas fa-shopping-basket"></i>
                <p id="text-panier">NomFerme</p>
            </div>
            <!-- PRODUIT DANSLE PANIER -->
            <div class="panier-area" id="produit-area">
                <form id="form-panier" action=" panier.php" method="post">
                    <!-- <div class=" box-list">
                     <div class="box-img">
                         <img src="./images/potatoes.jpg" width="50%" height="50%" alt="product">
                     </div>
                     
                     <div class="box-qte">
                         <button class="moins"> - </button>
                         <p class="qte-panier">5</p>
                         <button class="plus"> + </button>
                     </div>
                     
                     <div class="box-name">
                         <div class="name-panier">
                             <p class="name-produit">Name</p>
                         </div>
                     </div>
                     
                     <div class="box-price">
                         <p class="price-produit">12 EUR</p>
                     </div>
                     </div> -->
            </div>
            <div class="box-validate">
                <div id="box-total">
                    <span id="total-panier"></span>
                </div>
                <input id="contenue" type="hidden" name="panier">
                <button type="submit" id="validate">Valider</button>
            </div>
            </form>
        </div>
    </main>


</html>