<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart ASA</title>
<link rel="stylesheet" href="styles/home.css">
</head>
<body>
<header>
<h1>ASA Cart</h1>
</header>
<div class="cart-items" id="cart-items">
<!-- Cart items will be dynamically loaded here -->
</div>
<button>
<div class="checkout" onclick="goToCheckout()">Checkout</div>
</button>
<footer>
<p>© 2025 ASA</p>
</footer>
<script>
// Load cart items from the API
async function loadCart() {
try {
const response = await fetch('/api/cart');
if (!response.ok) {
throw new Error('Failed to fetch cart');
}
const cart = await response.json();
const cartItemsContainer = document.getElementById('cart-items');
cartItemsContainer.innerHTML = '';
if (cart.length === 0) {
cartItemsContainer.innerHTML = '<p>Your cart is empty!</p>';
}
cart.forEach(item => {
const itemDiv = document.createElement('div');
itemDiv.classList.add('cart-item');
itemDiv.innerHTML = `
<img src="${item.product_img}" alt="${item.product_name}">
<div>
<h3>${item.product_name}</h3>
<p>Price: $${item.product_price}</p>
<p>Total Price: $<span id="total-price-${item.product_id}">${item.total_price}</span></p>
</div>
<div>
<input type="number" value="${item.quantity}" min="1" onchange="updateQuantity(${item.product_id}, this.value)">
<button onclick="removeFromCart(${item.product_id})">Remove</button>
</div>
`;
cartItemsContainer.appendChild(itemDiv);
});
} catch (error) {
console.error('Error loading cart items:', error);
}
}
// Update quantity in cart
async function updateQuantity(productId, newQuantity) {
await fetch(`/api/cart/${productId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ quantity: newQuantity })
});
loadCart(); // Reload the cart after updating
}
// Remove item from cart
async function removeFromCart(productId) {
await fetch(`/api/cart/${productId}`, { method: 'DELETE' });
loadCart(); // Reload the cart after removal
}
// Redirect to checkout page
function goToCheckout() {
window.location.href = 'checkout.html';
}
// Load cart items when page loads
loadCart();
</script>
</body>
</html>