मेरे पास शॉपिंग कार्ट के लिए शुद्ध जावास्क्रिप्ट के साथ यह निम्न कोड है जो कार्ट में गुणा उत्पादों को जोड़ सकता है। जब उपयोगकर्ता कार्ट में आइटम के क्रम को बदले बिना कार्ट में + और - बटन पर क्लिक करता है, तो उत्पाद की मात्रा को कैसे अपडेट किया जाए, इस पर कोई सुराग?

प्रत्येक बटन में पहले से ही प्राथमिक कुंजी के रूप में उत्पाद आईडी है। मेरा विचार है कि मैं .filter() का उपयोग करके चयनित ऑब्जेक्ट को हटा सकता हूं (pop का उपयोग करके) और फिर सूची में (push का उपयोग करके) अद्यतन ऑब्जेक्ट को वापस जोड़ सकता हूं। लेकिन ऐसा करने से कार्ट का क्रम बदल जाएगा।

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>
1
Steve 9 सितंबर 2019, 11:13

1 उत्तर

सबसे बढ़िया उत्तर

आप कई बार आईडी का उपयोग करते हैं; इसके बजाय आपको <label id="quantity">${item.quantity}</label> पर एक वर्ग लागू करना चाहिए ताकि वह <label class="quantity">${item.quantity}</label> हो। कृपया मूल्य में कक्षा price और कुल में total वर्ग जोड़ें।

फिर, आप राशि बढ़ा या घटा सकते हैं:

$(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);
});
1
Adder 9 सितंबर 2019, 09:13