diff --git a/shop-routes/cart.js b/shop-routes/cart.js index 4f97ca3c54a3d35e4025a06ad3bf80c2020d8ba4..14f497c01d84b52e874df1e9f55bd5296698e5ec 100644 --- a/shop-routes/cart.js +++ b/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; diff --git a/views/cart.ejs b/views/cart.ejs index 4a20a7a4c6a6244ecb17a5dd017004845ad24971..e3456ed331483c9926adc9e3a021790b22af5e57 100644 --- a/views/cart.ejs +++ b/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> - </form> + + <!-- ปุ่ม Edit --> + <button type="button" class="edit-btn"> + Edit + </button> + </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>