Update templates/index.html

templates/index.html

@@ -348,11 +348,11 @@
         // Sample product data
         const products = [
             { id: 1, name: "Wireless Headphones", price: 99.99, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=300&fit=crop", category: "Electronics" },
-            { id: 2, name: "Smart Watch", price: 199.99, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w-400&h=300&fit=crop", category: "Electronics" },
-            { id: 3, name: "Running Shoes", price: 89.99, image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w-400&h=300&fit=crop", category: "Fashion" },
-            { id: 4, name: "Coffee Maker", price: 49.99, image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w-400&h=300&fit=crop", category: "Home" },
-            { id: 5, name: "Backpack", price: 39.99, image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w-400&h=300&fit=crop", category: "Fashion" },
-            { id: 6, name: "Desk Lamp", price: 29.99, image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w-400&h=300&fit=crop", category: "Home" }
+            { id: 2, name: "Smart Watch", price: 199.99, image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=300&fit=crop", category: "Electronics" },
+            { id: 3, name: "Running Shoes", price: 89.99, image: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=400&h=300&fit=crop", category: "Fashion" },
+            { id: 4, name: "Coffee Maker", price: 49.99, image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=400&h=300&fit=crop", category: "Home" },
+            { id: 5, name: "Backpack", price: 39.99, image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=400&h=300&fit=crop", category: "Fashion" },
+            { id: 6, name: "Desk Lamp", price: 29.99, image: "https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=400&h=300&fit=crop", category: "Home" }
         ];
 
         // Cart state
@@ -362,7 +362,7 @@
         // Initialize the page
         document.addEventListener('DOMContentLoaded', function() {
             loadProducts();
-            updateCartDisplay();
+            updateCartBadge();
             updateNav();
         });
 
@@ -383,25 +383,25 @@
             if (sectionId === 'products') {
                 loadProducts();
             } else if (sectionId === 'cart') {
-                updateCartDisplay();
+                updateCartDisplay(); // FIXED: Only update cart display when on cart section
             } else if (sectionId === 'checkout') {
                 resetCheckoutSteps();
-                updateCheckoutDisplay();
+                updateCheckoutDisplay(); // FIXED: Use checkout-specific update function
             }
         }
 
         function updateNav() {
-            const sections = document.querySelectorAll('.section');
             const navLinks = document.querySelectorAll('.nav-link');
-            
             navLinks.forEach(link => link.classList.remove('active'));
             
-            sections.forEach((section, index) => {
-                if (section.classList.contains('active-section')) {
-                    const sectionId = section.id;
-                    document.querySelector(`[onclick="showSection('${sectionId}')"]`).classList.add('active');
+            const activeSection = document.querySelector('.section.active-section');
+            if (activeSection) {
+                const sectionId = activeSection.id;
+                const activeLink = document.querySelector(`.nav-link[onclick="showSection('${sectionId}')"]`);
+                if (activeLink) {
+                    activeLink.classList.add('active');
                 }
-            });
+            }
         }
 
         // Product functions
@@ -447,13 +447,19 @@
             }
             
             saveCart();
-            updateCartDisplay();
+            updateCartBadge();
             showToast(`${product.name} added to cart!`);
+            
+            // Update cart display only if we're on the cart page
+            if (document.getElementById('cart').classList.contains('active-section')) {
+                updateCartDisplay();
+            }
         }
 
         function removeFromCart(productId) {
             cart = cart.filter(item => item.id !== productId);
             saveCart();
+            updateCartBadge();
             updateCartDisplay();
         }
 
@@ -465,6 +471,7 @@
                     removeFromCart(productId);
                 } else {
                     saveCart();
+                    updateCartBadge();
                     updateCartDisplay();
                 }
             }
@@ -473,7 +480,18 @@
         function clearCart() {
             cart = [];
             saveCart();
-            updateCartDisplay();
+            updateCartBadge();
+            
+            // Update cart display if on cart page
+            if (document.getElementById('cart').classList.contains('active-section')) {
+                updateCartDisplay();
+            }
+            
+            // Update checkout display if on checkout page
+            if (document.getElementById('checkout').classList.contains('active-section')) {
+                updateCheckoutDisplay();
+            }
+            
             showToast('Cart cleared!');
         }
 
@@ -485,20 +503,26 @@
         function updateCartBadge() {
             const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
             document.getElementById('cartBadge').textContent = totalItems;
+            
+            // Update checkout button state
+            const checkoutBtn = document.getElementById('checkoutBtn');
+            if (checkoutBtn) {
+                checkoutBtn.disabled = totalItems === 0;
+            }
         }
 
         function updateCartDisplay() {
             const cartItemsDiv = document.getElementById('cartItems');
             const emptyCartMessage = document.getElementById('emptyCartMessage');
-            const checkoutBtn = document.getElementById('checkoutBtn');
+            
+            // FIXED: Check if elements exist before using them
+            if (!cartItemsDiv || !emptyCartMessage) return;
             
             if (cart.length === 0) {
                 cartItemsDiv.innerHTML = '<p class="text-muted">Your cart is empty. <a href="#" onclick="showSection(\'products\')">Browse products</a></p>';
                 emptyCartMessage.style.display = 'block';
-                checkoutBtn.disabled = true;
             } else {
                 emptyCartMessage.style.display = 'none';
-                checkoutBtn.disabled = false;
                 
                 let cartHTML = '';
                 let subtotal = 0;
@@ -541,12 +565,15 @@
                 const tax = subtotal * 0.08; // 8% tax
                 const total = subtotal + shipping + tax;
                 
-                document.getElementById('subtotal').textContent = subtotal.toFixed(2);
-                document.getElementById('tax').textContent = tax.toFixed(2);
-                document.getElementById('total').textContent = total.toFixed(2);
+                // FIXED: Check if elements exist before updating
+                const subtotalEl = document.getElementById('subtotal');
+                const taxEl = document.getElementById('tax');
+                const totalEl = document.getElementById('total');
+                
+                if (subtotalEl) subtotalEl.textContent = subtotal.toFixed(2);
+                if (taxEl) taxEl.textContent = tax.toFixed(2);
+                if (totalEl) totalEl.textContent = total.toFixed(2);
             }
-            
-            updateCartBadge();
         }
 
         // Checkout functions
@@ -593,6 +620,8 @@
 
         function updateCheckoutDisplay() {
             const checkoutCartItems = document.getElementById('checkoutCartItems');
+            if (!checkoutCartItems) return;
+            
             let itemsHTML = '';
             let subtotal = 0;
             
@@ -610,12 +639,13 @@
                 `;
             });
             
-            checkoutCartItems.innerHTML = itemsHTML;
+            checkoutCartItems.innerHTML = itemsHTML || '<p class="text-muted">No items in cart</p>';
             
             const shipping = 5.00;
             const tax = subtotal * 0.08;
             const total = subtotal + shipping + tax;
             
+            // FIXED: Update checkout summary
             document.getElementById('checkoutSubtotal').textContent = subtotal.toFixed(2);
             document.getElementById('checkoutTax').textContent = tax.toFixed(2);
             document.getElementById('checkoutTotal').textContent = total.toFixed(2);
@@ -624,6 +654,8 @@
 
         function updateReviewSection() {
             const reviewOrderItems = document.getElementById('reviewOrderItems');
+            if (!reviewOrderItems) return;
+            
             let itemsHTML = '<h5>Items:</h5>';
             
             cart.forEach(item => {
@@ -640,23 +672,32 @@
             reviewOrderItems.innerHTML = itemsHTML;
             
             // Get shipping address from form (simplified)
-            const address = document.querySelector('#shippingForm input[type="text"]').value;
+            const addressInput = document.querySelector('#shippingForm input[type="text"]');
+            const address = addressInput ? addressInput.value : '';
             document.getElementById('reviewAddress').textContent = address || "Not provided";
         }
 
         function placeOrder() {
+            if (cart.length === 0) {
+                showToast('Your cart is empty!');
+                return;
+            }
+            
             // Generate random order number
             const orderNumber = Math.floor(1000 + Math.random() * 9000);
             document.getElementById('orderNumber').textContent = orderNumber;
             
             // Clear cart
-            clearCart();
+            cart = [];
+            saveCart();
+            updateCartBadge();
             
             // Show confirmation
             nextStep(4);
             
             // In a real app, you would send order to server here
-            console.log('Order placed:', { orderNumber, cart: JSON.parse(localStorage.getItem('cart') || '[]') });
+            console.log('Order placed:', orderNumber);
+            showToast('Order placed successfully!');
         }
 
         // Utility function