Gitlab@Informatics

Skip to content
Snippets Groups Projects
Select Git revision
  • d2a91a2640343bf6bc670baae72b02151950299f
  • main default protected
  • master
3 results

cart.ejs

Blame
  • 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;