update-edit

public/css/style.css

@@ -436,18 +436,16 @@ footer {
     background-color: #3d38b1;
 }
 
-.edit-order-btn {
+.edit-btn {
     background-color: #ffc107;
     color: black;
     padding: 5px 10px;
     text-decoration: none;
     border-radius: 5px;
-    display: inline-block;
-    margin-left: 5px;
     border: 1px solid #ffc107;
 }
 
-.edit-order-btn:hover {
+.edit-btn:hover {
     background-color: #e0a800;
     border-color: #e0a800;
 }
\ No newline at end of file

views/cart.ejs

@@ -8,11 +8,15 @@
                 <a href="/" class="continue-shopping">Continue Shopping</a>
             </div>
         <% } else { %>
+            <div class="cart-items">
+                <% cartItems.forEach(item => { %>
                     <div class="cart-item">
                         <div class="item-info">
                             <h3><%= item.name %></h3>
                             <p>Price: ฿<%= item.price.toLocaleString() %></p>
-                    <p class="price">Total: ฿<%= (item.price * item.quantity).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>
                             <% } %>
@@ -20,19 +24,26 @@
 
                         <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;">
+                            <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>
 
-                <div class="cart-actions">
-                    <a href="/edit-cart/<%= item.id %>" class="edit-btn">Edit</a> <!-- ปุ่ม Edit -->
-                    <form action="/cart/remove" method="POST">
+                        <form action="/cart/remove" method="POST" style="text-align: right;">
                             <input type="hidden" name="cartItemId" value="<%= item.id %>">
-                        <button type="submit" class="remove-btn">Remove</button>
+                            <button type="submit" class="back-btn" style="margin: 0; padding: 0.5rem 1rem; background-color: red;">
+                                Remove
+                            </button>
                         </form>
+                        <a href="/edit-cart/<%= item.id %>" class="edit-btn">Edit</a> <!-- ปุ่ม Edit -->
                     </div>
+                <% }); %>
             </div>
 
             <div class="cart-summary">