update-edit

shop-routes/cart.js

@@ -127,6 +127,31 @@ router.post('/remove', async (req, res) => {
     }
 });
 
+router.get('/cart', (req, res) => {
+    const cartItems = req.session.cart || [];
+    const editingItemId = req.session.editingItemId || null; // ถ้าไม่มีการแก้ไขก็เป็น null
+
+    res.render('cart', { cartItems, total: calculateTotal(cartItems), editingItemId });
+});
+
+router.post('/cart/edit', (req, res) => {
+    const { cartItemId } = req.body;
+    req.session.editingItemId = parseInt(cartItemId, 10);
+    res.redirect('/cart'); // กลับไปตะกร้าพร้อมอัปเดตค่า editingItemId
+});
+
+router.post('/cart/remove', (req, res) => {
+    const { cartItemId } = req.body;
+    req.session.cart = req.session.cart.filter(item => item.id !== parseInt(cartItemId, 10));
+
+    // ถ้าสินค้าที่ถูกลบคือสินค้าที่กำลังแก้ไข ให้ล้างค่า editingItemId
+    if (req.session.editingItemId === parseInt(cartItemId, 10)) {
+        req.session.editingItemId = null;
+    }
+
+    res.redirect('/cart');
+});
+
 // เมื่อกดปุ่ม "Edit" จะบันทึกสินค้าที่ต้องการเปลี่ยนแปลง
 router.post('/edit', (req, res) => {
     const { cartItemId } = req.body;

views/cart.ejs

@@ -10,7 +10,7 @@
         <% } else { %>
             <div class="cart-items">
                 <% cartItems.forEach(item => { %>
-                    <div class="cart-item">
+                    <div class="cart-item" data-id="<%= item.id %>">
                         <div class="item-info">
                             <h3><%= item.name %></h3>
                             <p>Price: ฿<%= item.price.toLocaleString() %></p>
@@ -35,18 +35,19 @@
                             </button>
                         </form>
 
-                        <form action="/cart/remove" method="POST" style="text-align: right;">
+                        <!-- ปุ่ม 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>
-                        <form action="/cart/edit" method="POST">
-                            <input type="hidden" name="cartItemId" value="<%= item.id %>">
-                            <button type="submit" class="edit-btn">
+
+                        <!-- ปุ่ม Edit -->
+                        <button type="button" class="edit-btn">
                             Edit
                         </button>
-                        </form>
+
                     </div>
                 <% }); %>
             </div>
@@ -62,33 +63,17 @@
             </div>
 
             <script>
-                document.querySelectorAll('.update-btn').forEach(button => {
-                    button.addEventListener('click', async (event) => {
-                        event.preventDefault();
-                        const form = button.closest('form');
-                        const cartItemId = form.querySelector('[name="cartItemId"]').value;
-                        const quantity = form.querySelector('[name="quantity"]').value;
+                document.querySelectorAll('.edit-btn').forEach(button => {
+                    button.addEventListener('click', (event) => {
+                        const cartItem = event.target.closest('.cart-item');
+                        const editButton = cartItem.querySelector('.edit-btn');
+                        const removeForm = cartItem.querySelector('.remove-form');
 
-                        try {
-                            const response = await fetch('/cart/update', {
-                                method: 'POST',
-                                headers: {
-                                    'Content-Type': 'application/json'
-                                },
-                                body: JSON.stringify({ cartItemId, quantity })
-                            });
+                        // ซ่อนปุ่ม Edit
+                        editButton.style.display = 'none';
 
-                            if (response.ok) {
-                                const data = await response.json();
-                                // อัปเดตราคารวมในหน้าเว็บ
-                                document.getElementById('total-price').innerText = `Total Amount: ฿${data.total.toFixed(2)}`;
-                            } else {
-                                const error = await response.text();
-                                alert(error);
-                            }
-                        } catch (error) {
-                            console.error('Error updating cart:', error);
-                        }
+                        // แสดงปุ่ม Remove
+                        removeForm.style.display = 'block';
                     });
                 });
             </script>