Spaces:
Sleeping
Sleeping
Update templates/menu.html
Browse files- templates/menu.html +74 -15
templates/menu.html
CHANGED
|
@@ -127,9 +127,30 @@
|
|
| 127 |
.dropdown-menu .dropdown-item:hover {
|
| 128 |
background-color: #f1f1f1;
|
| 129 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 130 |
</style>
|
| 131 |
</head>
|
| 132 |
<body>
|
|
|
|
|
|
|
|
|
|
| 133 |
<div class="d-flex justify-content-between align-items-center p-3" style="background-color: #5bbfc1; color: white;">
|
| 134 |
<!-- Removed Reward Points and Referral Code -->
|
| 135 |
<div class="d-flex align-items-center">
|
|
@@ -175,25 +196,27 @@
|
|
| 175 |
</select>
|
| 176 |
</form>
|
| 177 |
|
| 178 |
-
<!-- Display Menu Items by Section -->
|
| 179 |
{% for section, items in ordered_menu.items() %}
|
| 180 |
-
<
|
| 181 |
-
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
<div class="card-
|
| 187 |
-
<
|
| 188 |
-
<
|
| 189 |
-
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
|
|
|
|
|
|
|
|
|
|
| 193 |
</div>
|
| 194 |
</div>
|
|
|
|
| 195 |
</div>
|
| 196 |
-
{% endfor %}
|
| 197 |
</div>
|
| 198 |
{% endfor %}
|
| 199 |
</div>
|
|
@@ -286,6 +309,42 @@
|
|
| 286 |
document.getElementById('addons-list').innerHTML = 'Unable to fetch add-ons. Please try again later.';
|
| 287 |
});
|
| 288 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 289 |
function addToCartFromModal() {
|
| 290 |
const itemName = document.getElementById('modal-name').innerText; // Get item name
|
| 291 |
const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price
|
|
|
|
| 127 |
.dropdown-menu .dropdown-item:hover {
|
| 128 |
background-color: #f1f1f1;
|
| 129 |
}
|
| 130 |
+
.fixed-search-container {
|
| 131 |
+
position: fixed;
|
| 132 |
+
top: 10px;
|
| 133 |
+
left: 50%;
|
| 134 |
+
transform: translateX(-50%);
|
| 135 |
+
width: 80%;
|
| 136 |
+
max-width: 600px;
|
| 137 |
+
z-index: 1000;
|
| 138 |
+
background-color: white;
|
| 139 |
+
padding: 10px;
|
| 140 |
+
border-radius: 25px;
|
| 141 |
+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
|
| 142 |
+
}
|
| 143 |
+
|
| 144 |
+
/* Add some margin to the menu container so it doesn't overlap with the search bar */
|
| 145 |
+
.container {
|
| 146 |
+
margin-top: 70px;
|
| 147 |
+
}
|
| 148 |
</style>
|
| 149 |
</head>
|
| 150 |
<body>
|
| 151 |
+
<div class="fixed-search-container">
|
| 152 |
+
<input type="text" id="searchBar" class="form-control" placeholder="Search items or sections..." onkeyup="filterMenu()">
|
| 153 |
+
</div>
|
| 154 |
<div class="d-flex justify-content-between align-items-center p-3" style="background-color: #5bbfc1; color: white;">
|
| 155 |
<!-- Removed Reward Points and Referral Code -->
|
| 156 |
<div class="d-flex align-items-center">
|
|
|
|
| 196 |
</select>
|
| 197 |
</form>
|
| 198 |
|
|
|
|
| 199 |
{% for section, items in ordered_menu.items() %}
|
| 200 |
+
<div class="menu-section">
|
| 201 |
+
<h3 class="mt-4">{{ section }}</h3>
|
| 202 |
+
<div class="row">
|
| 203 |
+
|
| 204 |
+
{% for item in items %}
|
| 205 |
+
<div class="col-md-6 mb-4">
|
| 206 |
+
<div class="card menu-card">
|
| 207 |
+
<img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';">
|
| 208 |
+
<div class="card-body">
|
| 209 |
+
<h5 class="card-title">{{ item.Name }}</h5>
|
| 210 |
+
<p class="card-text">${{ item.Price__c }}</p>
|
| 211 |
+
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#itemModal"
|
| 212 |
+
onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{item.Section__c}}','{{ selected_category }}')">
|
| 213 |
+
Add +
|
| 214 |
+
</button>
|
| 215 |
+
</div>
|
| 216 |
</div>
|
| 217 |
</div>
|
| 218 |
+
{% endfor %}
|
| 219 |
</div>
|
|
|
|
| 220 |
</div>
|
| 221 |
{% endfor %}
|
| 222 |
</div>
|
|
|
|
| 309 |
document.getElementById('addons-list').innerHTML = 'Unable to fetch add-ons. Please try again later.';
|
| 310 |
});
|
| 311 |
}
|
| 312 |
+
function filterMenu() {
|
| 313 |
+
let input = document.getElementById('searchBar').value.toLowerCase();
|
| 314 |
+
let sections = document.querySelectorAll('.menu-section'); // Select all sections
|
| 315 |
+
let items = document.querySelectorAll('.menu-card'); // Select all items
|
| 316 |
+
|
| 317 |
+
// Hide all sections initially
|
| 318 |
+
sections.forEach(section => {
|
| 319 |
+
section.style.display = 'none';
|
| 320 |
+
});
|
| 321 |
+
|
| 322 |
+
// Hide all items initially
|
| 323 |
+
items.forEach(item => {
|
| 324 |
+
item.style.display = 'none';
|
| 325 |
+
});
|
| 326 |
+
|
| 327 |
+
let matchedSections = new Set(); // Store matched sections
|
| 328 |
+
|
| 329 |
+
// Show items that match the search query
|
| 330 |
+
items.forEach(item => {
|
| 331 |
+
let itemName = item.querySelector('.card-title').innerText.toLowerCase();
|
| 332 |
+
let itemSection = item.closest('.menu-section')?.querySelector('h3')?.innerText.toLowerCase();
|
| 333 |
+
|
| 334 |
+
// If item name or section name matches the search query, show it
|
| 335 |
+
if (itemName.includes(input) || (itemSection && itemSection.includes(input))) {
|
| 336 |
+
item.style.display = 'block';
|
| 337 |
+
matchedSections.add(item.closest('.menu-section')); // Store the section
|
| 338 |
+
}
|
| 339 |
+
});
|
| 340 |
+
|
| 341 |
+
// Show matched sections
|
| 342 |
+
matchedSections.forEach(section => {
|
| 343 |
+
section.style.display = 'block';
|
| 344 |
+
});
|
| 345 |
+
}
|
| 346 |
+
|
| 347 |
+
|
| 348 |
function addToCartFromModal() {
|
| 349 |
const itemName = document.getElementById('modal-name').innerText; // Get item name
|
| 350 |
const itemPrice = parseFloat(document.getElementById('modal-price').innerText.replace('$', '')); // Get item price
|