Create cart_update.js

cart_update.js

@@ -0,0 +1,92 @@
+function updateCartDisplay() {
+    let totalBill = 0;
+    let cartHTML = "<h3>Your Cart:</h3><ul style='list-style: none; padding: 0;'>";
+    cart.forEach((item, index) => {
+        totalBill += item.itemTotal;
+        const extras = item.extras.map((extra, i) => {
+            const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
+            const extraTotal = extrasPrices[extra] * extraQuantity;
+            totalBill += extraTotal;
+            return `<li>
+                        <div style='display: flex; justify-content: space-between; align-items: center;'>
+                            <span>${extra}</span>
+                            <span>Price: $${extrasPrices[extra].toFixed(2)}</span>
+                            <div>
+                                <label for='extra-quantity-${index}-${i}'>Quantity:</label>
+                                <input type='number' id='extra-quantity-${index}-${i}' value='${extraQuantity}' min='1' style='width: 50px;' onchange='updateExtraQuantity(${index}, ${i}, this.value)'>
+                            </div>
+                            <span>Total: $${extraTotal.toFixed(2)}</span>
+                            <input type='checkbox' id='extra-remove-${index}-${i}' onclick='removeExtra(${index}, ${i})'> Remove
+                        </div>
+                    </li>`;
+        }).join('');
+
+        cartHTML += `<li style='border-bottom: 1px solid #ddd; margin-bottom: 10px;'>
+                        <div style='display: flex; justify-content: space-between; align-items: center;'>
+                            <span>${item.name}</span>
+                            <span>Item Price: $${item.price.toFixed(2)}</span>
+                            <div>
+                                <label for='item-quantity-${index}'>Quantity:</label>
+                                <input type='number' id='item-quantity-${index}' value='${item.quantity}' min='1' style='width: 50px;' onchange='updateItemQuantity(${index}, this.value)'>
+                            </div>
+                            <span>Total: $${(item.price * item.quantity).toFixed(2)}</span>
+                            <input type='checkbox' id='item-remove-${index}' onclick='removeItem(${index})'> Remove
+                        </div>
+                        <div style='margin-left: 20px;'>
+                            <h4>Extras:</h4>
+                            <ul style='list-style: none; padding: 0;'>${extras}</ul>
+                        </div>
+                        <div style='margin-left: 20px;'>
+                            <strong>Instructions:</strong> ${item.instructions || "None"}
+                        </div>
+                    </li>`;
+    });
+    cartHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+    cartHTML += `<button style='margin-top: 10px; background-color: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer;' onclick='submitCart()'>Submit</button>`;
+    document.getElementById('floating-cart').innerHTML = cartHTML;
+}
+
+function updateItemQuantity(index, newQuantity) {
+    const quantity = parseInt(newQuantity) || 1;
+    cart[index].quantity = quantity;
+    cart[index].itemTotal = cart[index].price * quantity;
+    updateCartDisplay();
+}
+
+function updateExtraQuantity(cartIndex, extraIndex, newQuantity) {
+    const quantity = parseInt(newQuantity) || 1;
+    cart[cartIndex].extrasQuantities = cart[cartIndex].extrasQuantities || [];
+    cart[cartIndex].extrasQuantities[extraIndex] = quantity;
+    updateCartDisplay();
+}
+
+function removeExtra(cartIndex, extraIndex) {
+    cart[cartIndex].extras.splice(extraIndex, 1);
+    if (cart[cartIndex].extrasQuantities) {
+        cart[cartIndex].extrasQuantities.splice(extraIndex, 1);
+    }
+    updateCartDisplay();
+}
+
+function submitCart() {
+    let finalOrderHTML = "<h3>Final Order:</h3><ul>";
+    let totalBill = 0;
+    cart.forEach(item => {
+        totalBill += item.itemTotal;
+        const extras = item.extras.map((extra, i) => {
+            const extraQuantity = item.extrasQuantities ? item.extrasQuantities[i] || 1 : 1;
+            const extraTotal = extrasPrices[extra] * extraQuantity;
+            totalBill += extraTotal;
+            return `${extra} (x${extraQuantity}) - $${extraTotal.toFixed(2)}`;
+        }).join(', ');
+
+        finalOrderHTML += `<li>
+            ${item.name} (x${item.quantity}) - $${item.itemTotal.toFixed(2)}
+            <br>Extras: ${extras}
+            <br>Instructions: ${item.instructions || "None"}
+        </li>`;
+    });
+    finalOrderHTML += `</ul><p><strong>Total Bill: $${totalBill.toFixed(2)}</strong></p>`;
+    document.getElementById('final-order').innerHTML = finalOrderHTML;
+    alert("Your final order has been submitted!");
+}