Restaurant Menu<\/title>\n\n<style>\n\/* ===== RESET ===== *\/\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: #fff;\n color: #111;\n}\n\nbody.modal-open {\n overflow: hidden;\n}\n\n\/* ===== WRAPPER ===== *\/\n.wrap {\n width: 100%;\n max-width: 980px;\n margin: 0 auto;\n padding: 16px;\n}\n\n\/* ===== HEADER ===== *\/\n.menu-top {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 14px;\n margin-bottom: 24px;\n}\n\n.menu-logo {\n max-width: 180px;\n}\n\n.menu-title {\n font-size: 22px;\n font-weight: 800;\n}\n\n\/* ===== CATEGORIES ===== *\/\n.cats {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 14px;\n}\n\n.cat-card {\n position: relative;\n min-height: 170px;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n}\n\n.cat-card img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.cat-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: flex-end;\n padding: 14px;\n color: #fff;\n background:\n linear-gradient(\n to top,\n rgba(0, 0, 0, 0.8),\n rgba(0, 0, 0, 0.15)\n );\n}\n\n@media (min-width: 720px) {\n .cats {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n\/* ===== MODAL ADD-ON \/ SUB CATEGORY ===== *\/\n.addon-wrap {\n margin-top: 18px;\n padding-top: 12px;\n border-top: 1px dashed rgba(0, 0, 0, 0.2);\n}\n\n.addon-title {\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: 800;\n}\n\n.addon-item {\n display: flex;\n justify-content: space-between;\n padding: 6px 0;\n font-size: 14px;\n}\n\n.addon-price {\n font-weight: 700;\n white-space: nowrap;\n}\n\n\/* =====================================================\n PRODUCT IMAGE CLICK\n Existing product layout remains unchanged\n===================================================== *\/\n.product-image-click {\n cursor: pointer;\n transition:\n opacity 0.2s ease,\n transform 0.2s ease;\n}\n\n.product-image-click:hover {\n opacity: 0.9;\n}\n\n.product-image-click:active {\n transform: scale(0.98);\n}\n\n\/* =====================================================\n PRODUCT DESCRIPTION POPUP\n===================================================== *\/\n.product-desc-popup {\n position: fixed;\n inset: 0;\n z-index: 999999;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n padding-top: 20px;\n background: rgba(0, 0, 0, 0.76);\n backdrop-filter: blur(6px);\n animation: productPopupFade 0.2s ease;\n}\n\n.product-desc-popup-box {\n width: 100%;\n max-width: 590px;\n max-height: 92vh;\n overflow-y: auto;\n border-radius: 24px 24px 0 0;\n background: #fff;\n box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.35);\n animation: productPopupUp 0.28s ease;\n}\n\n@keyframes productPopupFade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes productPopupUp {\n from {\n opacity: 0;\n transform: translateY(35px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.product-desc-popup-image-wrap {\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n background: #ececec;\n}\n\n.product-desc-popup-image {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.product-desc-popup-no-image {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: #777;\n font-size: 52px;\n}\n\n.product-desc-popup-close {\n position: absolute;\n top: 13px;\n right: 13px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 43px;\n height: 43px;\n padding: 0;\n border: 1px solid rgba(255, 255, 255, 0.45);\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.7);\n color: #fff;\n font-size: 25px;\n line-height: 1;\n cursor: pointer;\n}\n\n.product-desc-popup-content {\n padding: 20px;\n}\n\n.product-desc-popup-label {\n display: inline-flex;\n margin-bottom: 10px;\n padding: 5px 9px;\n border-radius: 999px;\n background: #f3ead5;\n color: #75520d;\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n.product-desc-popup-title {\n margin: 0;\n color: #171717;\n font-size: clamp(22px, 6vw, 30px);\n font-weight: 800;\n line-height: 1.45;\n}\n\n.product-desc-popup-prices {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 13px;\n}\n\n.product-desc-popup-price {\n display: inline-flex;\n padding: 7px 11px;\n border-radius: 999px;\n background: #171717;\n color: #fff;\n font-size: 14px;\n font-weight: 800;\n}\n\n.product-desc-popup-divider {\n width: 48px;\n height: 3px;\n margin: 18px 0;\n border-radius: 999px;\n background: #d4aa52;\n}\n\n.product-desc-popup-heading {\n margin: 0 0 8px;\n color: #222;\n font-size: 15px;\n font-weight: 800;\n}\n\n.product-desc-popup-text {\n margin: 0;\n color: #5f5f5f;\n font-size: 15px;\n line-height: 1.75;\n overflow-wrap: anywhere;\n}\n\n.product-desc-popup-text.is-empty {\n color: #999;\n font-style: italic;\n}\n\n.product-desc-popup-done {\n display: block;\n width: 100%;\n margin-top: 22px;\n padding: 13px 18px;\n border: 0;\n border-radius: 11px;\n background: #171717;\n color: #fff;\n font-weight: 800;\n cursor: pointer;\n}\n\n@media (min-width: 680px) {\n .product-desc-popup {\n align-items: center;\n padding: 24px;\n }\n\n .product-desc-popup-box {\n border-radius: 24px;\n }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"wrap\">\n\n <div class=\"menu-top\">\n\n <img decoding=\"async\"\n src=\"https:\/\/mm2.ezyqrmenu.com\/proburgerandcoffee\/wp-content\/uploads\/sites\/85\/2026\/01\/logonobg.png\"\n class=\"menu-logo\"\n alt=\"logo\"\n >\n\n <h1 class=\"menu-title\">\n PRO Burger & Coffee\n <\/h1>\n\n <\/div>\n\n <div\n class=\"cats\"\n id=\"menuCategories\"\n ><\/div>\n\n<\/div>\n\n\n<div\n class=\"modal\"\n id=\"menuModal\"\n aria-hidden=\"true\"\n>\n\n <div class=\"modal-sheet\">\n\n <div class=\"modal-header\">\n\n <div>\n <strong id=\"modalCatName\"><\/strong>\n <br>\n <span id=\"modalCatSub\"><\/span>\n <\/div>\n\n <button\n type=\"button\"\n id=\"closeModal\"\n >\n \u2715\n <\/button>\n\n <\/div>\n\n <div class=\"modal-body\">\n\n <div\n class=\"items\"\n id=\"itemsContainer\"\n ><\/div>\n\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n const modal =\n document.getElementById(\"menuModal\");\n\n const itemsContainer =\n document.getElementById(\"itemsContainer\");\n\n const catsWrap =\n document.getElementById(\"menuCategories\");\n\n const closeBtn =\n document.getElementById(\"closeModal\");\n\n const modalCatName =\n document.getElementById(\"modalCatName\");\n\n const modalCatSub =\n document.getElementById(\"modalCatSub\");\n\n if (\n !modal ||\n !itemsContainer ||\n !catsWrap\n ) {\n return;\n }\n\n const MENU_DATA =\n window.MENU_DATA || {};\n\n let activeCategory = null;\n\n \/* =====================================================\n TEXT FUNCTIONS\n ===================================================== *\/\n\n function escapeHTML(value) {\n\n return String(value ?? \"\").replace(\n \/[&<>\"']\/g,\n character => ({\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n '\"': \""\",\n \"'\": \"'\"\n })[character]\n );\n }\n\n function formatText(value) {\n\n return escapeHTML(value || \"\")\n .replace(\/\\[br\\]\/gi, \"<br>\")\n .replace(\/\\r\\n|\\r|\\n\/g, \"<br>\");\n }\n\n function plainText(value) {\n\n return String(value || \"\")\n .replace(\/\\[br\\]\/gi, \" \")\n .replace(\/\\s+\/g, \" \")\n .trim();\n }\n\n function getPrices(product) {\n\n if (Array.isArray(product?.prices)) {\n return product.prices;\n }\n\n if (\n product?.price !== undefined &&\n product?.price !== null &&\n product?.price !== \"\"\n ) {\n return [product.price];\n }\n\n return [];\n }\n\n \/* =====================================================\n RENDER MAIN CATEGORIES\n ===================================================== *\/\n\n catsWrap.innerHTML =\n Object.entries(MENU_DATA)\n .map(([key, cat]) => `\n\n <button\n type=\"button\"\n class=\"cat-card\"\n data-category=\"${escapeHTML(key)}\"\n >\n\n ${\n cat.img\n ? `\n <img decoding=\"async\"\n src=\"${escapeHTML(cat.img)}\"\n loading=\"lazy\"\n alt=\"${escapeHTML(\n plainText(cat.title || key)\n )}\"\n >\n `\n : \"\"\n }\n\n <strong>\n ${formatText(cat.title || key)}\n <\/strong>\n\n <\/button>\n\n `)\n .join(\"\");\n\n \/* =====================================================\n CLOSE DESCRIPTION POPUP\n ===================================================== *\/\n\n function closeDescriptionPopup() {\n\n const popup =\n document.getElementById(\n \"productDescriptionPopup\"\n );\n\n if (popup) {\n popup.remove();\n }\n }\n\n \/* =====================================================\n CLOSE ADD-ON POPUP\n ===================================================== *\/\n\n function closeAddonPopup() {\n\n const popup =\n document.getElementById(\"addonPopup\");\n\n if (popup) {\n popup.remove();\n }\n }\n\n \/* =====================================================\n CLOSE PRODUCT CATEGORY MODAL\n ===================================================== *\/\n\n function closeProductModal() {\n\n closeDescriptionPopup();\n closeAddonPopup();\n\n modal.classList.remove(\"is-open\");\n\n modal.setAttribute(\n \"aria-hidden\",\n \"true\"\n );\n\n document.body.classList.remove(\n \"modal-open\"\n );\n\n activeCategory = null;\n }\n\n closeBtn?.addEventListener(\n \"click\",\n closeProductModal\n );\n\n modal.addEventListener(\n \"click\",\n event => {\n\n if (event.target === modal) {\n closeProductModal();\n }\n }\n );\n\n \/* =====================================================\n ESCAPE KEY\n ===================================================== *\/\n\n window.addEventListener(\n \"keydown\",\n event => {\n\n if (event.key !== \"Escape\") {\n return;\n }\n\n const descriptionPopup =\n document.getElementById(\n \"productDescriptionPopup\"\n );\n\n if (descriptionPopup) {\n descriptionPopup.remove();\n return;\n }\n\n const addonPopup =\n document.getElementById(\n \"addonPopup\"\n );\n\n if (addonPopup) {\n addonPopup.remove();\n return;\n }\n\n if (\n modal.classList.contains(\n \"is-open\"\n )\n ) {\n closeProductModal();\n }\n }\n );\n\n \/* =====================================================\n OPEN CATEGORY MODAL\n ===================================================== *\/\n\n catsWrap.addEventListener(\n \"click\",\n event => {\n\n const card =\n event.target.closest(\".cat-card\");\n\n if (!card) {\n return;\n }\n\n const key =\n card.dataset.category;\n\n const cat =\n MENU_DATA[key];\n\n if (!cat) {\n return;\n }\n\n activeCategory = cat;\n\n modal.classList.add(\"is-open\");\n\n modal.setAttribute(\n \"aria-hidden\",\n \"false\"\n );\n\n document.body.classList.add(\n \"modal-open\"\n );\n\n modalCatName.innerHTML =\n formatText(cat.title || \"\");\n\n modalCatSub.innerHTML =\n formatText(cat.sub || \"\");\n\n const subCats =\n cat.children ||\n cat.subcategories ||\n {};\n\n const products =\n Array.isArray(cat.items)\n ? cat.items\n : [];\n\n itemsContainer.innerHTML = `\n\n ${products.map((product, index) => {\n\n const prices =\n getPrices(product);\n\n return `\n\n <div class=\"item\">\n\n \n <img decoding=\"async\"\n class=\"product-image-click\"\n data-product-index=\"${index}\"\n src=\"${escapeHTML(\n product.img || \"\"\n )}\"\n loading=\"lazy\"\n alt=\"${escapeHTML(\n plainText(\n product.name || \"\"\n )\n )}\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"View ${escapeHTML(\n plainText(\n product.name || \"product\"\n )\n )} description\"\n >\n\n <div class=\"item-info\">\n\n <p class=\"item-name\">\n ${formatText(\n product.name || \"\"\n )}\n <\/p>\n\n ${\n product.desc\n ? `\n <div class=\"item-desc\">\n ${formatText(\n product.desc\n )}\n <\/div>\n `\n : \"\"\n }\n\n <div class=\"item-meta\">\n\n ${prices.map(price => `\n <div class=\"price\">\n ${escapeHTML(price)}\n <\/div>\n `).join(\"\")}\n\n <\/div>\n\n ${\n Array.isArray(\n product.addons\n ) &&\n product.addons.length\n ? `\n <button\n type=\"button\"\n class=\"addon-open-btn\"\n data-item-index=\"${index}\"\n >\n Choose Add-ons\n <\/button>\n `\n : \"\"\n }\n\n <\/div>\n\n <\/div>\n\n `;\n }).join(\"\")}\n\n ${\n Object.values(subCats).length\n ? Object.values(subCats)\n .map(sub => `\n\n <div class=\"addon-wrap\">\n\n <h4 class=\"addon-title\">\n ${formatText(\n sub.title ||\n sub.name ||\n sub.label ||\n \"Add-On Menu\"\n )}\n <\/h4>\n\n ${\n (sub.items || [])\n .map(item => {\n\n const addonPrices =\n getPrices(item);\n\n return `\n\n <div class=\"addon-item\">\n\n <span class=\"addon-name\">\n ${formatText(\n item.name || \"\"\n )}\n <\/span>\n\n ${\n addonPrices.length\n ? `\n <span class=\"addon-price\">\n ${addonPrices\n .map(escapeHTML)\n .join(\" \/ \")}\n <\/span>\n `\n : \"\"\n }\n\n <\/div>\n\n `;\n })\n .join(\"\")\n }\n\n <\/div>\n\n `)\n .join(\"\")\n : \"\"\n }\n\n `;\n }\n );\n\n \/* =====================================================\n PRODUCT IMAGE CLICK EVENT\n ===================================================== *\/\n\n itemsContainer.addEventListener(\n \"click\",\n event => {\n\n const productImage =\n event.target.closest(\n \".product-image-click\"\n );\n\n if (\n !productImage ||\n !activeCategory\n ) {\n return;\n }\n\n const productIndex =\n Number(\n productImage.dataset\n .productIndex\n );\n\n const product =\n activeCategory.items?.[\n productIndex\n ];\n\n if (product) {\n openProductDescriptionPopup(\n product\n );\n }\n }\n );\n\n \/*\n * Keyboard support:\n * Enter or Space opens the image popup.\n *\/\n itemsContainer.addEventListener(\n \"keydown\",\n event => {\n\n if (\n event.key !== \"Enter\" &&\n event.key !== \" \"\n ) {\n return;\n }\n\n const productImage =\n event.target.closest(\n \".product-image-click\"\n );\n\n if (\n !productImage ||\n !activeCategory\n ) {\n return;\n }\n\n event.preventDefault();\n\n const productIndex =\n Number(\n productImage.dataset\n .productIndex\n );\n\n const product =\n activeCategory.items?.[\n productIndex\n ];\n\n if (product) {\n openProductDescriptionPopup(\n product\n );\n }\n }\n );\n\n \/* =====================================================\n ADD-ON BUTTON CLICK\n ===================================================== *\/\n\n itemsContainer.addEventListener(\n \"click\",\n event => {\n\n const button =\n event.target.closest(\n \".addon-open-btn\"\n );\n\n if (\n !button ||\n !activeCategory\n ) {\n return;\n }\n\n event.stopPropagation();\n\n const itemIndex =\n Number(\n button.dataset.itemIndex\n );\n\n const product =\n activeCategory.items?.[\n itemIndex\n ];\n\n if (\n !product ||\n !Array.isArray(\n product.addons\n )\n ) {\n return;\n }\n\n openAddonPopup(product);\n }\n );\n\n \/* =====================================================\n PRODUCT DESCRIPTION POPUP\n ===================================================== *\/\n\n function openProductDescriptionPopup(\n product\n ) {\n\n closeDescriptionPopup();\n closeAddonPopup();\n\n const prices =\n getPrices(product);\n\n const popup =\n document.createElement(\"div\");\n\n popup.id =\n \"productDescriptionPopup\";\n\n popup.className =\n \"product-desc-popup\";\n\n popup.setAttribute(\n \"role\",\n \"dialog\"\n );\n\n popup.setAttribute(\n \"aria-modal\",\n \"true\"\n );\n\n popup.setAttribute(\n \"aria-label\",\n plainText(\n product.name ||\n \"Product description\"\n )\n );\n\n popup.innerHTML = `\n\n <div class=\"product-desc-popup-box\">\n\n <div class=\"product-desc-popup-image-wrap\">\n\n ${\n product.img\n ? `\n <img decoding=\"async\"\n class=\"product-desc-popup-image\"\n src=\"${escapeHTML(\n product.img\n )}\"\n alt=\"${escapeHTML(\n plainText(\n product.name || \"\"\n )\n )}\"\n >\n `\n : `\n <div class=\"product-desc-popup-no-image\">\n \ud83c\udf7d\n <\/div>\n `\n }\n\n <button\n type=\"button\"\n class=\"product-desc-popup-close\"\n aria-label=\"Close description\"\n >\n \u00d7\n <\/button>\n\n <\/div>\n\n <div class=\"product-desc-popup-content\">\n\n <span class=\"product-desc-popup-label\">\n Menu Item\n <\/span>\n\n <h2 class=\"product-desc-popup-title\">\n ${formatText(\n product.name ||\n \"Menu Item\"\n )}\n <\/h2>\n\n ${\n prices.length\n ? `\n <div class=\"product-desc-popup-prices\">\n\n ${prices.map(price => `\n <span class=\"product-desc-popup-price\">\n ${escapeHTML(price)}\n <\/span>\n `).join(\"\")}\n\n <\/div>\n `\n : \"\"\n }\n\n <div class=\"product-desc-popup-divider\"><\/div>\n\n <h3 class=\"product-desc-popup-heading\">\n Description\n <\/h3>\n\n ${\n product.desc\n ? `\n <p class=\"product-desc-popup-text\">\n ${formatText(\n product.desc\n )}\n <\/p>\n `\n : `\n <p class=\"product-desc-popup-text is-empty\">\n No description is available for this product.\n <\/p>\n `\n }\n\n <button\n type=\"button\"\n class=\"product-desc-popup-done\"\n >\n Close\n <\/button>\n\n <\/div>\n\n <\/div>\n\n `;\n\n document.body.appendChild(\n popup\n );\n\n const closeButton =\n popup.querySelector(\n \".product-desc-popup-close\"\n );\n\n const doneButton =\n popup.querySelector(\n \".product-desc-popup-done\"\n );\n\n closeButton?.addEventListener(\n \"click\",\n closeDescriptionPopup\n );\n\n doneButton?.addEventListener(\n \"click\",\n closeDescriptionPopup\n );\n\n popup.addEventListener(\n \"click\",\n event => {\n\n if (event.target === popup) {\n closeDescriptionPopup();\n }\n }\n );\n\n closeButton?.focus();\n }\n\n \/* =====================================================\n ADD-ON POPUP\n ===================================================== *\/\n\n function openAddonPopup(product) {\n\n closeAddonPopup();\n closeDescriptionPopup();\n\n const popup =\n document.createElement(\"div\");\n\n popup.id =\n \"addonPopup\";\n\n popup.className =\n \"addon-popup-overlay\";\n\n popup.innerHTML = `\n\n <div class=\"addon-popup-box\">\n\n <div class=\"addon-popup-head\">\n\n <strong>\n ${formatText(\n product.name ||\n \"Add-ons\"\n )}\n <\/strong>\n\n <button\n type=\"button\"\n class=\"addon-popup-close\"\n >\n \u00d7\n <\/button>\n\n <\/div>\n\n <div class=\"addon-popup-body\">\n\n ${(product.addons || [])\n .map((group, groupIndex) => `\n\n <div class=\"addon-group\">\n\n <h4>\n ${formatText(\n group.title ||\n \"Choose Option\"\n )}\n <\/h4>\n\n ${(group.options || [])\n .map(option => {\n\n const label =\n typeof option ===\n \"string\"\n ? option\n : option.name || \"\";\n\n const price =\n typeof option ===\n \"object\" &&\n option.price\n ? ` - ${option.price}`\n : \"\";\n\n return `\n\n <label class=\"addon-option\">\n\n <input\n type=\"${\n group.type ||\n \"checkbox\"\n }\"\n name=\"${\n escapeHTML(\n group.key ||\n `addon_group_${groupIndex}`\n )\n }\"\n value=\"${\n escapeHTML(label)\n }\"\n >\n\n <span>\n ${formatText(label)}\n ${escapeHTML(price)}\n <\/span>\n\n <\/label>\n\n `;\n })\n .join(\"\")}\n\n <\/div>\n\n `)\n .join(\"\")}\n\n <\/div>\n\n <div class=\"addon-popup-footer\">\n\n <button\n type=\"button\"\n class=\"addon-done-btn\"\n >\n Done\n <\/button>\n\n <\/div>\n\n <\/div>\n\n `;\n\n document.body.appendChild(\n popup\n );\n\n popup\n .querySelector(\n \".addon-popup-close\"\n )\n ?.addEventListener(\n \"click\",\n closeAddonPopup\n );\n\n popup\n .querySelector(\n \".addon-done-btn\"\n )\n ?.addEventListener(\n \"click\",\n closeAddonPopup\n );\n\n popup.addEventListener(\n \"click\",\n event => {\n\n if (event.target === popup) {\n closeAddonPopup();\n }\n }\n );\n }\n\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Restaurant Menu PRO Burger & Coffee \u2715<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":216,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":2448,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages\/69\/revisions\/2448"}],"wp:attachment":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":69,"date":"2025-10-25T08:52:28","date_gmt":"2025-10-25T08:52:28","guid":{"rendered":"https:\/\/mm2.ezyqrmenu.com\/sun\/?page_id=69"},"modified":"2026-07-20T08:13:18","modified_gmt":"2026-07-20T08:13:18","slug":"menu","status":"publish","type":"page","link":"https:\/\/mm2.ezyqrmenu.com\/sun\/","title":{"rendered":"Menu"},"content":{"rendered":"\n\n\n\n\n\n\n\n\nRestaurant Menu<\/title>\n\n<style>\n\/* ===== RESET ===== *\/\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: #fff;\n color: #111;\n}\n\nbody.modal-open {\n overflow: hidden;\n}\n\n\/* ===== WRAPPER ===== *\/\n.wrap {\n width: 100%;\n max-width: 980px;\n margin: 0 auto;\n padding: 16px;\n}\n\n\/* ===== HEADER ===== *\/\n.menu-top {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 14px;\n margin-bottom: 24px;\n}\n\n.menu-logo {\n max-width: 180px;\n}\n\n.menu-title {\n font-size: 22px;\n font-weight: 800;\n}\n\n\/* ===== CATEGORIES ===== *\/\n.cats {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 14px;\n}\n\n.cat-card {\n position: relative;\n min-height: 170px;\n border-radius: 16px;\n overflow: hidden;\n cursor: pointer;\n}\n\n.cat-card img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.cat-overlay {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: flex-end;\n padding: 14px;\n color: #fff;\n background:\n linear-gradient(\n to top,\n rgba(0, 0, 0, 0.8),\n rgba(0, 0, 0, 0.15)\n );\n}\n\n@media (min-width: 720px) {\n .cats {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n\n\/* ===== MODAL ADD-ON \/ SUB CATEGORY ===== *\/\n.addon-wrap {\n margin-top: 18px;\n padding-top: 12px;\n border-top: 1px dashed rgba(0, 0, 0, 0.2);\n}\n\n.addon-title {\n margin-bottom: 8px;\n font-size: 14px;\n font-weight: 800;\n}\n\n.addon-item {\n display: flex;\n justify-content: space-between;\n padding: 6px 0;\n font-size: 14px;\n}\n\n.addon-price {\n font-weight: 700;\n white-space: nowrap;\n}\n\n\/* =====================================================\n PRODUCT IMAGE CLICK\n Existing product layout remains unchanged\n===================================================== *\/\n.product-image-click {\n cursor: pointer;\n transition:\n opacity 0.2s ease,\n transform 0.2s ease;\n}\n\n.product-image-click:hover {\n opacity: 0.9;\n}\n\n.product-image-click:active {\n transform: scale(0.98);\n}\n\n\/* =====================================================\n PRODUCT DESCRIPTION POPUP\n===================================================== *\/\n.product-desc-popup {\n position: fixed;\n inset: 0;\n z-index: 999999;\n display: flex;\n align-items: flex-end;\n justify-content: center;\n padding-top: 20px;\n background: rgba(0, 0, 0, 0.76);\n backdrop-filter: blur(6px);\n animation: productPopupFade 0.2s ease;\n}\n\n.product-desc-popup-box {\n width: 100%;\n max-width: 590px;\n max-height: 92vh;\n overflow-y: auto;\n border-radius: 24px 24px 0 0;\n background: #fff;\n box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.35);\n animation: productPopupUp 0.28s ease;\n}\n\n@keyframes productPopupFade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes productPopupUp {\n from {\n opacity: 0;\n transform: translateY(35px);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.product-desc-popup-image-wrap {\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 10;\n overflow: hidden;\n background: #ececec;\n}\n\n.product-desc-popup-image {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.product-desc-popup-no-image {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: #777;\n font-size: 52px;\n}\n\n.product-desc-popup-close {\n position: absolute;\n top: 13px;\n right: 13px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 43px;\n height: 43px;\n padding: 0;\n border: 1px solid rgba(255, 255, 255, 0.45);\n border-radius: 50%;\n background: rgba(0, 0, 0, 0.7);\n color: #fff;\n font-size: 25px;\n line-height: 1;\n cursor: pointer;\n}\n\n.product-desc-popup-content {\n padding: 20px;\n}\n\n.product-desc-popup-label {\n display: inline-flex;\n margin-bottom: 10px;\n padding: 5px 9px;\n border-radius: 999px;\n background: #f3ead5;\n color: #75520d;\n font-size: 11px;\n font-weight: 800;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n\n.product-desc-popup-title {\n margin: 0;\n color: #171717;\n font-size: clamp(22px, 6vw, 30px);\n font-weight: 800;\n line-height: 1.45;\n}\n\n.product-desc-popup-prices {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 13px;\n}\n\n.product-desc-popup-price {\n display: inline-flex;\n padding: 7px 11px;\n border-radius: 999px;\n background: #171717;\n color: #fff;\n font-size: 14px;\n font-weight: 800;\n}\n\n.product-desc-popup-divider {\n width: 48px;\n height: 3px;\n margin: 18px 0;\n border-radius: 999px;\n background: #d4aa52;\n}\n\n.product-desc-popup-heading {\n margin: 0 0 8px;\n color: #222;\n font-size: 15px;\n font-weight: 800;\n}\n\n.product-desc-popup-text {\n margin: 0;\n color: #5f5f5f;\n font-size: 15px;\n line-height: 1.75;\n overflow-wrap: anywhere;\n}\n\n.product-desc-popup-text.is-empty {\n color: #999;\n font-style: italic;\n}\n\n.product-desc-popup-done {\n display: block;\n width: 100%;\n margin-top: 22px;\n padding: 13px 18px;\n border: 0;\n border-radius: 11px;\n background: #171717;\n color: #fff;\n font-weight: 800;\n cursor: pointer;\n}\n\n@media (min-width: 680px) {\n .product-desc-popup {\n align-items: center;\n padding: 24px;\n }\n\n .product-desc-popup-box {\n border-radius: 24px;\n }\n}\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"wrap\">\n\n <div class=\"menu-top\">\n\n <img decoding=\"async\"\n src=\"https:\/\/mm2.ezyqrmenu.com\/proburgerandcoffee\/wp-content\/uploads\/sites\/85\/2026\/01\/logonobg.png\"\n class=\"menu-logo\"\n alt=\"logo\"\n >\n\n <h1 class=\"menu-title\">\n PRO Burger & Coffee\n <\/h1>\n\n <\/div>\n\n <div\n class=\"cats\"\n id=\"menuCategories\"\n ><\/div>\n\n<\/div>\n\n\n<div\n class=\"modal\"\n id=\"menuModal\"\n aria-hidden=\"true\"\n>\n\n <div class=\"modal-sheet\">\n\n <div class=\"modal-header\">\n\n <div>\n <strong id=\"modalCatName\"><\/strong>\n <br>\n <span id=\"modalCatSub\"><\/span>\n <\/div>\n\n <button\n type=\"button\"\n id=\"closeModal\"\n >\n \u2715\n <\/button>\n\n <\/div>\n\n <div class=\"modal-body\">\n\n <div\n class=\"items\"\n id=\"itemsContainer\"\n ><\/div>\n\n <\/div>\n\n <\/div>\n\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\n const modal =\n document.getElementById(\"menuModal\");\n\n const itemsContainer =\n document.getElementById(\"itemsContainer\");\n\n const catsWrap =\n document.getElementById(\"menuCategories\");\n\n const closeBtn =\n document.getElementById(\"closeModal\");\n\n const modalCatName =\n document.getElementById(\"modalCatName\");\n\n const modalCatSub =\n document.getElementById(\"modalCatSub\");\n\n if (\n !modal ||\n !itemsContainer ||\n !catsWrap\n ) {\n return;\n }\n\n const MENU_DATA =\n window.MENU_DATA || {};\n\n let activeCategory = null;\n\n \/* =====================================================\n TEXT FUNCTIONS\n ===================================================== *\/\n\n function escapeHTML(value) {\n\n return String(value ?? \"\").replace(\n \/[&<>\"']\/g,\n character => ({\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n '\"': \""\",\n \"'\": \"'\"\n })[character]\n );\n }\n\n function formatText(value) {\n\n return escapeHTML(value || \"\")\n .replace(\/\\[br\\]\/gi, \"<br>\")\n .replace(\/\\r\\n|\\r|\\n\/g, \"<br>\");\n }\n\n function plainText(value) {\n\n return String(value || \"\")\n .replace(\/\\[br\\]\/gi, \" \")\n .replace(\/\\s+\/g, \" \")\n .trim();\n }\n\n function getPrices(product) {\n\n if (Array.isArray(product?.prices)) {\n return product.prices;\n }\n\n if (\n product?.price !== undefined &&\n product?.price !== null &&\n product?.price !== \"\"\n ) {\n return [product.price];\n }\n\n return [];\n }\n\n \/* =====================================================\n RENDER MAIN CATEGORIES\n ===================================================== *\/\n\n catsWrap.innerHTML =\n Object.entries(MENU_DATA)\n .map(([key, cat]) => `\n\n <button\n type=\"button\"\n class=\"cat-card\"\n data-category=\"${escapeHTML(key)}\"\n >\n\n ${\n cat.img\n ? `\n <img decoding=\"async\"\n src=\"${escapeHTML(cat.img)}\"\n loading=\"lazy\"\n alt=\"${escapeHTML(\n plainText(cat.title || key)\n )}\"\n >\n `\n : \"\"\n }\n\n <strong>\n ${formatText(cat.title || key)}\n <\/strong>\n\n <\/button>\n\n `)\n .join(\"\");\n\n \/* =====================================================\n CLOSE DESCRIPTION POPUP\n ===================================================== *\/\n\n function closeDescriptionPopup() {\n\n const popup =\n document.getElementById(\n \"productDescriptionPopup\"\n );\n\n if (popup) {\n popup.remove();\n }\n }\n\n \/* =====================================================\n CLOSE ADD-ON POPUP\n ===================================================== *\/\n\n function closeAddonPopup() {\n\n const popup =\n document.getElementById(\"addonPopup\");\n\n if (popup) {\n popup.remove();\n }\n }\n\n \/* =====================================================\n CLOSE PRODUCT CATEGORY MODAL\n ===================================================== *\/\n\n function closeProductModal() {\n\n closeDescriptionPopup();\n closeAddonPopup();\n\n modal.classList.remove(\"is-open\");\n\n modal.setAttribute(\n \"aria-hidden\",\n \"true\"\n );\n\n document.body.classList.remove(\n \"modal-open\"\n );\n\n activeCategory = null;\n }\n\n closeBtn?.addEventListener(\n \"click\",\n closeProductModal\n );\n\n modal.addEventListener(\n \"click\",\n event => {\n\n if (event.target === modal) {\n closeProductModal();\n }\n }\n );\n\n \/* =====================================================\n ESCAPE KEY\n ===================================================== *\/\n\n window.addEventListener(\n \"keydown\",\n event => {\n\n if (event.key !== \"Escape\") {\n return;\n }\n\n const descriptionPopup =\n document.getElementById(\n \"productDescriptionPopup\"\n );\n\n if (descriptionPopup) {\n descriptionPopup.remove();\n return;\n }\n\n const addonPopup =\n document.getElementById(\n \"addonPopup\"\n );\n\n if (addonPopup) {\n addonPopup.remove();\n return;\n }\n\n if (\n modal.classList.contains(\n \"is-open\"\n )\n ) {\n closeProductModal();\n }\n }\n );\n\n \/* =====================================================\n OPEN CATEGORY MODAL\n ===================================================== *\/\n\n catsWrap.addEventListener(\n \"click\",\n event => {\n\n const card =\n event.target.closest(\".cat-card\");\n\n if (!card) {\n return;\n }\n\n const key =\n card.dataset.category;\n\n const cat =\n MENU_DATA[key];\n\n if (!cat) {\n return;\n }\n\n activeCategory = cat;\n\n modal.classList.add(\"is-open\");\n\n modal.setAttribute(\n \"aria-hidden\",\n \"false\"\n );\n\n document.body.classList.add(\n \"modal-open\"\n );\n\n modalCatName.innerHTML =\n formatText(cat.title || \"\");\n\n modalCatSub.innerHTML =\n formatText(cat.sub || \"\");\n\n const subCats =\n cat.children ||\n cat.subcategories ||\n {};\n\n const products =\n Array.isArray(cat.items)\n ? cat.items\n : [];\n\n itemsContainer.innerHTML = `\n\n ${products.map((product, index) => {\n\n const prices =\n getPrices(product);\n\n return `\n\n <div class=\"item\">\n\n \n <img decoding=\"async\"\n class=\"product-image-click\"\n data-product-index=\"${index}\"\n src=\"${escapeHTML(\n product.img || \"\"\n )}\"\n loading=\"lazy\"\n alt=\"${escapeHTML(\n plainText(\n product.name || \"\"\n )\n )}\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"View ${escapeHTML(\n plainText(\n product.name || \"product\"\n )\n )} description\"\n >\n\n <div class=\"item-info\">\n\n <p class=\"item-name\">\n ${formatText(\n product.name || \"\"\n )}\n <\/p>\n\n ${\n product.desc\n ? `\n <div class=\"item-desc\">\n ${formatText(\n product.desc\n )}\n <\/div>\n `\n : \"\"\n }\n\n <div class=\"item-meta\">\n\n ${prices.map(price => `\n <div class=\"price\">\n ${escapeHTML(price)}\n <\/div>\n `).join(\"\")}\n\n <\/div>\n\n ${\n Array.isArray(\n product.addons\n ) &&\n product.addons.length\n ? `\n <button\n type=\"button\"\n class=\"addon-open-btn\"\n data-item-index=\"${index}\"\n >\n Choose Add-ons\n <\/button>\n `\n : \"\"\n }\n\n <\/div>\n\n <\/div>\n\n `;\n }).join(\"\")}\n\n ${\n Object.values(subCats).length\n ? Object.values(subCats)\n .map(sub => `\n\n <div class=\"addon-wrap\">\n\n <h4 class=\"addon-title\">\n ${formatText(\n sub.title ||\n sub.name ||\n sub.label ||\n \"Add-On Menu\"\n )}\n <\/h4>\n\n ${\n (sub.items || [])\n .map(item => {\n\n const addonPrices =\n getPrices(item);\n\n return `\n\n <div class=\"addon-item\">\n\n <span class=\"addon-name\">\n ${formatText(\n item.name || \"\"\n )}\n <\/span>\n\n ${\n addonPrices.length\n ? `\n <span class=\"addon-price\">\n ${addonPrices\n .map(escapeHTML)\n .join(\" \/ \")}\n <\/span>\n `\n : \"\"\n }\n\n <\/div>\n\n `;\n })\n .join(\"\")\n }\n\n <\/div>\n\n `)\n .join(\"\")\n : \"\"\n }\n\n `;\n }\n );\n\n \/* =====================================================\n PRODUCT IMAGE CLICK EVENT\n ===================================================== *\/\n\n itemsContainer.addEventListener(\n \"click\",\n event => {\n\n const productImage =\n event.target.closest(\n \".product-image-click\"\n );\n\n if (\n !productImage ||\n !activeCategory\n ) {\n return;\n }\n\n const productIndex =\n Number(\n productImage.dataset\n .productIndex\n );\n\n const product =\n activeCategory.items?.[\n productIndex\n ];\n\n if (product) {\n openProductDescriptionPopup(\n product\n );\n }\n }\n );\n\n \/*\n * Keyboard support:\n * Enter or Space opens the image popup.\n *\/\n itemsContainer.addEventListener(\n \"keydown\",\n event => {\n\n if (\n event.key !== \"Enter\" &&\n event.key !== \" \"\n ) {\n return;\n }\n\n const productImage =\n event.target.closest(\n \".product-image-click\"\n );\n\n if (\n !productImage ||\n !activeCategory\n ) {\n return;\n }\n\n event.preventDefault();\n\n const productIndex =\n Number(\n productImage.dataset\n .productIndex\n );\n\n const product =\n activeCategory.items?.[\n productIndex\n ];\n\n if (product) {\n openProductDescriptionPopup(\n product\n );\n }\n }\n );\n\n \/* =====================================================\n ADD-ON BUTTON CLICK\n ===================================================== *\/\n\n itemsContainer.addEventListener(\n \"click\",\n event => {\n\n const button =\n event.target.closest(\n \".addon-open-btn\"\n );\n\n if (\n !button ||\n !activeCategory\n ) {\n return;\n }\n\n event.stopPropagation();\n\n const itemIndex =\n Number(\n button.dataset.itemIndex\n );\n\n const product =\n activeCategory.items?.[\n itemIndex\n ];\n\n if (\n !product ||\n !Array.isArray(\n product.addons\n )\n ) {\n return;\n }\n\n openAddonPopup(product);\n }\n );\n\n \/* =====================================================\n PRODUCT DESCRIPTION POPUP\n ===================================================== *\/\n\n function openProductDescriptionPopup(\n product\n ) {\n\n closeDescriptionPopup();\n closeAddonPopup();\n\n const prices =\n getPrices(product);\n\n const popup =\n document.createElement(\"div\");\n\n popup.id =\n \"productDescriptionPopup\";\n\n popup.className =\n \"product-desc-popup\";\n\n popup.setAttribute(\n \"role\",\n \"dialog\"\n );\n\n popup.setAttribute(\n \"aria-modal\",\n \"true\"\n );\n\n popup.setAttribute(\n \"aria-label\",\n plainText(\n product.name ||\n \"Product description\"\n )\n );\n\n popup.innerHTML = `\n\n <div class=\"product-desc-popup-box\">\n\n <div class=\"product-desc-popup-image-wrap\">\n\n ${\n product.img\n ? `\n <img decoding=\"async\"\n class=\"product-desc-popup-image\"\n src=\"${escapeHTML(\n product.img\n )}\"\n alt=\"${escapeHTML(\n plainText(\n product.name || \"\"\n )\n )}\"\n >\n `\n : `\n <div class=\"product-desc-popup-no-image\">\n \ud83c\udf7d\n <\/div>\n `\n }\n\n <button\n type=\"button\"\n class=\"product-desc-popup-close\"\n aria-label=\"Close description\"\n >\n \u00d7\n <\/button>\n\n <\/div>\n\n <div class=\"product-desc-popup-content\">\n\n <span class=\"product-desc-popup-label\">\n Menu Item\n <\/span>\n\n <h2 class=\"product-desc-popup-title\">\n ${formatText(\n product.name ||\n \"Menu Item\"\n )}\n <\/h2>\n\n ${\n prices.length\n ? `\n <div class=\"product-desc-popup-prices\">\n\n ${prices.map(price => `\n <span class=\"product-desc-popup-price\">\n ${escapeHTML(price)}\n <\/span>\n `).join(\"\")}\n\n <\/div>\n `\n : \"\"\n }\n\n <div class=\"product-desc-popup-divider\"><\/div>\n\n <h3 class=\"product-desc-popup-heading\">\n Description\n <\/h3>\n\n ${\n product.desc\n ? `\n <p class=\"product-desc-popup-text\">\n ${formatText(\n product.desc\n )}\n <\/p>\n `\n : `\n <p class=\"product-desc-popup-text is-empty\">\n No description is available for this product.\n <\/p>\n `\n }\n\n <button\n type=\"button\"\n class=\"product-desc-popup-done\"\n >\n Close\n <\/button>\n\n <\/div>\n\n <\/div>\n\n `;\n\n document.body.appendChild(\n popup\n );\n\n const closeButton =\n popup.querySelector(\n \".product-desc-popup-close\"\n );\n\n const doneButton =\n popup.querySelector(\n \".product-desc-popup-done\"\n );\n\n closeButton?.addEventListener(\n \"click\",\n closeDescriptionPopup\n );\n\n doneButton?.addEventListener(\n \"click\",\n closeDescriptionPopup\n );\n\n popup.addEventListener(\n \"click\",\n event => {\n\n if (event.target === popup) {\n closeDescriptionPopup();\n }\n }\n );\n\n closeButton?.focus();\n }\n\n \/* =====================================================\n ADD-ON POPUP\n ===================================================== *\/\n\n function openAddonPopup(product) {\n\n closeAddonPopup();\n closeDescriptionPopup();\n\n const popup =\n document.createElement(\"div\");\n\n popup.id =\n \"addonPopup\";\n\n popup.className =\n \"addon-popup-overlay\";\n\n popup.innerHTML = `\n\n <div class=\"addon-popup-box\">\n\n <div class=\"addon-popup-head\">\n\n <strong>\n ${formatText(\n product.name ||\n \"Add-ons\"\n )}\n <\/strong>\n\n <button\n type=\"button\"\n class=\"addon-popup-close\"\n >\n \u00d7\n <\/button>\n\n <\/div>\n\n <div class=\"addon-popup-body\">\n\n ${(product.addons || [])\n .map((group, groupIndex) => `\n\n <div class=\"addon-group\">\n\n <h4>\n ${formatText(\n group.title ||\n \"Choose Option\"\n )}\n <\/h4>\n\n ${(group.options || [])\n .map(option => {\n\n const label =\n typeof option ===\n \"string\"\n ? option\n : option.name || \"\";\n\n const price =\n typeof option ===\n \"object\" &&\n option.price\n ? ` - ${option.price}`\n : \"\";\n\n return `\n\n <label class=\"addon-option\">\n\n <input\n type=\"${\n group.type ||\n \"checkbox\"\n }\"\n name=\"${\n escapeHTML(\n group.key ||\n `addon_group_${groupIndex}`\n )\n }\"\n value=\"${\n escapeHTML(label)\n }\"\n >\n\n <span>\n ${formatText(label)}\n ${escapeHTML(price)}\n <\/span>\n\n <\/label>\n\n `;\n })\n .join(\"\")}\n\n <\/div>\n\n `)\n .join(\"\")}\n\n <\/div>\n\n <div class=\"addon-popup-footer\">\n\n <button\n type=\"button\"\n class=\"addon-done-btn\"\n >\n Done\n <\/button>\n\n <\/div>\n\n <\/div>\n\n `;\n\n document.body.appendChild(\n popup\n );\n\n popup\n .querySelector(\n \".addon-popup-close\"\n )\n ?.addEventListener(\n \"click\",\n closeAddonPopup\n );\n\n popup\n .querySelector(\n \".addon-done-btn\"\n )\n ?.addEventListener(\n \"click\",\n closeAddonPopup\n );\n\n popup.addEventListener(\n \"click\",\n event => {\n\n if (event.target === popup) {\n closeAddonPopup();\n }\n }\n );\n }\n\n});\n<\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Restaurant Menu PRO Burger & Coffee \u2715<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-69","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages\/69","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":216,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages\/69\/revisions"}],"predecessor-version":[{"id":2448,"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/pages\/69\/revisions\/2448"}],"wp:attachment":[{"href":"https:\/\/mm2.ezyqrmenu.com\/sun\/wp-json\/wp\/v2\/media?parent=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}