329 lines
8.6 KiB
HTML
329 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>My Cart – MediGlobe Healthcare</title>
|
||
<link rel="stylesheet" href="assets/css/styles.css" />
|
||
<link rel="stylesheet" href="assets/css/cart.css" />
|
||
</head>
|
||
<body>
|
||
<!-- TOP BAR -->
|
||
<!-- <div id="topbar-placeholder"></div> -->
|
||
|
||
<!-- NAVBAR -->
|
||
<div id="navbar-placeholder"></div>
|
||
|
||
<!-- BREADCRUMB -->
|
||
<div class="breadcrumb-bar">
|
||
<div class="breadcrumb-inner">
|
||
<a href="index.html">Home</a>
|
||
<span class="sep">›</span>
|
||
<a href="cart.html" class="current">My Cart</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CART PAGE -->
|
||
<div class="cart-page">
|
||
<!-- Page title -->
|
||
<div class="cart-page-title">
|
||
<h1>My Cart</h1>
|
||
<span class="item-count" id="title-count">0 items</span>
|
||
</div>
|
||
|
||
<!-- Main layout -->
|
||
<div class="cart-layout">
|
||
<!-- LEFT: Cart Items -->
|
||
<div class="cart-items-panel">
|
||
<!-- Column headers -->
|
||
<div class="cart-col-headers">
|
||
<span>Product</span>
|
||
<span>Price</span>
|
||
<span>Quantity</span>
|
||
<span>Subtotal</span>
|
||
<span></span>
|
||
</div>
|
||
|
||
<!-- Items injected by JS -->
|
||
<div id="cart-items"></div>
|
||
|
||
<!-- Empty state -->
|
||
<div class="empty-cart" id="empty-cart">
|
||
<div class="empty-icon">🛒</div>
|
||
<h3>Your cart is empty</h3>
|
||
<p>Looks like you haven't added anything yet.</p>
|
||
<a
|
||
href="index.html"
|
||
class="btn-primary"
|
||
style="display: inline-flex; text-decoration: none">
|
||
Start Shopping →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT: Summary -->
|
||
<div class="cart-summary">
|
||
<!-- Order summary card -->
|
||
<div class="summary-card">
|
||
<div class="summary-header">
|
||
<h2>Order Summary</h2>
|
||
</div>
|
||
|
||
<div class="summary-body">
|
||
<div class="summary-row">
|
||
<span class="label">Subtotal</span>
|
||
<span class="value" id="summary-subtotal">₹0.00</span>
|
||
</div>
|
||
<hr class="summary-divider" />
|
||
<div class="summary-row">
|
||
<span class="label">Shipping</span>
|
||
<span class="value free">Free</span>
|
||
</div>
|
||
<hr class="summary-divider" />
|
||
<div class="summary-row">
|
||
<span class="label">Discount</span>
|
||
<span
|
||
class="value"
|
||
id="summary-discount"
|
||
style="color: var(--teal)"
|
||
>—</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="summary-total-row">
|
||
<span class="total-label">Total</span>
|
||
<span class="total-value" id="summary-total">₹0.00</span>
|
||
</div>
|
||
|
||
<div
|
||
style="
|
||
padding: var(--space-5) var(--space-6);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-3);
|
||
">
|
||
<button class="btn-primary btn-checkout" id="btn-checkout">
|
||
<span class="btn-text">Proceed to Checkout →</span>
|
||
<span class="btn-spinner"></span>
|
||
</button>
|
||
<a href="index.html" class="btn-continue">← Continue Shopping</a>
|
||
<button class="btn-clear" onclick="clearCart()">
|
||
🗑 Clear entire cart
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Trust badges -->
|
||
<div class="trust-badges">
|
||
<div class="trust-item">
|
||
<div class="ti-icon">🔒</div>
|
||
<div class="ti-text">
|
||
<strong>Secure Checkout</strong>
|
||
<span>SSL encrypted payment</span>
|
||
</div>
|
||
</div>
|
||
<div class="trust-item">
|
||
<div class="ti-icon">🚚</div>
|
||
<div class="ti-text">
|
||
<strong>Free Shipping</strong>
|
||
<span>On all orders over ₹50</span>
|
||
</div>
|
||
</div>
|
||
<div class="trust-item">
|
||
<div class="ti-icon">↩️</div>
|
||
<div class="ti-text">
|
||
<strong>Easy Returns</strong>
|
||
<span>30-day return policy</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Coupon card -->
|
||
<div class="coupon-card">
|
||
<h3>🏷️ Have a coupon?</h3>
|
||
<div class="coupon-field">
|
||
<input
|
||
type="text"
|
||
placeholder="Enter coupon code"
|
||
id="coupon-input" />
|
||
<button onclick="applyCoupon()">Apply</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="footer-placeholder"></div>
|
||
|
||
<script src="assets/js/config.js"></script>
|
||
<script src="assets/js/components.js"></script>
|
||
<script src="assets/js/cart.js"></script>
|
||
|
||
<script>
|
||
const checkoutBtn = document.getElementById("btn-checkout");
|
||
|
||
if (checkoutBtn) {
|
||
checkoutBtn.addEventListener("click", async () => {
|
||
try {
|
||
checkoutBtn.classList.add("loading");
|
||
checkoutBtn.disabled = true;
|
||
|
||
console.log("/api/cart hit");
|
||
|
||
const cart = Cart.getCart();
|
||
|
||
const res = await fetch(`${CONFIG.API_BASE_URL}/cart`, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(cart),
|
||
});
|
||
|
||
console.log(res);
|
||
|
||
window.location.href = "checkout.html";
|
||
} catch (err) {
|
||
console.error("Cart API failed", err);
|
||
} finally {
|
||
checkoutBtn.classList.remove("loading");
|
||
checkoutBtn.disabled = false;
|
||
}
|
||
});
|
||
}
|
||
|
||
function applyCoupon() {
|
||
const code = document
|
||
.getElementById("coupon-input")
|
||
.value.trim()
|
||
.toUpperCase();
|
||
|
||
const valid = Cart.applyCoupon(code);
|
||
|
||
document.getElementById("coupon-input").style.borderColor = valid
|
||
? "var(--teal)"
|
||
: "var(--red)";
|
||
}
|
||
|
||
function updateQuantity(id, delta) {
|
||
const item = Cart.getCart().find((i) => i.id === id);
|
||
if (!item) return;
|
||
|
||
Cart.updateQuantity(id, item.quantity + delta);
|
||
}
|
||
|
||
function removeItem(id) {
|
||
Cart.removeItem(id);
|
||
}
|
||
|
||
function clearCart() {
|
||
Cart.clear();
|
||
}
|
||
|
||
function renderCart() {
|
||
const cart = Cart.getCart();
|
||
const container = document.getElementById("cart-items");
|
||
const emptyState = document.getElementById("empty-cart");
|
||
const navCount = document.getElementById("nav-cart-count");
|
||
const titleCount = document.getElementById("title-count");
|
||
|
||
container.innerHTML = "";
|
||
|
||
const totalQty = Cart.getTotalCount();
|
||
|
||
if (navCount) navCount.textContent = totalQty;
|
||
titleCount.textContent =
|
||
totalQty === 1 ? "1 item" : `${totalQty} items`;
|
||
|
||
if (cart.length === 0) {
|
||
emptyState.classList.add("visible");
|
||
updateSummary();
|
||
return;
|
||
}
|
||
|
||
emptyState.classList.remove("visible");
|
||
|
||
cart.forEach((item) => {
|
||
const subtotal = item.price * item.quantity;
|
||
|
||
const imgHTML = item.image
|
||
? `<img
|
||
src="${item.image}"
|
||
alt="${item.name}"
|
||
width="72"
|
||
height="72"
|
||
loading="lazy"
|
||
decoding="async"
|
||
draggable="false"
|
||
/>`
|
||
: `<span class="cart-item-emoji">🧴</span>`;
|
||
|
||
const el = document.createElement("div");
|
||
el.className = "cart-item";
|
||
|
||
el.innerHTML = `
|
||
<div class="cart-item-info">
|
||
<div class="cart-item-img ${item.image ? "has-image" : "no-image"}">
|
||
${imgHTML}
|
||
</div>
|
||
<div>
|
||
<div class="cart-item-name">${item.name}</div>
|
||
<div class="cart-item-sku">ID: ${item.id}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cart-item-price">₹${Number(item.price).toFixed(2)}</div>
|
||
|
||
<div class="qty-control">
|
||
<button class="qty-btn" onclick="updateQuantity('${item.id}', -1)">−</button>
|
||
<span class="qty-num">${item.quantity}</span>
|
||
<button class="qty-btn" onclick="updateQuantity('${item.id}', +1)">+</button>
|
||
</div>
|
||
|
||
<div class="cart-item-subtotal">₹${subtotal.toFixed(2)}</div>
|
||
|
||
<button class="remove-btn" onclick="removeItem('${
|
||
item.id
|
||
}')" title="Remove item">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
|
||
<polyline points="3 6 5 6 21 6"/>
|
||
<path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/>
|
||
<path d="M10 11v6M14 11v6"/>
|
||
<path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/>
|
||
</svg>
|
||
</button>
|
||
`;
|
||
|
||
container.appendChild(el);
|
||
});
|
||
|
||
updateSummary();
|
||
}
|
||
|
||
function updateSummary() {
|
||
const totals = Cart.getTotals();
|
||
|
||
document.getElementById(
|
||
"summary-subtotal"
|
||
).textContent = `₹${totals.subtotal.toFixed(2)}`;
|
||
|
||
document.getElementById("summary-discount").textContent =
|
||
totals.discount > 0 ? `-₹${totals.discount.toFixed(2)}` : "—";
|
||
|
||
document.getElementById(
|
||
"summary-total"
|
||
).textContent = `₹${totals.total.toFixed(2)}`;
|
||
}
|
||
|
||
window.addEventListener("cartUpdated", renderCart);
|
||
|
||
document.addEventListener("components:ready", renderCart);
|
||
|
||
if (document.readyState === "complete") {
|
||
renderCart();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|