Select Git revision
cart.ejs 4.16 KiB
<%- include('partials/header') %>
<div class="container">
<div class="cart">
<h2>Shopping Cart</h2>
<% if (cartItems.length === 0) { %>
<div class="info-section">
<p>Your cart is empty</p>
<a href="/" class="continue-shopping">Continue Shopping</a>
</div>
<% } else { %>
<div class="cart-items">
<% cartItems.forEach(item => { %>
<div class="cart-item" data-id="<%= item.id %>">
<div class="item-info">
<h3><%= item.name %></h3>
<p>Price: ฿<%= item.price.toLocaleString() %></p>
<p class="price">
Total: ฿<%= (item.price * item.quantity).toLocaleString() %>
</p>
<% if (item.stock < 5) { %>
<p style="color: var(--primary);">Only <%= item.stock %> items left!</p>
<% } %>
</div>
<form method="POST" action="/cart/update" style="display: flex; gap: 0.8rem; align-items: center;">
<input type="hidden" name="cartItemId" value="<%= item.id %>">
<input type="number"
name="quantity"
value="<%= item.quantity %>"
min="1"
max="<%= item.stock %>"
style="width: 70px;">
<button type="button" class="update-btn" style="margin: 0; padding: 0.5rem 1rem;">
Update
</button>
</form>
<!-- ปุ่ม Remove (ซ่อนเริ่มต้น) -->
<form action="/cart/remove" method="POST" style="text-align: right; display: none;" class="remove-form">
<input type="hidden" name="cartItemId" value="<%= item.id %>">
<button type="submit" class="back-btn" style="margin: 0; padding: 0.5rem 1rem; background-color: red;">
Remove
</button>
</form>
<!-- ปุ่ม Edit -->
<button type="button" class="edit-btn">
Edit
</button>
</div>
<% }); %>
</div>
<div class="cart-summary">
<div class="total">
<h3 id="total-price">Total Amount: ฿<%= total.toLocaleString() %></h3>
</div>
<div class="order-actions">
<a href="/" class="back-btn">Continue Shopping</a>
<a href="/order/checkout" class="checkout-button">Proceed to Checkout</a>
</div>
</div>
<script>
document.querySelectorAll(".update-btn").forEach(button => {
button.addEventListener("click", async (event) => {
const cartItem = event.target.closest(".cart-item");
const cartItemId = cartItem.dataset.id;
const quantity = cartItem.querySelector("input[name='quantity']").value;