Spaces:
Sleeping
Sleeping
Update templates/Menu.html
Browse files- templates/Menu.html +34 -16
templates/Menu.html
CHANGED
|
@@ -188,6 +188,30 @@
|
|
| 188 |
margin-top: 10px;
|
| 189 |
/* margin-bottom: 5px; */
|
| 190 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 191 |
</style>
|
| 192 |
</head>
|
| 193 |
<body>
|
|
@@ -208,7 +232,7 @@
|
|
| 208 |
|
| 209 |
<!-- Main Content -->
|
| 210 |
<div class="container">
|
| 211 |
-
<h2>Menu</h2>
|
| 212 |
<div id="menu"></div>
|
| 213 |
</div>
|
| 214 |
|
|
@@ -237,23 +261,17 @@
|
|
| 237 |
}
|
| 238 |
|
| 239 |
// Display menu items on the page
|
| 240 |
-
function
|
| 241 |
const menuContainer = document.getElementById("menu");
|
| 242 |
menuContainer.innerHTML = '';
|
| 243 |
|
| 244 |
-
|
| 245 |
const menuItem = document.createElement("div");
|
| 246 |
menuItem.classList.add("menu-item");
|
| 247 |
menuItem.innerHTML = `
|
| 248 |
-
|
| 249 |
-
<div class="bestseller">
|
| 250 |
-
<img src="bestseller-icon.png" alt="Best Seller"> Bestseller
|
| 251 |
-
</div>
|
| 252 |
<h3>${item.Name}</h3>
|
| 253 |
<p class="price">$${item.Price__c}</p>
|
| 254 |
-
<div class="rating">⭐ 4.2 (206)</div>
|
| 255 |
-
<button class="save-btn">❤️ Save to Eatlist</button>
|
| 256 |
-
<p class="description">${item.Description__c}</p>
|
| 257 |
</div>
|
| 258 |
<div class="add-container">
|
| 259 |
<img class="menu-img" src="${item.Image1__c}" alt="${item.Name}">
|
|
@@ -263,7 +281,7 @@
|
|
| 263 |
<span>${cart[item.Name].quantity}</span>
|
| 264 |
<button onclick="increaseQuantity('${item.Name}')">+</button>
|
| 265 |
</div>`
|
| 266 |
-
: `<button class="add-btn" onclick=
|
| 267 |
<p class="customizable" style="text-align: center; margin-top: 10px;">Customisable</p>
|
| 268 |
</div>
|
| 269 |
`;
|
|
@@ -290,13 +308,13 @@
|
|
| 290 |
});
|
| 291 |
|
| 292 |
// Function to handle adding an item to the cart
|
| 293 |
-
function addToCart(
|
| 294 |
-
if (cart[
|
| 295 |
-
cart[
|
| 296 |
} else {
|
| 297 |
-
cart[
|
| 298 |
}
|
| 299 |
-
|
| 300 |
}
|
| 301 |
|
| 302 |
// Function to increase quantity
|
|
|
|
| 188 |
margin-top: 10px;
|
| 189 |
/* margin-bottom: 5px; */
|
| 190 |
}
|
| 191 |
+
.quantity-control {
|
| 192 |
+
display: flex;
|
| 193 |
+
align-items: center;
|
| 194 |
+
gap: 10px;
|
| 195 |
+
background: #28a745;
|
| 196 |
+
color: white;
|
| 197 |
+
padding: 5px 10px;
|
| 198 |
+
border-radius: 20px;
|
| 199 |
+
font-weight: bold;
|
| 200 |
+
}
|
| 201 |
+
.quantity-control button {
|
| 202 |
+
background: white;
|
| 203 |
+
border: none;
|
| 204 |
+
color: #28a745;
|
| 205 |
+
font-size: 16px;
|
| 206 |
+
font-weight: bold;
|
| 207 |
+
padding: 5px 10px;
|
| 208 |
+
border-radius: 50%;
|
| 209 |
+
cursor: pointer;
|
| 210 |
+
}
|
| 211 |
+
.quantity-control span {
|
| 212 |
+
font-size: 16px;
|
| 213 |
+
font-weight: bold;
|
| 214 |
+
}
|
| 215 |
</style>
|
| 216 |
</head>
|
| 217 |
<body>
|
|
|
|
| 232 |
|
| 233 |
<!-- Main Content -->
|
| 234 |
<div class="container">
|
| 235 |
+
<h2 align-item: "center">Menu</h2>
|
| 236 |
<div id="menu"></div>
|
| 237 |
</div>
|
| 238 |
|
|
|
|
| 261 |
}
|
| 262 |
|
| 263 |
// Display menu items on the page
|
| 264 |
+
function updateMenuUI() {
|
| 265 |
const menuContainer = document.getElementById("menu");
|
| 266 |
menuContainer.innerHTML = '';
|
| 267 |
|
| 268 |
+
filteredMenu.forEach(item => {
|
| 269 |
const menuItem = document.createElement("div");
|
| 270 |
menuItem.classList.add("menu-item");
|
| 271 |
menuItem.innerHTML = `
|
| 272 |
+
<div class="menu-details">
|
|
|
|
|
|
|
|
|
|
| 273 |
<h3>${item.Name}</h3>
|
| 274 |
<p class="price">$${item.Price__c}</p>
|
|
|
|
|
|
|
|
|
|
| 275 |
</div>
|
| 276 |
<div class="add-container">
|
| 277 |
<img class="menu-img" src="${item.Image1__c}" alt="${item.Name}">
|
|
|
|
| 281 |
<span>${cart[item.Name].quantity}</span>
|
| 282 |
<button onclick="increaseQuantity('${item.Name}')">+</button>
|
| 283 |
</div>`
|
| 284 |
+
: `<button class="add-btn" onclick="addToCart('${item.Name}', ${item.Price__c}, '${item.Image1__c}')">ADD</button>`}
|
| 285 |
<p class="customizable" style="text-align: center; margin-top: 10px;">Customisable</p>
|
| 286 |
</div>
|
| 287 |
`;
|
|
|
|
| 308 |
});
|
| 309 |
|
| 310 |
// Function to handle adding an item to the cart
|
| 311 |
+
function addToCart(itemName, proce, image) {
|
| 312 |
+
if (cart[itemName]) {
|
| 313 |
+
cart[itemName].quantity += 1;
|
| 314 |
} else {
|
| 315 |
+
cart[itemName] = { Name: itemName, Price: price, Image: image, quantity: 1 };
|
| 316 |
}
|
| 317 |
+
updateMenuUI(); // Refresh menu UI without reloading
|
| 318 |
}
|
| 319 |
|
| 320 |
// Function to increase quantity
|