Même produit mais ajoute une autre ligne dans le tableau (Javascript seulement)

Question

J'ai un problème simple. Lorsque j'ajoute un produit au panier et rajoute le même produit au panier, il ajoute une autre ligne. Il devrait juste augmenter sa quantité. Espérant votre réponse. Ce sera une grande aide pour moi. Veuillez n'utiliser que du JAVASCRIPT pur. Aucun JQUERY. Merci les gars.

//var qtyTotal = 0; 
 
    //var priceTotal = 0; 
 
    var products = []; 
 

 

 
    function addProduct() { 
 
     var productID = document.getElementById("productID").value; 
 
     var product_desc = document.getElementById("product_desc").value; 
 
     var qty = document.getElementById("quantity").value; 
 
     // qtyTotal = qtyTotal + parseInt(qty); 
 
     //document.getElementById("qtyTotals").innerHTML=qtyTotal; 
 
     var price = document.getElementById("price").value; 
 

 
     var newProduct = { 
 

 
      product_id : null, 
 
      product_desc : null, 
 
      product_qty : 0, 
 
      product_price : 0.00, 
 
     }; 
 
     newProduct.product_id = productID; 
 
     newProduct.product_desc = product_desc; 
 
     newProduct.product_qty = qty; 
 
     newProduct.product_price = price; 
 

 

 
     products.push(newProduct); 
 

 
     //console.log("New Product " + JSON.stringify(newProduct)) 
 
     //console.log("Products " + JSON.stringify(products)) 
 

 
     var html = "<table border='1|1' >"; 
 
     html+="<td>Product ID</td>"; 
 
     html+="<td>Product Description</td>"; 
 
     html+="<td>Quantity</td>"; 
 
     html+="<td>Price</td>"; 
 
     html+="<td>Action</td>"; 
 
     for (var i = 0; i < products.length; i++) { 
 
     html+="<tr>"; 
 
     html+="<td>"+products[i].product_id+"</td>"; 
 
     html+="<td>"+products[i].product_desc+"</td>"; 
 
     html+="<td>"+products[i].product_qty+"</td>"; 
 
     html+="<td>"+products[i].product_price+"</td>"; 
 
     html+="<td><button type='submit' onClick='deleteProduct(\""+products[i].product_id +"\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\""+products[i].product_id +"\", this);'/>Add to Cart</button></td>"; 
 
     html+="</tr>"; 
 
    } 
 
     html+="</table>"; 
 
     document.getElementById("demo").innerHTML = html; 
 

 
     document.getElementById("resetbtn").click()    
 
} 
 
    function deleteProduct(product_id, e) { 
 
     e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode); 
 
     for(var i = 0; i < products.length; i++) { 
 
      if (products[i].product_id == product_id) { 
 
       // DO NOT CHANGE THE 1 HERE 
 
       products.splice(i, 1); 
 
      } 
 
     } 
 
    } 
 

 
    function addCart(product_id){ 
 
     var html = ''; 
 
     var ele = document.getElementById("demo2");  
 
     if(ele.innerHTML == '') 
 
     { 
 
     html+="<table id='tblCart' border='1|1'>"; 
 
     html+="<tr><td>Product ID</td>"; 
 
     html+="<td>Product Description</td>"; 
 
     html+="<td>Quantity</td>"; 
 
     html+="<td>Price</td>"; 
 
     html+="<td>Total</td>"; 
 
     html+="<td>Action</td></tr>"; 
 
     } 
 
     for (var i = 0; i < products.length; i++) { 
 
      if (products[i].product_id == product_id) { 
 
      products[i].product_qty = parseInt(products[i].product_qty) + 1; 
 
      html+="<tr>"; 
 
      html+="<td>"+products[i].product_id+"</td>"; 
 
      html+="<td>"+products[i].product_desc+"</td>"; 
 
      html+="<td>"+products[i].product_qty+"</td>"; 
 
      html+="<td>"+products[i].product_price+"</td>"; 
 
      html+="<td>"+parseInt(products[i].product_price)*parseInt(products[i].product_qty)+"</td>"; 
 
      html+="<td><button type='submit' onClick='subtractQuantity(\""+products[i].product_id +"\", this);'/>Subtract Quantity</button></td>"; 
 
      html+="</tr>"; 
 
     }  
 
    } 
 
     
 
     if(ele.innerHTML == '') 
 
     { 
 
     html+= "</table>"; 
 
     ele.innerHTML = html; 
 
     } 
 
     else 
 
     { 
 
     document.getElementById("tblCart").innerHTML += html;  
 
     }  
 
    } 
 
    
 
    function subtractQuantity(product_id) 
 
    { alert(product_id); 
 
    for(var i = 0; i < products.length; i++) { 
 
     if (products[i].product_id == product_id & products[i].product_qty >= 1) { 
 
      products[i].product_qty = parseInt(products[i].product_qty) - 1; 
 
     } 
 

 
     if (products[i].product_id == 0) { 
 
      removeItem(products[i].product_id); 
 
     } 
 
     console.log("Products " + JSON.stringify(products)); 
 
     
 
    } 
 
} 
 

 
function removeItem(product_id) { 
 
    for(var i = 0; i < products.length; i++) { 
 
     if (products[i].product_id == product_id) { 
 
      // DO NOT CHANGE THE 1 HERE 
 
      products.splice(i, 1); 
 
     } 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Shopping Cart Pure Javascript</title> 
 
</head> 
 
<body> 
 
<form name="order" id="order"> 
 
    <table> 
 
     <tr> 
 
      <td> 
 
       <label for="productID">Product ID:</label> 
 
      </td> 
 
      <td> 
 
       <input id="productID" name="product" type="text" size="28" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="product">Product Desc:</label> 
 
      </td> 
 
      <td> 
 
       <input id="product_desc" name="product" type="text" size="28" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="quantity">Quantity:</label> 
 
      </td> 
 
      <td> 
 
       <input id="quantity" name="quantity" width="196px" required/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <label for="price">Price:</label> 
 
      </td> 
 
      <td> 
 
       <input id="price" name="price" size="28" required/> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" /> 
 
    <input type="button" id="btnAddProduct" onclick="addProduct();" value="Add New Product" > 
 

 

 
</form> 
 
<br> 
 
<p id="demo"></p> <br/> 
 
<h2> Shopping Cart </h2> 
 
<p id="demo2"></p> 
 
</body> 
 
</html>

Answer 1

Tout d'abord, vous essayez de stocker vos produits et articles de panier dans le MATRICE MÊME. Le chariot doit contenir instances du produit, et non l'inverse. Deuxièmement, vous continuez à ajouter à votre table html sans jamais enlever la ligne précédente (pour le même produit). Troisièmement, vous transtypez votre variable de prix en nombre entier, les valeurs monétaires doivent toujours être flottantes ou doubles.

Je suppose que vous cherchez quelque chose où comme ce qui suit:

var products = []; 
     var cart = []; 

     function addProduct() { 
      var productID = document.getElementById("productID").value; 
      var product_desc = document.getElementById("product_desc").value; 
      var qty = document.getElementById("quantity").value; 
      var price = document.getElementById("price").value; 

      var newProduct = { 
       product_id: null, 
       product_desc: null, 
       product_qty: 0, 
       product_price: 0.00, 
      }; 
      newProduct.product_id = productID; 
      newProduct.product_desc = product_desc; 
      newProduct.product_qty = qty; 
      newProduct.product_price = price; 


      products.push(newProduct); 


      var html = "<table border='1|1' >"; 
      html += "<td>Product ID</td>"; 
      html += "<td>Product Description</td>"; 
      html += "<td>Quantity</td>"; 
      html += "<td>Price</td>"; 
      html += "<td>Action</td>"; 
      for (var i = 0; i < products.length; i++) { 
       html += "<tr>"; 
       html += "<td>" + products[i].product_id + "</td>"; 
       html += "<td>" + products[i].product_desc + "</td>"; 
       html += "<td>" + products[i].product_qty + "</td>"; 
       html += "<td>" + products[i].product_price + "</td>"; 
       html += "<td><button type='submit' onClick='deleteProduct(\"" + products[i].product_id + "\", this);'/>Delete Item</button> &nbsp <button type='submit' onClick='addCart(\"" + products[i].product_id + "\", this);'/>Add to Cart</button></td>"; 
       html += "</tr>"; 
      } 
      html += "</table>"; 
      document.getElementById("demo").innerHTML = html; 

      document.getElementById("resetbtn").click() 
     } 
     function deleteProduct(product_id, e) { 
      e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode); 
      for (var i = 0; i < products.length; i++) { 
       if (products[i].product_id == product_id) { 
        // DO NOT CHANGE THE 1 HERE 
        products.splice(i, 1); 
       } 
      } 
     } 

     function addCart(product_id) { 


      //Indentify the product and add it to new "cart" array 
      for (var i = 0; i < products.length; i++) { 
       if (products[i].product_id == product_id) { 
        var cartItem = null; 
        for (var k = 0; k < cart.length; k++) { 
         if (cart[k].product.product_id == products[i].product_id) {//Already exists in cart, increment quantity. 
          cartItem = cart[k]; 
          cart[k].product_qty++;//Increment by one only, as requested. 
          break; 
         } 
        } 
        if (cartItem == null) { 
         //Every item in the cart specifies the product in question as well as how many of the product there is in the cart, starts off at product's quantity 
         var cartItem = { 
          product: products[i], 
          product_qty: products[i].product_qty // Start of at product's quantity 
         }; 
         cart.push(cartItem); 
        } 

        break 
       } 
      } 

      renderCartTable(); 

     } 

     function renderCartTable() { 
      var html = ''; 
      var ele = document.getElementById("demo2"); 
      ele.innerHTML = ''; //Start by clearng your table of old elements 

      html += "<table id='tblCart' border='1|1'>"; 
      html += "<tr><td>Product ID</td>"; 
      html += "<td>Product Description</td>"; 
      html += "<td>Quantity</td>"; 
      html += "<td>Price</td>"; 
      html += "<td>Total</td>"; 
      html += "<td>Action</td></tr>"; 
      for (var i = 0; i < cart.length; i++) { 
       html += "<tr>"; 
       html += "<td>" + cart[i].product.product_id + "</td>"; 
       html += "<td>" + cart[i].product.product_desc + "</td>"; 
       html += "<td>" + cart[i].product_qty + "</td>"; 
       html += "<td>" + cart[i].product.product_price + "</td>"; 
       html += "<td>" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "</td>"; 
       html += "<td><button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/>Subtract Quantity</button></td>"; 
       html += "</tr>"; 
      } 
      html += "</table>"; 
      ele.innerHTML = html; 
     } 

     function subtractQuantity(product_id) 
     { 
      alert("Removing 1 instance of product "+product_id); 
      for (var i = 0; i < cart.length; i++) { 
       if (cart[i].product.product_id == product_id) { 
        cart[i].product_qty--;//decrement by one 
       } 

       if (cart[i].product_qty == 0) { 
        cart.splice(i,1);//Remove from cart 
       } 
       console.log("Products " + JSON.stringify(products)); 
      } 
      //Finally, re-render the cart table 
      renderCartTable(); 
     } 

     function removeItem(product_id) { 
      for (var i = 0; i < products.length; i++) { 
       if (products[i].product_id == product_id) { 
        // DO NOT CHANGE THE 1 HERE 
        products.splice(i, 1); 
       } 
      } 
     } 

Cela va démarrer votre panier sur la quantité spécifiée du produit, puis incrémenter/décrémenter par un à partir de là.