Menu ng Customer

Ang customer menu ay ang public-facing na web page sa handy.cafe/{your-slug}. Ina-access ito ng customer sa pamamagitan ng pag-scan sa QR code sa kanilang mesa. Ipinapaliwanag ng page na ito ang buong customer flow para maipaliwanag mo ito sa staff at maplano ang rollout.

Istruktura ng URL

Bawat mesa ay may natatanging URL na nasa anyong handy.cafe/{cafe-slug}/{table-code}. Ang QR code ay nag-eencode ng URL na ito kasama ang maiksing buhay na token na nagpapatunay na authentic ang sticker. Kapag na-scan ng customer ang QR:

1. Bubuksan ng kanilang phone ang URL sa default browser.
2. Ire-resolve ng page ang slug at table code laban sa cloud API.
3. Kung ang mesa ay out_of_order, magpapakita ang page ng unavailable notice.
4. Kung ang mesa ay idle, ipapaliwanag ng page na hindi pa naa-seat ng staff ang customer at hihilinging tumawag sila ng tulong.
5. Kung ang mesa ay in_use, hihingan ng page ang customer ng 6-digit na security code.

Pag-verify ng Security Code

Tinitiyak ng security code na ang customer na kasalukuyang nakaupo sa mesa lamang ang makakapaglagay ng order. Pinipigilan nito ang sinumang nakakita ng QR mula sa larawan o mula sa labas ng cafe na maglagay ng pekeng order.

Pagkatapos ilagay ng customer ang code:

1. Bine-validate ng API ang code laban sa hashed value na naka-store sa mesa.
2. Kapag valid, gagawa ng session at magbabalik ng token.
3. I-store ang token sa cookie (hc_menu_session). Naka-save din ang Bearer token fallback sa local storage ng device. Kailangan ito sa iPhone Safari, na maaaring mag-block ng third-party cookies sa ilang configuration.
4. Ire-redirect ang customer sa menu.

Valid ang session sa loob ng 24 oras mula sa pagkaka-issue. Kapag isinara ng customer ang browser at bumalik gamit ang parehong device, gumagana pa rin ang session at maaari silang muling pumasok nang hindi na muling nag-verify.

Mga Wika

Sinusuportahan ng menu ang 24 na wika: Arabic, German, Greek, English, Spanish, Farsi, French, Hindi, Indonesian, Italian, Japanese, Korean, Malay, Polish, Portuguese, Romanian, Russian, Thai, Tagalog, Turkish, Ukrainian, Urdu, Vietnamese, at Chinese.

Sa unang pagbisita, sinusuri ng page ang Accept-Language header mula sa browser at pinipili ang pinakamalapit na tugma. Maaaring baguhin ng customer ang wika anumang oras gamit ang picker sa itaas ng menu. Naaalala ang napiling wika para sa session.

Hindi awtomatikong isinasalin ang pangalan ng product, description, at ingredients; ipinapakita ang mga ito sa wikang inilagay mo sa menu editor. Ang mga UI label tulad ng "Add to Cart", "Checkout", at mga mensahe sa payment flow ay ganap na localized.

Theme

Sinusuportahan ng menu ang light theme at dark theme. Device-aware ang default: kung naka-dark mode ang operating system ng customer, magbubukas ang menu sa dark mode. May theme toggle sa itaas para makapagpalit ang customer.

Branded Header

Ipinapakita ng header sa itaas ng menu ang:

I-customize ang mga field na ito para sa mas magandang impresyon sa customer. Mas madaling makilala ng customer ang brand kapag kahawig ng menu ang pisikal na signage ng venue mo.

Pag-browse ng Menu

Naka-grupo ang menu ayon sa category. Sa loob ng category, ipinapakita ang mga product na may thumbnail, pangalan, maikling description, at presyo.

Kapag tinap ang isang product, bubukas ang product sheet. Ipinapakita nito ang:

• Buong larawan.
• Markdown na description.
• Ingredients line.
• Preparation time chip (kapag naka-enable lang ang Show Prep Time on Menu).
• Unit label kung naka-configure (halimbawa "250 ml").
• Variant selectors para sa anumang variant group na naka-attach sa product.
• Quantity stepper.
• Add to Cart button.

Hinaharang ng required variant groups ang Add to Cart button hanggang pumili ang customer ng option.

Cart

Nasa permanenteng lokasyon ang cart icon para ma-access ito ng customer mula sa anumang screen. Nananatili ang laman ng cart habang nagna-navigate sa site; hindi nawawala ang mga item kapag bumalik mula cart patungong menu at pabalik.

Pinapayagan ng cart ang customer na:

• Baguhin ang quantity bawat linya.
• Alisin ang isang linya.
• Magdagdag ng opsyonal na note.
• Magbigay ng phone number (opsyonal).

Ipinapakita sa real time ang subtotal, VAT, at total.

Paglagay ng Order

Ang Checkout step ay nag-aalok ng isa o dalawang payment method depende sa configuration mo:

Cash

Kung naka-disable ang online payment sa settings mo, Cash lang ang nakikita. Kinukumpirma ng customer ang order at agad itong isinusumite. Magbabayad ang customer sa cashier kapag dumating ang order.

Online (Stripe Checkout)

Kung naka-enable ang online payment, lalabas ang Online bilang option. Sa pagsusumite:

1. Lilikhain ang order sa pending state.
2. Magbabalik ang Stripe Checkout client secret.
3. Bubukas ang Stripe embedded UI sa loob ng page. Ilalagay ng customer ang card details.
4. Kapag matagumpay ang authorization, kukumpirmahin ng Stripe ang charge at lilipat ang order sa paid.
5. Makikita ng customer ang success page.

Ang mga nabigong o na-abandonang payment ay nag-iiwan ng order sa pending state. Maaaring gumawa ng pangalawang attempt mula sa parehong session, o maaaring i-cancel ng staff ang order mula sa Orders dashboard.

Success Page

Pagkatapos ng matagumpay na pagsusumite, mapupunta ang customer sa receipt page na nagpapakita ng:

• Order number at oras.
• Bawat linya na may quantity, variants, at line total.
• Subtotal, VAT, at grand total.
• Payment method.
• Payment status icon (pending para sa cash; paid para sa online).
• CTA na "Place Another Order" na ibinabalik sa menu nang buo pa rin ang session.
• Link na "Back to Menu".

Order Status Polling

Pagkatapos ng pagsusumite, ang view ng customer sa order ay nagpo-poll sa status endpoint para makita ang mga update mula sa kitchen. Kung i-advance ng staff ang isang item mula preparing papuntang ready, makikita ng customer na nag-a-update ang badge sa linya sa loob ng ilang segundo.

Kapaki-pakinabang ito para sa self-service pickup sa counter. Makakapagpahinga ang customer sa mesa hanggang sabihin ng menu na ready na ang order.

Ano ang Hindi Maaaring Gawin ng Customer

• Hindi maaaring mag-browse ng menu ang customer nang walang security code. Laging kailangan ang verification step.
• Hindi maaaring maglagay ng order ang customer para sa mesa na idle o out_of_order.
• Hindi maaaring i-edit o i-cancel ng customer ang order pagkatapos itong maipasa. Aksyon ito ng staff mula sa Orders dashboard.

Mga Tip para sa Malinis na Customer Experience

• Mag-print ng QR sticker na may pangalan ng cafe at malinaw na instruksyon gaya ng "Scan to order. Ask staff for the code." Madalas kasing namimiss ng customer ang verification step kapag wala ito.
• Panatilihing maikli ang category at product name. Ang mahahabang pangalan ay bumabalot sa mobile at nagtutulak sa mga larawan pababa.
• Mag-upload ng kahit isang larawan bawat product. Mas mataas ang conversion ng image-heavy menus kaysa text-only menus.
• I-enable lang ang Show Prep Time on Menu kapag natuto na ang dynamic estimate mo. Sa unang 30 araw, maaaring masyadong mataas o mababa ang static value at napapansin iyon ng customer.
• I-test mo ang buong flow mismo mula sa phone bago buksan sa customer. I-scan ang totoong QR, ilagay ang code, maglagay ng test order, at tiyaking lumalabas ang order sa dashboard mo.