xStore.cart#

Giỏ hàng: đọc, thêm, sửa, xoá dòng hàng, báo giá kèm mã giảm giá và gộp giỏ khách vãng lai.

Phương thức#

Ví dụ đầy đủ#

<script>
  // Giỏ hàng làm việc theo PHIÊN BẢN: truyền variant_id, không phải product.id
  // và cũng không phải product.slug. Mã định danh luôn là chuỗi 10 ký tự.
  const btn = document.getElementById('add-to-cart');

  btn.addEventListener('click', async () => {
    const variantId = document.getElementById('variant-select').value;
    const quantity  = Number(document.getElementById('quantity').value) || 1;

    // Khoá nút trong lúc chờ, nếu không khách bấm nhiều lần sẽ tạo dòng trùng.
    btn.disabled = true;
    try {
      const cart = await xStore.cart.addItem({ variant_id: variantId, quantity });
      document.getElementById('cart-count').textContent = cart.item_count;
    } catch (err) {
      alert(err.message);
    } finally {
      btn.disabled = false;
    }
  });

  // Sửa số lượng và xoá dòng hàng đều trả về giỏ mới.
  async function setQuantity(variantId, quantity) {
    const cart = quantity > 0
      ? await xStore.cart.updateItem({ variant_id: variantId, quantity })
      : await xStore.cart.removeItem(variantId);

    document.getElementById('cart-count').textContent = cart.item_count;
  }

  // Áp mã giảm giá. applyPromo() chạy cục bộ và trả kết quả NGAY —
  // nó chỉ GHI NHỚ mã trên client, không gọi máy chủ. Máy chủ chỉ biết
  // tới mã khi quote() gửi kèm, nên hãy gọi quote() ngay sau đó để biết
  // mã có hợp lệ hay không.
  document.getElementById('promo-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    xStore.cart.applyPromo(e.currentTarget.code.value);

    try {
      const bao = await xStore.cart.quote();
      document.getElementById('total').textContent =
        xStore.utils.formatCurrency(Number(bao.total));
    } catch (err) {
      alert('Mã không hợp lệ: ' + err.message);
    }
  });
</script>

Thư viện gọi tới /api/... trên chính tên miền cửa hàng, nên không cần khai báo địa chỉ máy chủ ở bất kỳ đâu.

Xem thêm Sự kiện để giao diện tự cập nhật sau mỗi thao tác.