Hugging Face's logo

Spaces:
geethareddy
/
BiryaniHubsathi
Runtime error

App Files Community
geethareddy commited on
Commit
c567e60
·
verified ·
1 Parent(s): 4c557ac

Update templates/cart.html

Browse files
Files changed (1) hide show
  1. templates/cart.html +51 -59
templates/cart.html CHANGED
@@ -113,6 +113,10 @@
113
  <body>
114
  <div class="container">
115
  <div class="cart-container">
 
 
 
 
116
  <h4 class="mb-4">Your Cart</h4>
117
 
118
  <!-- Cart Items -->
@@ -120,18 +124,19 @@
120
  <div class="cart-item">
121
  <img src="{{ item.Image1__c }}" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
122
  <div class="cart-item-details">
123
- <div class="cart-item-title">{{ item.Name }}</div>
 
 
 
124
  <div class="cart-item-quantity mt-2">
125
  <!-- Decrease button -->
126
- <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
127
-
128
- <!-- Quantity input field -->
129
- <input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
130
-
131
- <!-- Increase button -->
132
- <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
133
- </div>
134
- </div>
135
  <div class="cart-item-actions">
136
  <div class="text-primary">${{ item.Price__c }}</div>
137
  <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
@@ -145,7 +150,6 @@
145
  <div class="cart-summary">
146
  <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
147
  <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
148
- <button class="checkout-button" onclick="viewCart()">View Cart</button>
149
  </div>
150
  </div>
151
 
@@ -165,15 +169,6 @@
165
  </div>
166
  </div>
167
 
168
- <!-- Error Popup (for demonstration) -->
169
- <div id="errorPopup" class="modal" style="display: none;">
170
- <div class="modal-content">
171
- <span class="close" onclick="closeErrorPopup()">&times;</span>
172
- <p>An error occurred while adding the item to the cart.</p>
173
- <button class="btn btn-primary" id="errorOkButton">OK</button>
174
- </div>
175
- </div>
176
-
177
  <script>
178
  function updateQuantity(action, itemName, price, customerEmail) {
179
  const inputField = document.querySelector(`input[data-item-name="${itemName}"]`);
@@ -192,25 +187,39 @@
192
  // Update the input field value locally
193
  inputField.value = currentQuantity;
194
 
195
- // Calculate new subtotal
196
- let newSubtotal = calculateSubtotal();
197
- subtotalField.innerText = `Subtotal: $${newSubtotal.toFixed(2)}`;
198
-
 
 
 
 
 
 
 
 
 
199
  // Make API call to update the quantity on the backend
200
  fetch(`/cart/update_quantity`, {
201
  method: "POST",
202
  headers: { "Content-Type": "application/json" },
203
- body: JSON.stringify({ email: customerEmail, item_name: itemName, action: action, quantity: currentQuantity })
204
- })
205
- .then(response => response.json())
206
- .then(data => {
207
- if (!data.success) {
208
- alert(data.error || "Failed to update quantity.");
209
- }
210
- })
211
- .catch(err => console.error("Error updating quantity:", err));
212
- }
213
-
 
 
 
 
 
214
  function calculateSubtotal() {
215
  let subtotal = 0;
216
  document.querySelectorAll('.cart-item').forEach(item => {
@@ -236,11 +245,6 @@
236
  })
237
  .catch(err => console.error('Error during checkout:', err));
238
  }
239
-
240
- function viewCart() {
241
- window.location.href = '/cart'; // Redirect to cart page
242
- }
243
-
244
  function addSuggestion(itemId) {
245
  fetch(`/cart/add_suggestion/${itemId}`, {
246
  method: 'POST',
@@ -258,11 +262,12 @@
258
  })
259
  .catch(err => console.error('Error adding suggestion:', err));
260
  }
261
-
262
  function removeItemFromCart(itemName) {
263
  fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
264
  method: 'POST',
265
- headers: { 'Content-Type': 'application/json' }
 
 
266
  })
267
  .then(response => response.json())
268
  .then(data => {
@@ -275,22 +280,20 @@
275
  })
276
  .catch(err => console.error('Error removing item:', err));
277
  }
278
-
279
  function addToCart(itemName, customerEmail) {
280
  fetch(`/cart/add_item`, {
281
  method: "POST",
282
  headers: { "Content-Type": "application/json" },
283
  body: JSON.stringify({
284
  email: customerEmail,
285
- item_name: itemName.trim(),
286
- quantity: 1 // Add 1 item by default
287
  })
288
  })
289
  .then(response => response.json())
290
  .then(data => {
291
  if (data.success) {
292
  alert("Item added/updated successfully.");
293
- closeItemDetailsModal(); // Close modal on success
294
  location.reload(); // Reload the page to update the cart
295
  } else {
296
  alert(data.error || "Failed to add item to cart.");
@@ -298,19 +301,8 @@
298
  })
299
  .catch(err => console.error("Error adding item to cart:", err));
300
  }
301
-
302
- function closeItemDetailsModal() {
303
- const modal = document.querySelector('#itemDetailsModal'); // Ensure your modal has the ID `itemDetailsModal`
304
- if (modal) {
305
- modal.style.display = 'none'; // Hides the modal
306
- }
307
- }
308
-
309
- // Close the error popup and modal when the "OK" button is clicked
310
- document.querySelector('#errorOkButton').addEventListener('click', function() {
311
- closeItemDetailsModal(); // Close the item details modal
312
- window.location.href = '/menu'; // Optionally, redirect to menu
313
- });
314
  </script>
315
 
316
  </body>
 
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 -->
 
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-quantity mt-2">
132
  <!-- Decrease button -->
133
+ <button onclick="updateQuantity('decrease', '{{ item.Name }}', '{{ customer_email }}')">-</button>
134
+ <!-- Quantity input field -->
135
+ <input type="text" value="{{ item.Quantity__c }}" readonly data-item-name="{{ item.Name }}">
136
+ <!-- Increase button -->
137
+ <button onclick="updateQuantity('increase', '{{ item.Name }}', '{{ customer_email }}')">+</button>
138
+ </div>
139
+ </div>
 
 
140
  <div class="cart-item-actions">
141
  <div class="text-primary">${{ item.Price__c }}</div>
142
  <button class="btn btn-danger btn-sm" onclick="removeItemFromCart('{{ item.Name }}')">Remove</button>
 
150
  <div class="cart-summary">
151
  <p class="fw-bold">Subtotal: ${{ subtotal }}</p>
152
  <button class="checkout-button" onclick="proceedToOrder()">Proceed to Order</button>
 
153
  </div>
154
  </div>
155
 
 
169
  </div>
170
  </div>
171
 
 
 
 
 
 
 
 
 
 
172
  <script>
173
  function updateQuantity(action, itemName, price, customerEmail) {
174
  const inputField = document.querySelector(`input[data-item-name="${itemName}"]`);
 
187
  // Update the input field value locally
188
  inputField.value = currentQuantity;
189
 
190
+ // Debugging: Log API request payload
191
+ console.log("Updating Quantity:", {
192
+ email: customerEmail,
193
+ item_name: itemName,
194
+ action: action,
195
+ price:price,
196
+ quantity: currentQuantity
197
+ });
198
+ // Calculate new subtotal
199
+ let newSubtotal = calculateSubtotal(); // Correctly declare the newSubtotal variable
200
+ subtotalField.innerText = `Subtotal: $${newSubtotal.toFixed(2)}`;
201
+ // Correctly append the itemId to the URL
202
+ // Make the server request to update the quantity
203
  // Make API call to update the quantity on the backend
204
  fetch(`/cart/update_quantity`, {
205
  method: "POST",
206
  headers: { "Content-Type": "application/json" },
207
+ body: JSON.stringify({ email: customerEmail,
208
+ item_name: itemName, action: action, quantity:currentQuantity }) //send the current quantity
209
+ })
210
+
211
+ .then(response => response.json())
212
+ .then(data => {
213
+ if (!data.success) {
214
+ alert(data.error || "Failed to update quantity.");
215
+ } else {
216
+ console.log(`Quantity updated for ${itemName}: ${currentQuantity}`);
217
+ }
218
+ })
219
+ .catch(err => console.error("Error updating quantity:", err));
220
+ }
221
+
222
+
223
  function calculateSubtotal() {
224
  let subtotal = 0;
225
  document.querySelectorAll('.cart-item').forEach(item => {
 
245
  })
246
  .catch(err => console.error('Error during checkout:', err));
247
  }
 
 
 
 
 
248
  function addSuggestion(itemId) {
249
  fetch(`/cart/add_suggestion/${itemId}`, {
250
  method: 'POST',
 
262
  })
263
  .catch(err => console.error('Error adding suggestion:', err));
264
  }
 
265
  function removeItemFromCart(itemName) {
266
  fetch(`/cart/remove/${encodeURIComponent(itemName)}`, {
267
  method: 'POST',
268
+ headers: {
269
+ 'Content-Type': 'application/json'
270
+ }
271
  })
272
  .then(response => response.json())
273
  .then(data => {
 
280
  })
281
  .catch(err => console.error('Error removing item:', err));
282
  }
 
283
  function addToCart(itemName, customerEmail) {
284
  fetch(`/cart/add_item`, {
285
  method: "POST",
286
  headers: { "Content-Type": "application/json" },
287
  body: JSON.stringify({
288
  email: customerEmail,
289
+ item_name: itemName.trim(), //Ensure the item name is trimmed
290
+ quantity: 0 // DEFAULT QUANTITY PASSED HERE
291
  })
292
  })
293
  .then(response => response.json())
294
  .then(data => {
295
  if (data.success) {
296
  alert("Item added/updated successfully.");
 
297
  location.reload(); // Reload the page to update the cart
298
  } else {
299
  alert(data.error || "Failed to add item to cart.");
 
301
  })
302
  .catch(err => console.error("Error adding item to cart:", err));
303
  }
304
+
305
+
 
 
 
 
 
 
 
 
 
 
 
306
  </script>
307
 
308
  </body>