CODEWITHSUNDEEP
javascriptarraysmultidimensional-arrayshopping-cart
Ritesh Singh
Ritesh Singh

Reputation: 21

while making a shopping cart in javascript i am stuck with a function already in cart?

var products = [

  ["Product1", 1, "100", "1"],
  ["Prodict2", 1, "99", "2"],
  ["Product3", 1, "60", "3"],
  ["Product4", 1, "50", "4"],


];

function displayProducts() {
  //alert('page');
  var productdata = "<div class='w3-container ' style='margin:50px 0;'>";

  for (i = 0; i < products.length; i++) {
    productdata += "<div class='w3-third'><div class='w3-row-padding w3-card w3-container w3-padding-32  w3-center'>" + products[i][0] + "<br> Rs " + products[i][2] + "<br> <button class='w3-btn w3-green w3-round'onclick='addtocart(" + i + ")'>Add to cart</button></div></div>";
  }
  productdata += "</div>";

  document.getElementById('display').innerHTML = productdata;

}


function addtocart(a) {
  cart.push(products[a]);
  if (products[a] == cart[a]) {
    alert("already in cart");
  }
  displaycart();
}



var cart = [];




function displaycart() {
  cartdata = '<table class="w3-table w3-centered w3-border w3-bordered w3-hoverable"><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th><th>Delete</th></tr>';


  var Subtotal = 0;

  for (i = 0; i < cart.length; i++) {

    Subtotal += cart[i][1] * cart[i][2]
    cartdata += "<tr><td>" + cart[i][0] + "</td><td><button class='w3-green w3-btn w3-circle' onclick= 'lessqty(" + i + ")'> - </button> " + cart[i][1] + " <button class='w3-green w3-btn w3-circle' onclick= 'addqty(" + i + ")'>+</button></td><td>" + cart[i][2] + "</td><td>" + cart[i][1] * cart[i][2] + "</td><td><button class='w3-btn w3-red ' onclick='delElement(" + i + ")'>🗑️   </button></td></tr>"
  }
  cartdata += '<tr><td></td><td></td><td></td><td><b>' + Subtotal + '</b></td><td></td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function delElement(a) {
  cart.splice(a, 1);
  displaycart();
}

function addqty(a) {
  cart[a][1] = cart[a][1] + parseInt(1);

  displaycart();
}

function lessqty(a) {
  cart[a][1] = cart[a][1] - parseInt(1);
  if (cart[a][1] == 0) {

    alert('quantity cannot be zero!');
    cart[a][1] = parseInt(1);
  }
  displaycart();
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body onload="displayProducts()">
  <div class="" id="display" style="max-width:800px; margin:auto;"></div>
  <div class="" id="cart"></div>
</body>

If user tries to add similar product in cart twice it should show an error message to user I tried making id in products array for eg product[0][3] will get id itself to identify if the products is already in cart but not sure how to compare it with the value of array in cart I tried the specific thing in addtocart() function but it was not giving correct output

please suggest me how can i check if the product is already in cart

thanks in advance

Upvotes: 0

Views: 515

Answers (1)

Nick
Nick

Reputation: 147196

You're not checking if the product is already in the cart correctly. Based on your sample data, you should check whether any of the entries in the cart has the same product name as the product being added:

function addtocart(a) {
  if (cart.some(p => p[0] == products[a][0])) {
    alert("already in cart");
  } else {
    cart.push(products[a]);
  }
  displaycart();
}

Note also that you shouldn't add to the cart unless the product is not already in the cart.

Demo:

var products = [
  ["Product1", 1, "100", "1"],
  ["Product2", 1, "99", "2"],
  ["Product3", 1, "60", "3"],
];

function displayProducts() {
  //alert('page');
  var productdata = "<div class='w3-container ' style='margin:50px 0;'>";

  for (i = 0; i < products.length; i++) {
    productdata += "<div class='w3-third'><div class='w3-row-padding w3-card w3-container w3-padding-32  w3-center'>" + products[i][0] + "<br> Rs " + products[i][2] + "<br> <button class='w3-btn w3-green w3-round'onclick='addtocart(" + i + ")'>Add to cart</button></div></div>";
  }
  productdata += "</div>";

  document.getElementById('display').innerHTML = productdata;

}


function addtocart(a) {
  if (cart.some(p => p[0] == products[a][0])) {
    alert("already in cart");
  } else {
    cart.push(products[a]);
  }
  displaycart();
}



var cart = [];




function displaycart() {
  cartdata = '<table class="w3-table w3-centered w3-border w3-bordered w3-hoverable"><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th><th>Delete</th></tr>';


  var Subtotal = 0;

  for (i = 0; i < cart.length; i++) {

    Subtotal += cart[i][1] * cart[i][2]
    cartdata += "<tr><td>" + cart[i][0] + "</td><td><button class='w3-green w3-btn w3-circle' onclick= 'lessqty(" + i + ")'> - </button> " + cart[i][1] + " <button class='w3-green w3-btn w3-circle' onclick= 'addqty(" + i + ")'>+</button></td><td>" + cart[i][2] + "</td><td>" + cart[i][1] * cart[i][2] + "</td><td><button class='w3-btn w3-red ' onclick='delElement(" + i + ")'>🗑️   </button></td></tr>"
  }
  cartdata += '<tr><td></td><td></td><td></td><td><b>' + Subtotal + '</b></td><td></td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function delElement(a) {
  cart.splice(a, 1);
  displaycart();
}

function addqty(a) {
  cart[a][1] = cart[a][1] + parseInt(1);

  displaycart();
}

function lessqty(a) {
  cart[a][1] = cart[a][1] - parseInt(1);
  if (cart[a][1] == 0) {

    alert('quantity cannot be zero!');
    cart[a][1] = parseInt(1);
  }
  displaycart();
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<body onload="displayProducts()">
  <div class="" id="display" style="max-width:800px; margin:auto;"></div>
  <div class="" id="cart"></div>
</body>

Upvotes: 2

Related Questions