french-bakehouse-application/cart.html at main · rakshans06/french-bakehouse-application · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Cart | Aura</title>
    <link rel="stylesheet" href="cart.css">
</head>
<body>
    <header>
        <h1>Your Shopping Cart</h1>
    </header>

    <div class="cart-container"></div>

    <div class="cart-summary">
        <p id="total">Total: ₹0</p>
        <button id="checkoutBtn">Checkout</button>
    </div>

    <script>
        // Get cart items from localStorage
        const cartContainer = document.querySelector('.cart-container');
        const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];

        let totalPrice = 0;

        if (cartItems.length === 0) {
            cartContainer.innerHTML = '<p class="empty-cart">Your cart is empty!</p>';
            document.querySelector('.cart-summary').style.display = 'none';
        } else {
            cartItems.forEach((item, index) => {
                const card = document.createElement('div');
                card.className = 'cart-card';
                card.innerHTML = `
                    <img src="${item.img}" alt="${item.title}">
                    <div class="cart-card-content">
                        <h3>${item.title}</h3>
                        <p>${item.price}</p>
                        <button class="remove-btn" data-index="${index}">Remove</button>
                    </div>
                `;
                cartContainer.appendChild(card);

                // Update total price
                const priceNum = parseInt(item.price.replace('₹','')) || 0;
                totalPrice += priceNum;
            });

            document.getElementById('total').innerText = `Total: ₹${totalPrice}`;

            // Remove button functionality
            const removeButtons = document.querySelectorAll('.remove-btn');
            removeButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const idx = btn.getAttribute('data-index');
                    cartItems.splice(idx, 1);
                    localStorage.setItem('cartItems', JSON.stringify(cartItems));
                    location.reload(); // refresh page to update cart
                });
            });
        }

        // Checkout button (optional action)
        document.getElementById('checkoutBtn').addEventListener('click', () => {
        localStorage.setItem('cartItems', JSON.stringify(cartItems)); // keep items
        window.location.href = 'checkout.html'; // redirect to checkout page
    });
    </script>
</body>
</html>