STDIO Training

45 bundles
2 files2 months ago
3

Giỏ hàng với JavaScript thuần

Giỏ hàng với JavaScript thuần

Demo giỏ hàng, thêm và hủy phần tử DOM cơ bản với JavaScript thuần.

index.htm

1234567891011121314151617181920<html>
  <head>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body onload="init()">
    <input type="hidden" id="productsModel" />
    <input type="hidden" id="cartModel" />

    <section>
      <h1>SẢN PHẨM</h1>
      <ul id="productsView"></ul>
    </section>

    <section>
      <h2>GIỎ HÀNG</h2>
      <p>Số sản phẩm trong giỏ hàng là <span id="cartSize"></span></p>
      <ul id="cartView"></ul>
    </section>
  </body>
</html>

script.js

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081function updateCart(cart) {
  cartModel.value = JSON.stringify(cart);

  let cartStr = "";
  for (let i = 0; i < cart.length; i++) {
    cartStr += `<li id="cart-${cart[i].product.id}">
            <button onclick="removeFromCart('cart-${cart[i].product.id}')">- REMOVE FROM CART</button>
            <span>${cart[i].product.name} - ${cart[i].product.price} - ${cart[i].quatity}</span>
        </li>`;
  }

  let cartSize = document.getElementById("cartSize");
  cartSize.innerHTML = cart.length;

  let cartView = document.getElementById("cartView");
  cartView.innerHTML = cartStr;
}

function init() {
  const products = [
    { id: "iphone-5", name: "iPhone 5", price: 3000000 },
    { id: "iphone-x", name: "iPhone X", price: 12000000 },
    { id: "iphone-pixel", name: "Google Pixel", price: 1100000 },
  ];

  let productsModel = document.getElementById("productsModel");
  productsModel.value = JSON.stringify(products);

  let productsStr = "";
  for (let i = 0; i < products.length; i++) {
    productsStr += `<li id="${products[i].id}">
                    <button onclick="addToCart('${products[i].id}')">+ ADD TO CART</button>
                    <span>${products[i].name} - ${products[i].price}</span>
                </li>`;
  }

  let productsView = document.getElementById("productsView");
  productsView.innerHTML = productsStr;

  updateCart([]);
}

function addToCart(id) {
  let productsModel = document.getElementById("productsModel");
  products = JSON.parse(productsModel.value);

  let cartModel = document.getElementById("cartModel");
  cart = JSON.parse(cartModel.value);

  let isExistInCart = false;
  for (let i = 0; i < cart.length; i++) {
    if (id == cart[i].product.id) {
      isExistInCart = true;
      break;
    }
  }

  if (isExistInCart === false) {
    for (let i = 0; i < products.length; i++)
      if (id == products[i].id) {
        cart.push({ product: products[i], quatity: 1 });
        break;
      }
  }

  updateCart(cart);
}

function removeFromCart(id) {
  let cartModel = document.getElementById("cartModel");
  cart = JSON.parse(cartModel.value);

  for (let i = 0; i < cart.length; i++) {
    if (id == "cart-" + cart[i].product.id) {
      cart.splice(i, 1);
      break;
    }
  }

  updateCart(cart);
}