agent_test/template/javascript/cart.html

<script>
  // ── Helpers ──────────────────────────────────────────────────────────────
  function formatPrice(n) {
    return Number(n).toLocaleString('vi-VN') + '₫';
  }

  // cartItems cần global để các onclick inline gọi được
  var cartItems = {};

  // ── Update total ─────────────────────────────────────────────────────────
  function updateCartTotal() {
    var total = 0;
    Object.values(cartItems).forEach(function (item) {
      if (item.price > 0) total += item.price * item.qty;
    });
    var totalEl = document.getElementById('cart-total');
    if (totalEl) totalEl.textContent = formatPrice(total);
  }

  // ── Quantity controls ─────────────────────────────────────────────────────
  function cartInc(id) {
    var item = cartItems[id];
    if (!item) return;
    item.qty++;
    item.el.dataset.qty = item.qty;
    item.el.querySelector('.item-qty').textContent = item.qty;
    if (item.price > 0) {
      item.el.querySelector('.item-total-price').textContent = formatPrice(item.price * item.qty);
    }
    updateCartTotal();
  }

  function cartDec(id) {
    var item = cartItems[id];
    if (!item || item.qty <= 1) return;
    item.qty--;
    item.el.dataset.qty = item.qty;
    item.el.querySelector('.item-qty').textContent = item.qty;
    if (item.price > 0) {
      item.el.querySelector('.item-total-price').textContent = formatPrice(item.price * item.qty);
    }
    updateCartTotal();
  }

  // ── Remove item ──────────────────────────────────────────────────────────
  function cartRemove(id) {
    var item = cartItems[id];
    if (!item) return;
    if (!confirm('Bạn có chắc muốn xóa sản phẩm này khỏi giỏ hàng?')) return;
    item.el.closest('.cart-item-wrap').remove();
    delete cartItems[id];
    updateCartTotal();
  }

  // ── Delivery tab switch ───────────────────────────────────────────────────
  function switchTab(tab) {
    var tabDelivery = document.getElementById('tab-delivery');
    var tabPickup   = document.getElementById('tab-pickup');
    if (tab === 'delivery') {
      tabDelivery.className = 'h-[46px] w-[392px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg';
      tabPickup.className   = 'h-[46px] w-[408px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent';
    } else {
      tabPickup.className   = 'h-[46px] w-[408px] text-[14px] font-medium bg-[#f3f4f6] border-b-2 border-[#e7000b] text-[#e7000b] rounded-tl-lg rounded-tr-lg';
      tabDelivery.className = 'h-[46px] w-[392px] text-[14px] font-medium text-[#4a5565] border-b-2 border-transparent';
    }
  }

  // ── Init sau khi DOM sẵn sàng ────────────────────────────────────────────
  document.addEventListener('DOMContentLoaded', function () {

    // Build cart state từ DOM
    document.querySelectorAll('.cart-item').forEach(function (el) {
      var id    = el.dataset.id;
      var price = parseInt(el.dataset.price) || 0;
      var qty   = parseInt(el.dataset.qty)   || 1;
      cartItems[id] = { el: el, price: price, qty: qty };
    });

    // Format giá từng item (số thô → "1.850.000₫")
    document.querySelectorAll('.cart-item').forEach(function (el) {
      var id   = el.dataset.id;
      var item = cartItems[id];
      if (!item) return;
      if (item.price > 0) {
        var priceEl = el.querySelector('.item-total-price');
        if (priceEl) priceEl.textContent = formatPrice(item.price * item.qty);
      }
      var marketEl = el.querySelector('.item-market-price');
      if (marketEl) {
        var raw = parseInt(marketEl.textContent) || 0;
        if (raw > 0) marketEl.textContent = formatPrice(raw);
      }
    });

    // Format tổng tiền
    var totalEl = document.getElementById('cart-total');
    if (totalEl) {
      var raw = parseInt(totalEl.textContent.replace(/\D/g, '')) || 0;
      totalEl.textContent = formatPrice(raw);
    }

  });
</script>