diff --git a/app.js b/app.js index 5760f26ad7d606522659911bfaa962ae86e7986c..134200c61fe5dd6a84b6e3360cbd8a89766dddf7 100644 --- a/app.js +++ b/app.js @@ -210,6 +210,36 @@ app.put('/api/cart/:productId', (req, res) => { } }); +// API ที่ใช้ดึงข้อมูลสินค้าจากตะกร้า +app.get('/api/cart', (req, res) => { + const cart = req.session.cart || []; // ใช้ session เก็บข้อมูลตะกร้า + console.log('Cart:', cart); // ตรวจสอบข้อมูลในตะกร้า + res.json(cart); +}); + +// API ที่ใช้เพิ่มสินค้าลงในตะกร้า +app.post('/api/cart', (req, res) => { + const { product_id, product_name, product_price, product_img } = req.body; + const cart = req.session.cart || []; + + const existingItem = cart.find(item => item.product_id === product_id); + if (existingItem) { + existingItem.quantity += 1; // เพิ่มจำนวนสินค้าที่มีอยู่ + } else { + cart.push({ + product_id, + product_name, + product_price, + product_img, + quantity: 1, + total_price: product_price, // คำนวณราคาทั้งหมด + }); + } + + req.session.cart = cart; // อัพเดทข้อมูลตะกร้าใน session + res.status(200).send('Item added to cart'); +}); + // DELETE: ลบสินค้าจากตะกร้า app.delete('/api/cart/:productId', (req, res) => { const productId = req.params.productId; diff --git a/public/cart.html b/public/cart.html index 6323d8ef4ee972812c172bb065ab6ddda7a58cc3..8136d13d97fb9a9fa6e0bd9a6ac6b80f34981261 100644 --- a/public/cart.html +++ b/public/cart.html @@ -24,42 +24,44 @@ </footer> <script> - // ฟังก์ชันดึงข้อมูลสินค้าจากตะกร้า + // Load cart items from the API async function loadCart() { try { - // ดึงข้อมูลจาก API ตะกร้าสินค้า const response = await fetch('/api/cart'); + if (!response.ok) { + throw new Error('Failed to fetch cart'); + } const cart = await response.json(); const cartItemsContainer = document.getElementById('cart-items'); - cartItemsContainer.innerHTML = ''; // เคลียร์ข้อมูลที่มีอยู่เดิม + cartItemsContainer.innerHTML = ''; if (cart.length === 0) { cartItemsContainer.innerHTML = '<p>Your cart is empty!</p>'; - } else { - cart.forEach(item => { - const itemDiv = document.createElement('div'); - itemDiv.classList.add('cart-item'); - itemDiv.innerHTML = ` - <img src="${item.product_img}" alt="${item.product_name}"> - <div> - <h3>${item.product_name}</h3> - <p>Price: $${item.product_price}</p> - <p>Total Price: $<span id="total-price-${item.product_id}">${item.total_price}</span></p> - </div> - <div> - <input type="number" value="${item.quantity}" min="1" onchange="updateQuantity(${item.product_id}, this.value)"> - <button onclick="removeFromCart(${item.product_id})">Remove</button> - </div> - `; - cartItemsContainer.appendChild(itemDiv); - }); } + + cart.forEach(item => { + const itemDiv = document.createElement('div'); + itemDiv.classList.add('cart-item'); + itemDiv.innerHTML = ` + <img src="${item.product_img}" alt="${item.product_name}"> + <div> + <h3>${item.product_name}</h3> + <p>Price: $${item.product_price}</p> + <p>Total Price: $<span id="total-price-${item.product_id}">${item.total_price}</span></p> + </div> + <div> + <input type="number" value="${item.quantity}" min="1" onchange="updateQuantity(${item.product_id}, this.value)"> + <button onclick="removeFromCart(${item.product_id})">Remove</button> + </div> + `; + cartItemsContainer.appendChild(itemDiv); + }); } catch (error) { console.error('Error loading cart items:', error); } } - // ฟังก์ชันอัพเดทจำนวนสินค้าในตะกร้า + // Update quantity in cart async function updateQuantity(productId, newQuantity) { await fetch(`/api/cart/${productId}`, { method: 'PUT', @@ -67,21 +69,21 @@ body: JSON.stringify({ quantity: newQuantity }) }); - loadCart(); // รีโหลดตะกร้าหลังจากอัพเดท + loadCart(); // Reload the cart after updating } - // ฟังก์ชันลบสินค้าจากตะกร้า + // Remove item from cart async function removeFromCart(productId) { await fetch(`/api/cart/${productId}`, { method: 'DELETE' }); - loadCart(); // รีโหลดตะกร้าหลังจากลบสินค้า + loadCart(); // Reload the cart after removal } - // ฟังก์ชันสำหรับไปที่หน้าชำระเงิน + // Redirect to checkout page function goToCheckout() { window.location.href = 'checkout.html'; } - // โหลดข้อมูลสินค้าจากตะกร้าทันทีที่หน้าเว็บโหลด + // Load cart items when page loads loadCart(); </script> </body>