BiryaniHubflask17

Sleeping

App Files Files Community

Rammohan0504 commited on Jan 27

Commit

1cefdd1

verified ·

1 Parent(s): 786415e

Update templates/cart.html

Browse files

Files changed (1) hide show

templates/cart.html +58 -21

templates/cart.html CHANGED Viewed

@@ -81,8 +81,10 @@
             margin-top: 20px;
             text-align: right;
         }
-        .apply-coupon select, .apply-coupon button {
-            font-size: 1rem;
         }
         .apply-coupon button {
             background-color: #28a745;
@@ -90,6 +92,7 @@
             padding: 5px 15px;
             border: none;
             cursor: pointer;
         }
         .apply-coupon button:hover {
             background-color: #218838;
@@ -99,6 +102,37 @@
             font-size: 1rem;
             color: red;
         }
     </style>
 </head>
 <body>
@@ -146,12 +180,7 @@
             <!-- Apply Coupon Section -->
             <div class="apply-coupon">
                 <label for="coupon-code">Coupon Code:</label>
-                <select id="coupon-code" name="coupon_code">
-                    <option value="">Select a coupon code</option>
-                    {% for coupon in coupon_codes %}
-                    <option value="{{ coupon.Coupon_Code__c }}">{{ coupon.Coupon_Code__c }}</option>
-                    {% endfor %}
-                </select>
                 <button type="button" onclick="applyCoupon()">Apply Coupon</button>
                 <p id="coupon-message" class="coupon-message"></p>
             </div>
@@ -162,32 +191,40 @@
                 <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
             </div>
         </div>
     </div>
     <script>
-        // Fetch coupon codes automatically when the page loads
         document.addEventListener("DOMContentLoaded", function() {
             const customerEmail = "{{ customer_email }}"; // The email stored in the session
             if (customerEmail) {
-                fetch(`/get_coupon_codes?email=${customerEmail}`)
                     .then(response => response.json())
                     .then(data => {
-                        if (data.success && data.coupon_codes) {
-                            const couponSelect = document.getElementById('coupon-code');
-                            data.coupon_codes.forEach(coupon => {
-                                const option = document.createElement('option');
-                                option.value = coupon.Coupon_Code__c;
-                                option.textContent = coupon.Coupon_Code__c;
-                                couponSelect.appendChild(option);
-                            });
                         } else {
-                            document.getElementById('coupon-message').innerText = "No active coupons found for your account.";
                             document.getElementById('coupon-message').style.color = "red";
                         }
                     })
                     .catch(error => {
-                        console.error('Error fetching coupon codes:', error);
                     });
             }
         });
@@ -226,7 +263,7 @@
                     couponMessage.style.color = 'red';
                 });
             } else {
-                couponMessage.innerText = 'Please select a coupon code.';
                 couponMessage.style.color = 'red';
             }
         }

             margin-top: 20px;
             text-align: right;
         }
+        .apply-coupon input {
+            width: 200px;
+            padding: 5px;
+            margin-right: 10px;
         }
         .apply-coupon button {
             background-color: #28a745;
             padding: 5px 15px;
             border: none;
             cursor: pointer;
+            font-size: 1rem;
         }
         .apply-coupon button:hover {
             background-color: #218838;
             font-size: 1rem;
             color: red;
         }
+        .suggestion-section {
+            margin-top: 20px;
+            padding: 15px;
+            background-color: #f8f9fa;
+            border-radius: 10px;
+        }
+        .suggestion-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 0;
+        }
+        .suggestion-item img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            border-radius: 5px;
+        }
+        .add-back-button {
+            padding: 5px 15px;
+            font-size: 0.9rem;
+            border-radius: 20px;
+            border: 1px solid #007bff;
+            color: #007bff;
+            background-color: #fff;
+            cursor: pointer;
+        }
+        .add-back-button:hover {
+            background-color: #007bff;
+            color: #fff;
+        }
     </style>
 </head>
 <body>
             <!-- Apply Coupon Section -->
             <div class="apply-coupon">
                 <label for="coupon-code">Coupon Code:</label>
+                <input type="text" id="coupon-code" name="coupon_code" placeholder="Coupon code will appear here" readonly>
                 <button type="button" onclick="applyCoupon()">Apply Coupon</button>
                 <p id="coupon-message" class="coupon-message"></p>
             </div>
                 <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
             </div>
         </div>
+        <!-- Suggestions Section -->
+        <div class="suggestion-section">
+            {% 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="addSuggestion('{{ suggestion.Id }}')">Add</button>
+            </div>
+            {% endfor %}
+        </div>
     </div>
     <script>
+        // Fetch coupon code automatically when the page loads
         document.addEventListener("DOMContentLoaded", function() {
             const customerEmail = "{{ customer_email }}"; // The email stored in the session
             if (customerEmail) {
+                fetch(`/get_coupon_code?email=${customerEmail}`)
                     .then(response => response.json())
                     .then(data => {
+                        if (data.success && data.coupon_code) {
+                            document.getElementById('coupon-code').value = data.coupon_code; // Set coupon code in the input
                         } else {
+                            document.getElementById('coupon-message').innerText = "No coupon found for your account.";
                             document.getElementById('coupon-message').style.color = "red";
                         }
                     })
                     .catch(error => {
+                        console.error('Error fetching coupon code:', error);
                     });
             }
         });
                     couponMessage.style.color = 'red';
                 });
             } else {
+                couponMessage.innerText = 'Please enter a coupon code.';
                 couponMessage.style.color = 'red';
             }
         }