eDelivery-X/cart.html at main · Marco-03/eDelivery-X · 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/cart.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cart</title>
</head>
<body>
    <div class="navbar">
        <div class="navbar-left">
            <a href="home.html">eDeliverX</a>
        </div>
        <div class="navbar-right">
            <a href="home.html">Home</a>
            <a href="products.html">Products</a>
            <a href="account.html">Sign in</a>
        </div>
    </div>

    <div class="main-content">
        <div class="cart-items">
            <h2>Cart</h2>
            <div id="cartItemList"></div>
            <div id="orderSummary">
                <div id="productTotal"></div>
                <div id="shippingFee"></div>
                <div id="orderTotal"></div>
            </div>


            <script>
                let cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];

                // Display the cart items on the page
                const cartItemList = document.getElementById('cartItemList');
                const productTotal = document.getElementById('productTotal');
                const shippingFee = document.getElementById('shippingFee');
                const orderTotal = document.getElementById('orderTotal');
                renderCartItems();

                function renderCartItems() {
                    cartItemList.innerHTML = '';
                    let total = 0;

                    cartItems.forEach((item, index) => {
                        const cartItem = document.createElement('div');
                        cartItem.classList.add('cart-item');

                        const itemImage = document.createElement('img');
                        itemImage.src = item.image; // Set the image source
                        itemImage.alt = item.name; // Set the alt attribute
                        itemImage.classList.add('item-image');
                        cartItem.appendChild(itemImage);
                        itemImage.style.width = '100px'; // Change the width to the desired size

                        const quantity = document.createElement('p');
                        quantity.classList.add('quantity');
                        quantity.textContent = `${item.quantity}x`;
                        cartItem.appendChild(quantity);

                        const price = document.createElement('p');
                        price.classList.add('price');
                        price.textContent = `Price ${item.price}€`;
                        cartItem.appendChild(price);

                        const itemName = document.createElement('p');
                        itemName.textContent = item.name;
                        cartItem.appendChild(itemName);

                        const deleteButton = document.createElement('button');
                        deleteButton.classList.add('delete-button');
                        deleteButton.textContent = 'Delete';
                        deleteButton.addEventListener('click', () => deleteItem(index));
                        cartItem.appendChild(deleteButton);

                        cartItemList.appendChild(cartItem);
                        total += item.quantity * item.price;
                    });

                    const shippingFeeAmount = total >= 500 ? 0 : 3.99; // Shipping fee is 3.99 for orders below 350 euro
                    const orderTotalAmount = total + shippingFeeAmount;

                    productTotal.innerHTML = `Product Total: ${total.toFixed(2)}€`;
                    shippingFee.innerHTML = `Shipping Fee: ${shippingFeeAmount.toFixed(2)}€`;
                    orderTotal.innerHTML = `Order Total: ${orderTotalAmount.toFixed(2)}€`;
                }

                function deleteItem(index) {
                    const item = cartItems[index];
                    if (item.quantity > 1) {
                        item.quantity--;
                    } else {
                        cartItems.splice(index, 1);
                    }
                    localStorage.setItem('cartItems', JSON.stringify(cartItems));
                    renderCartItems();
                }
            </script>
        </div>

        <div id="paymentForm">
            <h3>Payment Details</h3>
            <input type="text" id="cardNumber" placeholder="Card Number">
            <input type="text" id="expiryDate" placeholder="Expiry Date">
            <input type="text" id="cvv" placeholder="CVV">
            <button id="payButton" onclick="processPayment()">Pay</button>
        </div>
    </div>

    <footer class="footer">
        <div class="contact-info">
            <h2>Contact Us</h2>
            <p><strong>Email:</strong> info@edeliverx.com</p>
            <p><strong>Phone:</strong> +1 123-456-7890</p>
            <p><a href="contact.html">Go to Contact Us page</a></p>
        </div>
        <div class="social-media-icons">
            <a href="#"><img src="images/insta.png" alt="Instagram" style="width: 30px; height: 30px;"></a>
            <a href="#"><img src="images/face.png" alt="Facebook" style="width: 30px; height: 30px;"></a>
            <a href="#"><img src="images/twit.png" alt="Twitter" style="width: 30px; height: 30px;"></a>
        </div>
    </footer>