Menu 菜單模組：餐飲商家的數位菜單，QR 掃一下就看到

TL;DR

• Menu 是餐飲商家專用的菜單展示區塊，DB-driven 從後台「菜單分類 + 菜單項目」讀取。
• 支援分類展示（例如「咖啡」、「茶」、「輕食」）和項目圖片。
• 實體店家常見用法：印 QR code 放桌邊 / 門口，客人掃到菜單頁面直接看。
• showImages 關掉可變純文字菜單，適合菜單項目多、不想被圖片拖慢載入速度的場景。

---

Menu 模組解決的場景

餐飲店家對「菜單」有三種實際需求：

1. 網站上的線上菜單：客人訪問官網，想看你賣什麼、價格多少。
2. 桌邊 QR code 菜單：疫情後很多店家改用 QR 點餐，AHHA 的 Menu 頁可以直接給 QR 指過來。
3. 菜單更新頻率高：季節性品項、漲價、下架——紙本菜單改一次要重印，線上改兩秒。

Menu 模組不是做點餐系統（不串金流、不收訂單），純粹解決「把菜單放在線上、容易更新」這件事。

---

設定流程

1. 後台 → 菜單管理 → 分類：建立菜單分類（例：咖啡、茶飲、甜點、輕食）。
2. 後台 → 菜單管理 → 項目：在分類下建立項目（名稱、描述、價格、圖片）。
3. 頁面管理 → 新增頁面（例如 menu）→ 加入 Menu block：設定標題、副標、是否顯示圖片。
4. 產生 QR code：把菜單頁網址轉成 QR，印出來擺桌邊即可。

---

編輯器欄位

• 標題（heading）：例如「本日菜單」、「Menu」。選填。
• 副標（subheading）：補充說明，例如「供應至 17:00 / 內用加一成」。選填。
• 顯示圖片（showImages）：預設 true。關閉後整份菜單變純文字版。

菜單資料（分類、項目、圖片、價格）不在 block 內，要去後台菜單管理。

---

什麼時候關掉 showImages

• 項目太多：50+ 品項每個都放圖，手機載入會很慢。
• 圖片無法統一風格：有些有照片有些沒有，視覺亂跳反而扣分。
• 刻意走文字感：高單價店家有時偏好純文字菜單，比較有質感。

要全關就在 block 設定關掉；想逐項控制（只有部分顯示圖片），就在後台菜單項目頁留空圖片欄位，有圖的就顯示、沒圖的自動跳過。

---

搭配建議

Menu 頁常搭的組合：

Hero（簡潔標題 + 店名）→ Announcement（本日特別品 / 供應時間）→ Menu → Contact（地址 + 營業時間 + 地圖）

如果網站首頁不是菜單頁，建議單獨開一個 /menu 頁只放 Menu block，QR code 直接指這個頁面，載入最快。

---

三個常見錯誤

1. 分類太細：10 種咖啡豆分成 10 個分類。其實一個「咖啡」分類 + 品項描述就夠，分類太多客人要滑很久。
2. 圖片大小不一致：有的 4000px、有的 500px，排版會跳。統一壓到 800-1200px、正方形比例最穩。
3. 菜單改了忘記清快取：Menu 頁也走 KV 快取（1 小時 TTL），如果急著上新品項，去後台存一次頁面就會觸發快取更新。

---

寫在最後

Menu 模組設計時刻意保持簡單——不做點餐、不做訂位、不做外送串接。這些功能已經有其他工具（LINE 美食外送、inline 訂位）在做，AHHA 專注在「線上菜單本身要好改、好看、載入快」。

登入 AHHA 後台 → 菜單管理建立分類與項目 → 頁面管理加入 Menu block → 把頁面網址做成 QR 放桌邊。