CODEWITHSUNDEEP
javascript
Steve
Steve

Reputation: 4453

How to update order quantity (increment and decrement) in shopping cart?

I have this following code for the shopping cart with pure Javascript which can add multiply products into cart. Any clue on how to update the product quantity when the user click the + and - button in the cart without changing the order of the item in the cart?

Each button already have the product id as primary key. My idea is I could remove (using pop) the selected object using .filter() and then add (using push) back updated object into the list. But doing so will change the order of the cart.

var productList = [
    { id: 101, product: "Logitech Mouse", unitprice: 45.0 },
    { id: 102, product: "Logitech Keyboard", unitprice: 50.0 },
    { id: 103, product: "HP Mouse", unitprice: 35.0 }
  ];

  var cart = [];
  cart.length = 0;

  const createCartHTMLElements = object => {
    // Check type
    if (typeof object !== "object") return false;

    // Start our HTML
    var html = "<table><tbody>";

    // Loop through members of the object
    debugger;
    object.forEach(function(item) {
      html += `<tr><td>${item.product}</td>\
                <td>${item.unitprice.toFixed(2)}</td>\
                <td>\
                <button class="plus-btn" data-id="${item.id}">+</button>\
                <label id="quantity">${item.quantity}</label>\
                <button class="minus-btn" data-id="${item.id}">-</button>\
                </td>\
                <td>${item.total.toFixed(2)}</td>\
                <td><i class="fa fa-remove del" data-id="${item.id}"></i></td>\
                </tr>`;
    });

    // Finish the table:
    html += "</tbody></table>";

    // Return the table
    return html;
  };

  const populateProducts = arrOfObjects => {
    // Start our HTML
    var html = "";

    // Loop through members of the object
    arrOfObjects.forEach(function(item) {
      html += `<div class="column"><div class="card">\
                <h2>${item.product}</h2>
                <p class="price">RM ${item.unitprice.toFixed(2)}</p>
                <p><button class=AddToCart data-id="${
                  item.id
                }">Add to Cart</button></p>\
                </div></div>`;
    });

    return html;
  };

  window.addEventListener("load", function() {
    document.getElementById("productRow").innerHTML = populateProducts(
      productList
    );

    var addToCart = document.getElementsByClassName("AddToCart");

    Array.prototype.forEach.call(addToCart, function(element) {
      element.addEventListener("click", function() {
        debugger;
        // Filter the selected "AddToCart" product from the ProductList list object.
        // And push the selected single product into shopping cart list object.
        productList.filter(prod => {
          if (prod.id == element.dataset.id) {
            prod.quantity = 1;
            prod.total = prod.unitprice;
            cart.push(prod);
            document.getElementById(
              "shoppingCart"
            ).innerHTML = createCartHTMLElements(cart);

            return;
          }
        });
      });
    });
  });
<div id="shoppingCartContainer">
  <div id="shoppingCart"></div>
</div>
<hr />
<div id="productRow"></div>

Upvotes: 1

Views: 2527

Answers (1)

Adder
Adder

Reputation: 5868

You use ids multiple times; You should instead apply a class to <label id="quantity">${item.quantity}</label> so that it is <label class="quantity">${item.quantity}</label>. Also please add class price to the price and class total to the total.

Then, you can increase or lower the amount:

$(document.body).on('click', '.plus-btn', function(){
    var $tr = $(this).closest('tr');

    //update the quantity;
    var $quantity = $tr.find('.quantity');
    var n = $quantity.html();
    var i = parseInt(n) + 1;
    $quantity.html(i);

    //update the total price
    var $price = $tr.find('.price');
    var price = parseFloat($price.html());
    var $total = $tr.find('.total');
    $total.html(i*price);
});

$(document.body).on('click', '.minus-btn', function(){
    var $tr = $(this).closest('tr');

    //update the quantity;
    var $quantity = $tr.find('.quantity');
    var n = $quantity.html();
    var i = parseInt(n) - 1;
    if(i<0) i = 0;
    $quantity.html(i);

    //update the total price
    var $price = $tr.find('.price');
    var price = parseFloat($price.html());
    var $total = $tr.find('.total');
    $total.html(i*price);
});

Upvotes: 2

Related Questions