BiryaniHubcart1

Sleeping

App Files Files Community

nagasurendra commited on Mar 8, 2025

Commit

b10f111

verified ·

1 Parent(s): 7c185ea

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +322 -4

templates/cart.html CHANGED Viewed

@@ -234,6 +234,306 @@
         .remove-icon {
             border: none;
             background: none;
@@ -330,6 +630,24 @@
                 </div>
                 <div class="dotted-line"></div>
@@ -435,13 +753,13 @@
                 let total = subtotal - discount;
                 // Update UI
-                document.getElementById("discountText").innerText = `Discount: $${discount.toFixed(2)}`;
-                document.getElementById("totalBillText").innerText = `Total Bill: $${total.toFixed(2)}`;
             } else {
                 // If checkbox is not selected, reset discount
-                document.getElementById("discountText").innerText = `Discount: $0`;
-                document.getElementById("totalBillText").innerText = `Total Bill: $${subtotal.toFixed(2)}`;
             }
         }

+        .remove-icon {
+            border: none;
+            background: none;
+            color: red;
+            font-size: 1.2rem;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="cart-container">
+            <div style="text-align: right;">
+                <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
+            </div>
+             <h4 class="mb-4 fw-bold">Your Cart</h4>
+            <!-- Cart Items -->
+            {% for item in cart_items %}
+            <div class="cart-item">
+                <div class="image-wrapper">
+                    <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
+               </div>
+                <div class="cart-item-details">
+                    <div class="cart-item-title">
+                        {{ item.Name }}
+                    </div>
+                    <div class="cart-item-addons">
+                        <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
+                    </div>
+                    <div class="cart-item-instructions">
+                        <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
+                    </div>
+                    <div class="cart-item-quantity mt-2">
+                        <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
+                        <input type="text" value="{{ item.Quantity__c|int }}" readonly data-item-name="{{ item.Name }}">
+                        <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
+                    </div>
+                </div>
+               <div class="cart-item-actions">
+                    <div>
+                      <button class="remove-icon" onclick="removeItemFromCart('{{ item.Name }}')">🗑️</button>
+                    </div>
+                    <div class="text-primary">
+                        $<span class="base-price">{{ item.Price__c }}</span>
+                    </div>
+                </div>
+            </div>
+            {% else %}
+            <p class="text-center">Your cart is empty.</p>
+            {% endfor %}
+            <!-- Suggestions Section -->
+            {% if suggestions %}
+            <div class="suggestion-section">
+                <h5>Complete Your Meal</h5>
+                {% for suggestion in suggestions %}
+                <div class="suggestion-item">
+                    <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
+                    <div>
+                        <div>{{ suggestion.Name }}</div>
+                        <div class="text-muted">${{ suggestion.Price__c }}</div>
+                    </div>
+                    <button class="add-back-button" onclick="addToCartSuggestion('{{ suggestion.Name }}', '{{ suggestion.Price__c }}', '{{ suggestion.Image1__c }}', '{{ suggestion.Id }}')">Add</button>
+                </div>
+                {% endfor %}
+            </div>
+            {% endif %}
+            <!-- Subtotal -->
+            <div class="cart-summary">
+                {% if coupons %}
+                    <div class="coupon-selection">
+                        <label>
+                            <input type="checkbox" id="couponCheckbox" onchange="toggleCouponDropdown()">
+                            Apply Coupon Code
+                        </label>
+                        <select id="couponDropdown" class="form-select mt-2" disabled onchange="calculateDiscount()">
+                            <option value="">Select a coupon</option>
+                            {% for coupon in coupons %}
+                                <option value="{{ coupon }}">{{ coupon }}</option>
+                           {% endfor %}
+                        </select>
+                    </div>
+                {% endif %}
+                <div class="bill-details">
+                    <div class="label">Cart Total</div>
+                    <div class="amount">${{ subtotal }}</div>
+                    <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cart</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+      body {
+            font-family: Arial, sans-serif;
+            background-color: #f3f4f6;
+            color: #333;
+        }
+        .cart-container {
+            max-width: 768px;
+            margin: 30px auto;
+            padding: 20px;
+            background-color: #fff;
+            border-radius: 12px;
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+            transition: box-shadow 0.3s ease-in-out;
+        }
+        .cart-container:hover {
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        }
+        .cart-item {
+            display: flex;                  /* Flexbox layout for the cart item */
+            align-items: flex-start;         /* Ensure the image and content align at the top */
+            justify-content: space-between;  /* Spread image and content across the container */
+            border-bottom: 1px solid #e0e0e0;
+            padding: 15px 0;
+        }
+        .image-wrapper {
+            width: 80px;                    /* Width of the image container */
+            height: 140px !important;                   /* Height of the image container */
+            display: flex;                  /* Flex container for image */
+            align-items: flex-start;        /* Align the image at the top */
+            justify-content: center;        /* Center image horizontally if it has space */
+        }
+        .cart-item img {
+            width: 100%;                    /* Fill the image container */
+            height: auto !important;                   /* Maintain aspect ratio */
+            object-fit: contain;            /* Ensure the full image is visible */
+            border-radius: 8px;             /* Optional: rounded corners */
+            transition: transform 0.3s;
+        }
+        .cart-item img:hover {
+            transform: scale(1.05);
+        }
+        .cart-item-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+        }
+        .checkout-button {
+           background-color: #0FAA39; /* Green background */
+           color: #fff; /* White text */
+           padding: 12px;
+           border-radius: 8px;
+           border: none;
+           width: 100%;
+           font-size: 1.2rem;
+           cursor: pointer;
+           transition: background-color 0.3s, color 0.3s;
+       }
+       .checkout-button:hover {
+           background-color: #0FAA39; /* Keep the background green on hover */
+           color: #fff; /* Keep the text white on hover */
+       }
+        .add-back-button {
+            padding: 6px 20px;
+            font-size: 0.9rem;
+            border-radius: 20px;
+            border: 1px solid #fff;
+            background-color: #fff;
+            color: #0FAA39;
+            cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .add-back-button:hover {
+            background-color: #fff;
+            color: #0FAA39;
+        }
+        .cart-item-details {
+            flex: 1;
+            margin-left: 15px;
+        }
+        .cart-item-quantity {
+            display: flex;
+            align-items: center;
+            margin-top: 5px;
+        }
+        .cart-item-quantity button {
+            width: 30px;
+            height: 30px;
+            border: none;
+            background-color: #f0f0f0;
+            font-size: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .cart-item-quantity input {
+            width: 40px;
+            text-align: center;
+            border: none;
+            background-color: #f8f9fa;
+            font-size: 1rem;
+            margin: 0 5px;
+        }
+        .cart-summary {
+    text-align: left;
+    margin-top: 15px;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
+}
+.bill-details {
+    display: grid;
+    grid-template-columns: 1fr 1fr; /* Two-column layout */
+    grid-gap: 10px;
+    margin-bottom: 10px;
+}
+.bill-details .label {
+    font-weight: 600;
+    font-size: 1rem;
+}
+.bill-details .amount {
+    text-align: right;
+    font-weight: 600;
+    font-size: 1rem;
+}
+.dotted-line {
+    border-bottom: 2px dotted #ccc;
+    margin: 15px 0;
+}
+.total-bill {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    font-weight: 600;
+    font-size: 1.2rem;
+    margin-top: 10px;
+}
+.total-bill .label {
+    font-size: 1.1rem;
+}
+.total-bill .amount {
+    text-align: right;
+    font-size: 1.1rem;
+    color: #0FAA39; /* Green color for total */
+}
+.checkout-button {
+    background-color: #0FAA39;
+    color: #fff;
+    padding: 12px;
+    border-radius: 8px;
+    border: none;
+    width: 100%;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+        .suggestion-section {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 10px;
+        }
+       .suggestion-item {
+    display: flex;
+    align-items: center; /* Vertically align image and text */
+    justify-content: space-between; /* Space between the image/text and the button */
+    padding: 10px 0;
+}
+.suggestion-item img {
+    width: 50px;
+    height: 50px;
+    object-fit: cover;
+    border-radius: 5px;
+    margin-right: 10px; /* Spacing between the image and the text */
+}
+.suggestion-item div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-grow: 1; /* Allow the text to take up the available space */
+}
+.suggestion-item button {
+    padding: 5px 15px;
+    font-size: 0.9rem;
+    border-radius: 5px;
+    border: 2px solid #0FAA39;
+    color: #0FAA39;
+    background-color: #fff;
+    font-weight: 600;
+    height: 44px;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+    margin-left: auto; /* Push button to the right */
+}
+       .suggestion-item button:hover {
+           background-color: #0FAA39; /* Change background to green on hover */
+           color: #fff; /* Change text color to white on hover */
+           border-color: #0FAA39; /* Keep the border green */
+       }
         .remove-icon {
             border: none;
             background: none;
+                </div>
+                <div class="dotted-line"></div>
+                <div class="total-bill">
+                     <div class="label">To Pay</div>
+                     <div class="amount" id="totalBillText">${{ subtotal }}</div>
+                </div>
+                <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
+            </div>
+        </div>
+    </div>
+                    <div class="amount" id="discountText">-${{ discount }}</div>
                 </div>
                 <div class="dotted-line"></div>
                 let total = subtotal - discount;
                 // Update UI
+                document.getElementById("discountText").innerText = `$${discount.toFixed(2)}`;
+                document.getElementById("totalBillText").innerText = `$${total.toFixed(2)}`;
             } else {
                 // If checkbox is not selected, reset discount
+                document.getElementById("discountText").innerText = `$0`;
+                document.getElementById("totalBillText").innerText = `$${subtotal.toFixed(2)}`;
             }
         }