如何打造線上訂餐網站：菜單、購物車、取餐時段與廚房看板

線上訂餐網站讓客人從你的菜單中挑選餐點、客製化品項、選擇取餐或外送時間、付款，並收到確認；廚房則在螢幕上看到每筆訂單出現，完成後再標示為已完成。要打造這樣的網站，你需要一份含選項的菜單（大小、加料、「不要洋蔥」等），一個能正確計算金額的購物車，有人數上限的時段設定以免廚房被塞爆，信用卡付款，以及給員工使用的簡單訂單看板。AI 應用程式建構工具能根據清楚的描述產出這些功能。真正花功夫的是細節：營業時間、售完品項、訂單上限，以及付款成功但訂單沒有存進去時該怎麼辦。

網站需要什麼

頁面

• 客人端： 依分類瀏覽菜單、品項詳情與選項、購物車、結帳（姓名、電話、取餐或外送、時間）、付款，以及顯示訂單編號與狀態的確認頁。
• 廚房端： 即時列出新訂單、製作中與已完成的訂單，每筆都有品項、選項、備註與取餐時間。
• 店家後台： 菜單編輯器（品項、價格、照片、選項、售完設定）、營業時間、時段上限，以及銷售摘要。

資料

下單時，請把品項名稱與價格存進每筆訂單明細。之後若修改菜單，舊訂單仍應顯示客人實際付的金額。

權限

客人只能透過確認連結看到自己的訂單。廚房員工可以查看並更新訂單，但不能修改價格。店家負責編輯菜單與設定。平板常見的做法是廚房共用一組登入，但店主應該另外有自己的帳號。

決策與取捨

只取餐、只外送，還是兩者都做

小型店家最好從「只做取餐」開始，這樣簡單得多。外送會多出外送範圍、運費、最低消費、地址驗證、派單，以及更多可能出錯的環節。

立即取餐或預約時段

「越快越好」容易提供，但在忙碌的晚上很難兌現。有上限的預約時段（例如每 15 分鐘最多 8 筆訂單）能保護廚房，也能管理客人期待。你仍可以顯示「最早可取餐時間：18:45」。

先付款或取餐時再付

線上先付能減少放鴿子的情況，也能加快取餐。取餐時再付比較容易做，但比較容易出現假訂單。多數店家會透過 Stripe Checkout 這類代管結帳頁先收信用卡款項；我們的付款指南說明了設定方式。小費、稅金與收據規定依國家而異，請確認當地法規。

訂單怎麼送到廚房

選項包括：平板上自動更新的瀏覽器分頁（最簡單）、每筆訂單的 Email 或訊息作為備援，或送到收據印表機（需要額外硬體與設定）。新訂單出現時的提示音，比你想像的還重要。

一個好用的第一句提示

為 Casa Verde 打造線上點餐網站，這是德州奧斯汀的一家塔可店，只提供取餐。菜單分類：Tacos、Bowls、Sides、Drinks。品項有選項：塔可可以選肉類（雞肉、豬肩肉、香菇 +$1）、餅皮（玉米或麵粉）與選配加料（酪梨醬 +$1.50、起司 +$0.75）；Bowls 可以選底料與肉類。客人把品項加入購物車，在營業時間內（週二至週日 11:00–21:00，中部時間）選擇 15 分鐘的取餐時段，輸入姓名與電話，並看到含 8.25% 營業稅的總額。每個時段上限 8 筆訂單，額滿時隱藏該時段。訂單存入資料庫，狀態為新訂單、製作中、已完成、已取餐。廚房頁面（需登入）顯示今日訂單，依取餐時間排序，有新訂單時播放提示音，員工可以逐步推進訂單狀態。店主頁面可以編輯菜單、標示售完，並暫停接單。目前先不做線上付款，訂單先採「取餐時付款」。設計要大膽、色彩豐富、以手機為優先，按鈕要大到方便點擊。

先用取餐時付款，可以在引入付款之前，先和員工測試完整的訂餐流程。

建置步驟

1. 菜單與選項。 把菜單、選項群組與價格計算做對，並測試每種選項組合的品項。
2. 購物車與結帳。 數量、備註、總額、稅金，以及會遵守營業時間的時段選擇器。
3. 訂單儲存與確認。 在伺服器端計算總額，絕不要相信瀏覽器傳來的價格；確認頁要顯示訂單編號。
4. 廚房看板。 即時列表、新訂單提示音、狀態按鈕，以及在一公尺外也看得清楚的大字。
5. 店主控制。 售完、暫停接單、時段上限、營業時間。
6. 付款使用測試模式。只有在付款服務商確認後才把訂單標示為已付款，並處理「付款成功但訂單沒存進去」的情況。
7. 通知。 透過你自己的服務商發送 Email 或簡訊確認，以及「可以取餐了」的訊息。參見加入通知功能。
8. 小規模試營運。 與員工和朋友一起試用幾天，重點觀察廚房端，而不只是客人端。

常見錯誤

• 只在瀏覽器計算價格。 任何人都能改價格，務必在伺服器端重新計算。
• 沒有售完開關。 你會把最後一份餐賣出五次。
• 沒有時段上限。 忙碌的週五晚上會變成 40 筆訂單同時在 19:00 要取餐。
• 過敏原資訊缺漏或過期。 每個品項都要顯示過敏原並保持正確，許多國家對此有嚴格規定。
• 時區混亂。 時間以 UTC 儲存，依餐廳當地時間顯示，並在午夜與夏令時間切換前後測試。
• 廚房平板進入休眠。 讓螢幕保持喚醒，並測試新訂單是否不需重新整理就會出現。

什麼時候現成產品比較好

如果你想讓附近的新客人找到你，外送平台能帶來你自己很難創造的需求，代價是抽成。如果你已經在用銷售點系統（POS），先確認它是否內建線上點餐；訂單直接進入收銀機與廚房印表機，是很難被超越的做法。

當你希望熟客直接下單、不被抽成，或訂餐流程要配合你的經營方式（例如烘焙坊的預購、外燴餐盒、每週餐盒菜單），或要與會員積點或你自己的網站整合時，就適合自己打造。餐廳網站指南涵蓋了周邊的網站內容。

用 Mythex 打造

在 Mythex 中，你用對話描述訂餐流程，並在即時預覽中以手機尺寸檢查。當你要求儲存訂單與菜單時，代理程式會加入 Postgres 資料庫。信用卡付款使用你自己的 Stripe 帳號與金鑰，金鑰以專案祕密設定保存；Stripe 食譜提供了提示範例。簡訊與 Email 透過你自己的服務商發送，因為 Mythex 沒有內建的付款、Email 或簡訊產品。付款 webhook 需要應用程式發布到公開網址後才能運作。上線前，可以使用 /test，讓代理程式在預覽中模擬點餐，並回報哪裡出錯。

如果需要起始提示，可以試試麵包店訂購頁或咖啡訂購頁範本，或餐廳線上商店建構工具。

常見問題