Initial commit
This commit is contained in:
Azmat Ali
@@ -0,0 +1,294 @@
|
||||
<!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);
|
||||
">
|
||||
<a href="checkout.html" class="btn-checkout" id="checkout-btn">
|
||||
Proceed to Checkout
|
||||
</a>
|
||||
<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/components.js"></script>
|
||||
<script src="assets/js/cart.js"></script>
|
||||
|
||||
<script>
|
||||
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>
|
||||
Reference in New Issue
Block a user