Hugging Face's logo

Spaces:
Rammohan0504
/
BiryaniHubflask17
Sleeping

App Files Community
Rammohan0504 commited on
Commit
5299317
·
verified ·
1 Parent(s): 39b6e57

Update templates/cart.html

Browse files
Files changed (1) hide show
  1. templates/cart.html +116 -186
templates/cart.html CHANGED
@@ -3,16 +3,15 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Cart</title>
7
- <!-- Bootstrap CSS -->
8
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9
  <style>
10
  body {
11
  font-family: Arial, sans-serif;
12
  background-color: #f8f9fa;
13
- }
14
  .cart-container {
15
- max-width: 768px;
16
  margin: 20px auto;
17
  padding: 15px;
18
  background-color: #fff;
@@ -21,8 +20,8 @@
21
  }
22
  .cart-item {
23
  display: flex;
24
- align-items: center;
25
  justify-content: space-between;
 
26
  border-bottom: 1px solid #dee2e6;
27
  padding: 10px 0;
28
  }
@@ -37,13 +36,12 @@
37
  margin-left: 15px;
38
  }
39
  .cart-item-title {
40
- font-size: 1rem;
41
  font-weight: bold;
42
  }
43
  .cart-item-quantity {
44
  display: flex;
45
  align-items: center;
46
- margin-top: 5px;
47
  }
48
  .cart-item-quantity button {
49
  width: 30px;
@@ -66,94 +64,81 @@
66
  text-align: right;
67
  margin-top: 15px;
68
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  .checkout-button {
70
  background-color: #007bff;
71
  color: #fff;
72
  padding: 10px;
73
  border-radius: 5px;
74
- border: none;
75
  width: 100%;
76
  font-size: 1.2rem;
77
  cursor: pointer;
78
  margin-top: 10px;
79
  }
80
- .suggestion-section {
81
- margin-top: 20px;
82
- padding: 15px;
83
- background-color: #f8f9fa;
84
- border-radius: 10px;
85
- }
86
- .suggestion-item {
87
- display: flex;
88
- align-items: center;
89
- justify-content: space-between;
90
- padding: 10px 0;
91
- }
92
- .suggestion-item img {
93
- width: 50px;
94
- height: 50px;
95
- object-fit: cover;
96
- border-radius: 5px;
97
- }
98
- .add-back-button {
99
- padding: 5px 15px;
100
- font-size: 0.9rem;
101
- border-radius: 20px;
102
- border: 1px solid #007bff;
103
- color: #007bff;
104
- background-color: #fff;
105
- cursor: pointer;
106
- }
107
- .add-back-button:hover {
108
- background-color: #007bff;
109
- color: #fff;
110
  }
111
  </style>
112
  </head>
113
  <body>
114
  <div class="container">
115
  <div class="cart-container">
116
- <div style="text-align: right;">
117
- <a href="/menu" style="text-decoration: none; font-size: 1.5rem; color: #007bff;">&times;</a>
118
- </div>
119
-
120
- <h4 class="mb-4">Your Cart</h4>
121
-
122
  <!-- Cart Items -->
123
  {% for item in cart_items %}
124
  <div class="cart-item">
125
  <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
126
  <div class="cart-item-details">
127
- <div class="cart-item-title">{{ item.Name }}</div>
128
- <div class="cart-item-addons">
129
  <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
130
  </div>
131
  <div class="cart-item-instructions">
132
  <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
133
  </div>
134
- <div class="cart-item-quantity mt-2">
135
- <!-- Decrease button -->
136
- <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
137
- <!-- Quantity input field -->
138
- <input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
139
- <!-- Increase button -->
140
- <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
141
  </div>
142
  </div>
143
  <div class="cart-item-actions">
144
  <div class="text-primary">
145
- $<span class="base-price">{{ item.Price__c }}</span>
146
-
147
  </div>
148
-
149
- <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
150
  </div>
151
  </div>
152
- {% else %}
153
- <p class="text-center">Your cart is empty.</p>
154
  {% endfor %}
155
 
156
-
157
  <div class="apply-coupon">
158
  <label for="coupon-code">Coupon Code:</label>
159
  <select id="coupon-code" name="coupon_code">
@@ -166,35 +151,17 @@
166
  <p id="coupon-message" class="coupon-message"></p>
167
  </div>
168
 
169
-
170
-
171
- <!-- Subtotal -->
172
- <div class="cart-summary">
173
- <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
174
- <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
175
- </div>
176
- </div>
177
-
178
- <!-- Suggestions Section -->
179
- <div class="suggestion-section">
180
-
181
- {% for suggestion in suggestions %}
182
- <div class="suggestion-item">
183
- <img src="{{ suggestion.Image1__c }}" alt="{{ suggestion.Name }}" onerror="this.src='/static/placeholder.jpg';">
184
- <div>
185
- <div>{{ suggestion.Name }}</div>
186
- <div class="text-muted">${{ suggestion.Price__c }}</div>
187
- </div>
188
- <button class="add-back-button" onclick="addSuggestion('{{ suggestion.Id }}')">Add</button>
189
- </div>
190
- {% endfor %}
191
- </div>
192
- </div>
193
-
194
  <script>
195
-
196
-
197
- document.addEventListener("DOMContentLoaded", function() {
198
  const customerEmail = "{{ customer_email }}"; // The email stored in the session
199
 
200
  if (customerEmail) {
@@ -221,48 +188,9 @@
221
  });
222
 
223
 
224
- // Apply coupon and discount
225
- function applyCoupon() {
226
- const couponCode = document.getElementById('coupon-code').value;
227
- const subtotal = parseFloat(document.getElementById('subtotal-text').innerText.replace('Subtotal: $', ''));
228
- const couponMessage = document.getElementById('coupon-message');
229
-
230
- if (couponCode) {
231
- fetch('/apply_coupon', {
232
- method: 'POST',
233
- headers: {
234
- 'Content-Type': 'application/json'
235
- },
236
- body: JSON.stringify({ coupon_code: couponCode, subtotal: subtotal })
237
- })
238
- .then(response => response.json())
239
- .then(data => {
240
- if (data.success) {
241
- const discount = data.discount;
242
- const totalPrice = subtotal - discount;
243
- document.getElementById('discount-text').innerText = Discount: $${discount.toFixed(2)};
244
- document.getElementById('total-text').innerText = Total: $${totalPrice.toFixed(2)};
245
- couponMessage.innerText = Coupon applied! You saved $${discount.toFixed(2)};
246
- couponMessage.style.color = 'green';
247
- } else {
248
- couponMessage.innerText = data.message;
249
- couponMessage.style.color = 'red';
250
- }
251
- })
252
- .catch(error => {
253
- console.error('Error applying coupon:', error);
254
- couponMessage.innerText = 'Error applying coupon.';
255
- couponMessage.style.color = 'red';
256
- });
257
- } else {
258
- couponMessage.innerText = 'Please select a coupon code.';
259
- couponMessage.style.color = 'red';
260
- }
261
- }
262
-
263
- // Example function to handle the increase/decrease button clicks
264
  function updateQuantity(action, itemName, customerEmail) {
265
- let quantityInput = document.querySelector(`input[data-item-name="${itemName}"]`);
266
  let quantity = parseInt(quantityInput.value);
267
  // Update quantity based on action
268
  if (action === 'increase') {
@@ -303,7 +231,7 @@
303
  addonsPriceElement.innerText = data.addons_price.toFixed(2);
304
  }
305
  } else {
306
- console.error(`Parent cart item element not found for item: ${itemName}`);
307
  }
308
  location.reload();
309
 
@@ -316,56 +244,48 @@
316
  .catch(err => console.error("Error:", err));
317
  }
318
 
319
-
320
- function calculateSubtotal() {
321
- let subtotal = 0;
322
- document.querySelectorAll('.cart-item').forEach(item => {
323
- const quantity = parseInt(item.querySelector('input').value);
324
- const basePrice = parseFloat(item.querySelector('.base-price').innerText.replace('$', '')); // Base Price
325
- const addonsPrice = parseFloat(item.querySelector('.addons-price').innerText.replace('$', '')) || 0; // Add-ons Price
326
- subtotal += (basePrice * quantity) + addonsPrice; // Include add-ons price in subtotal
327
- });
328
 
329
- // Update the subtotal in the HTML
330
- document.querySelector('.cart-summary p').innerText = `Subtotal: $${subtotal.toFixed(2)}`;
331
- return subtotal;
332
- }
 
333
 
334
-
335
- function proceedToOrder() {
336
- fetch('/checkout', {
337
- method: 'POST',
338
- })
339
- .then(response => response.json())
340
- .then(data => {
341
- if (data.success) {
342
- alert(data.message);
343
- window.location.href = '/order'; // Redirect to menu or order confirmation page
344
- } else {
345
- alert(data.error || data.message);
346
- }
347
- })
348
- .catch(err => console.error('Error during checkout:', err));
349
- }
350
- function addSuggestion(itemId) {
351
- fetch(`/cart/add_suggestion/${itemId}`, {
352
  method: 'POST',
353
- headers: { 'Content-Type': 'application/json' },
354
- body: JSON.stringify({})
 
 
355
  })
356
  .then(response => response.json())
357
  .then(data => {
358
  if (data.success) {
359
- alert('Item added to cart!');
360
- location.reload();
 
 
 
 
361
  } else {
362
- alert(data.error);
 
363
  }
364
  })
365
- .catch(err => console.error('Error adding suggestion:', err));
 
 
 
 
 
 
 
366
  }
367
- function removeItemFromCart(itemName) {
368
- fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
 
 
369
  method: 'POST',
370
  headers: {
371
  'Content-Type': 'application/json'
@@ -382,30 +302,40 @@
382
  })
383
  .catch(err => console.error('Error removing item:', err));
384
  }
385
- function addToCart(itemName, customerEmail) {
386
- fetch(`/cart/add_item`, {
387
- method: "POST",
388
- headers: { "Content-Type": "application/json" },
389
- body: JSON.stringify({
390
- email: customerEmail,
391
- item_name: itemName.trim(), //Ensure the item name is trimmed
392
- quantity: 0 // DEFAULT QUANTITY PASSED HERE
393
- })
394
  })
395
  .then(response => response.json())
396
  .then(data => {
397
  if (data.success) {
398
- alert("Item added/updated successfully.");
399
- location.reload(); // Reload the page to update the cart
400
  } else {
401
- alert(data.error || "Failed to add item to cart.");
402
  }
403
  })
404
- .catch(err => console.error("Error adding item to cart:", err));
405
  }
406
-
407
-
408
- </script>
409
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
410
  </body>
411
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Your Cart</title>
 
7
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <style>
9
  body {
10
  font-family: Arial, sans-serif;
11
  background-color: #f8f9fa;
12
+ }
13
  .cart-container {
14
+ max-width: 800px;
15
  margin: 20px auto;
16
  padding: 15px;
17
  background-color: #fff;
 
20
  }
21
  .cart-item {
22
  display: flex;
 
23
  justify-content: space-between;
24
+ align-items: center;
25
  border-bottom: 1px solid #dee2e6;
26
  padding: 10px 0;
27
  }
 
36
  margin-left: 15px;
37
  }
38
  .cart-item-title {
39
+ font-size: 1.1rem;
40
  font-weight: bold;
41
  }
42
  .cart-item-quantity {
43
  display: flex;
44
  align-items: center;
 
45
  }
46
  .cart-item-quantity button {
47
  width: 30px;
 
64
  text-align: right;
65
  margin-top: 15px;
66
  }
67
+ .coupon-section {
68
+ display: flex;
69
+ justify-content: space-between;
70
+ align-items: center;
71
+ margin-top: 20px;
72
+ }
73
+ .apply-button {
74
+ background-color: #28a745;
75
+ color: #fff;
76
+ padding: 5px 20px;
77
+ font-size: 1rem;
78
+ font-weight: bold;
79
+ cursor: pointer;
80
+ border-radius: 5px;
81
+ border: none;
82
+ transition: background-color 0.3s ease, transform 0.2s ease;
83
+ }
84
+ .apply-button:disabled {
85
+ background-color: #6c757d;
86
+ cursor: not-allowed;
87
+ }
88
+
89
+ .apply-button:hover {
90
+ background-color: #218838; /* Darker green on hover */
91
+ transform: scale(1.05); /* Slightly enlarge the button when hovered */
92
+ }
93
+
94
  .checkout-button {
95
  background-color: #007bff;
96
  color: #fff;
97
  padding: 10px;
98
  border-radius: 5px;
 
99
  width: 100%;
100
  font-size: 1.2rem;
101
  cursor: pointer;
102
  margin-top: 10px;
103
  }
104
+ .error-message {
105
+ color: red;
106
+ margin-top: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  }
108
  </style>
109
  </head>
110
  <body>
111
  <div class="container">
112
  <div class="cart-container">
113
+ <h3>Your Cart</h3>
114
+
 
 
 
 
115
  <!-- Cart Items -->
116
  {% for item in cart_items %}
117
  <div class="cart-item">
118
  <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
119
  <div class="cart-item-details">
120
+ <div class="cart-item-title">{{ item.Name }}</div>
121
+ <div class="cart-item-addons">
122
  <small class="text-muted">Add-ons: {{ item.Add_Ons__c }}</small>
123
  </div>
124
  <div class="cart-item-instructions">
125
  <small class="text-muted">Instructions: {{ item.Instructions__c or "None" }}</small>
126
  </div>
127
+ <div class="cart-item-quantity">
128
+ <button onclick="updateQuantity('decrease', '{{ item.Name }}')">-</button>
129
+ <input type="text" value="{{ item.Quantity__c }}" readonly>
130
+ <button onclick="updateQuantity('increase', '{{ item.Name }}')">+</button>
 
 
 
131
  </div>
132
  </div>
133
  <div class="cart-item-actions">
134
  <div class="text-primary">
135
+ $<span class="item-price">{{ item.Price__c }}</span>
 
136
  </div>
137
+ <button class="btn btn-danger btn-sm" onclick="removeItem('{{ item.Name }}')">Remove</button>
 
138
  </div>
139
  </div>
 
 
140
  {% endfor %}
141
 
 
142
  <div class="apply-coupon">
143
  <label for="coupon-code">Coupon Code:</label>
144
  <select id="coupon-code" name="coupon_code">
 
151
  <p id="coupon-message" class="coupon-message"></p>
152
  </div>
153
 
154
+ <!-- Subtotal -->
155
+ <div class="cart-summary">
156
+ <p id="subtotal-text" class="fw-bold">Subtotal: ${{ subtotal }}</p>
157
+ <p id="discount-text" class="fw-bold">Discount: $0.00</p>
158
+ <p id="total-text" class="fw-bold">Total: ${{ subtotal }}</p> <!-- The final total after discount -->
159
+ <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
160
+ </div>
161
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  <script>
163
+ // Fetch coupon codes automatically when the page loads
164
+ document.addEventListener("DOMContentLoaded", function() {
 
165
  const customerEmail = "{{ customer_email }}"; // The email stored in the session
166
 
167
  if (customerEmail) {
 
188
  });
189
 
190
 
191
+ // Update item quantity
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
192
  function updateQuantity(action, itemName, customerEmail) {
193
+ let quantityInput = document.querySelector(input[data-item-name="${itemName}"]);
194
  let quantity = parseInt(quantityInput.value);
195
  // Update quantity based on action
196
  if (action === 'increase') {
 
231
  addonsPriceElement.innerText = data.addons_price.toFixed(2);
232
  }
233
  } else {
234
+ console.error(Parent cart item element not found for item: ${itemName});
235
  }
236
  location.reload();
237
 
 
244
  .catch(err => console.error("Error:", err));
245
  }
246
 
 
 
 
 
 
 
 
 
 
247
 
248
+ // Apply coupon and discount
249
+ function applyCoupon() {
250
+ const couponCode = document.getElementById('coupon-code').value;
251
+ const subtotal = parseFloat(document.getElementById('subtotal-text').innerText.replace('Subtotal: $', ''));
252
+ const couponMessage = document.getElementById('coupon-message');
253
 
254
+ if (couponCode) {
255
+ fetch('/apply_coupon', {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
256
  method: 'POST',
257
+ headers: {
258
+ 'Content-Type': 'application/json'
259
+ },
260
+ body: JSON.stringify({ coupon_code: couponCode, subtotal: subtotal })
261
  })
262
  .then(response => response.json())
263
  .then(data => {
264
  if (data.success) {
265
+ const discount = data.discount;
266
+ const totalPrice = subtotal - discount;
267
+ document.getElementById('discount-text').innerText = Discount: $${discount.toFixed(2)};
268
+ document.getElementById('total-text').innerText = Total: $${totalPrice.toFixed(2)};
269
+ couponMessage.innerText = Coupon applied! You saved $${discount.toFixed(2)};
270
+ couponMessage.style.color = 'green';
271
  } else {
272
+ couponMessage.innerText = data.message;
273
+ couponMessage.style.color = 'red';
274
  }
275
  })
276
+ .catch(error => {
277
+ console.error('Error applying coupon:', error);
278
+ couponMessage.innerText = 'Error applying coupon.';
279
+ couponMessage.style.color = 'red';
280
+ });
281
+ } else {
282
+ couponMessage.innerText = 'Please select a coupon code.';
283
+ couponMessage.style.color = 'red';
284
  }
285
+ }
286
+
287
+ function removeItemFromCart(itemName) {
288
+ fetch(/cart/remove/${encodeURIComponent(itemName)}, {
289
  method: 'POST',
290
  headers: {
291
  'Content-Type': 'application/json'
 
302
  })
303
  .catch(err => console.error('Error removing item:', err));
304
  }
305
+
306
+ function addSuggestion(itemId) {
307
+ fetch(/cart/add_suggestion/${itemId}, {
308
+ method: 'POST',
309
+ headers: { 'Content-Type': 'application/json' },
310
+ body: JSON.stringify({})
 
 
 
311
  })
312
  .then(response => response.json())
313
  .then(data => {
314
  if (data.success) {
315
+ alert('Item added to cart!');
316
+ location.reload();
317
  } else {
318
+ alert(data.error);
319
  }
320
  })
321
+ .catch(err => console.error('Error adding suggestion:', err));
322
  }
 
 
 
323
 
324
+ function proceedToOrder() {
325
+ fetch('/checkout', {
326
+ method: 'POST',
327
+ })
328
+ .then(response => response.json())
329
+ .then(data => {
330
+ if (data.success) {
331
+ alert(data.message);
332
+ window.location.href = '/order'; // Redirect to menu or order confirmation page
333
+ } else {
334
+ alert(data.error || data.message);
335
+ }
336
+ })
337
+ .catch(err => console.error('Error during checkout:', err));
338
+ }
339
+ </script>
340
  </body>
341
+ </html>