Skip to main content
Uno schermo a parete per il pass, il bar o il bancone che mostra gli ordini aperti come card e li fa avanzare mentre il loro stato cambia in storekit. Codici ordine grandi, elenchi di articoli, un timer che diventa rosso quando un ordine ha atteso troppo, e la scelta di cosa mostrare è tua. Nessuno lo tocca: segue la dashboard.
storekit ha un Kitchen Display integrato con cui la cucina può bumpare le comande. Costruisci questa recipe quando vuoi uno schermo in sola lettura con un layout diverso — un board “pronti” rivolto al cliente, una vista bancone che mostri solo i ritiri, o uno schermo bar che mostri solo le bevande.

Come funziona

  1. storekit invia gli eventi del ciclo di vita dell’ordine alla tua app: order.created.v2 porta l’ordine completo; order.preparing, order.ready_for_pickup, order.out_for_delivery, order.completed e order.canceled portano solo id, codice e nuovo stato.
  2. La tua app mantiene una card per ordine e ne aggiorna la colonna a ogni evento.
  3. Una pagina del browser si aggiorna ogni pochi secondi e mostra le card in colonne.

Cosa ti serve

  • I webhook abilitati sul tuo piano storekit (Settings → Developers).
  • Un account Lovable o v0. Entrambi hanno bisogno di un backend per l’endpoint webhook e di un piccolo database — il prompt chiede al builder di deployarlo e darti l’URL. Anche Replit funziona.
  • Uno schermo con un browser (una TV con una stick economica, un vecchio iPad o un laptop).

Step 1: costruisci l’app

Incolla nel builder l’intero blocco in un unico messaggio. Se vuoi una variante rivolta al cliente o dedicata alle bevande, modifica prima MY BOARD.

Either button opens the builder with the whole prompt below already filled in. Nothing starts until you press send, so read it through and edit the parts marked as yours first.

Step 2: collega storekit

1

Open the webhooks portal

In the dashboard sidebar, go to Settings → Webhooks. If your plan includes webhooks and they are not yet enabled, click Enable Webhooks. If the page shows Upgrade to enable webhooks, contact support to discuss adding webhooks to your plan.
2

Add your app as an endpoint

In the embedded portal, add a new endpoint, paste the webhook URL your app builder gave you, and tick only the event types the recipe needs.
3

Copy the signing secret into your app

Open the endpoint you just created and copy its signing secret. In your app builder, save it as the environment variable STOREKIT_WEBHOOK_SECRET (builders call this “secrets” or “environment variables”). Redeploy if the builder asks you to.
4

Send a test event

Use the portal’s test option on the endpoint to send a sample event. The delivery log shows the response code from your app. A 2xx means your app accepted it; anything else, read the response body in the log — it is usually a missing secret.
Spunta order.created.v2, order.preparing, order.ready_for_pickup, order.out_for_delivery, order.completed e order.canceled per questo endpoint.

Step 3: prova con un ordine reale

Apri l’URL del board (con il suo token) sullo schermo, poi effettua un ordine sul tuo storefront. La card appare in New; fai avanzare l’ordine attraverso i suoi stati nella dashboard (vedi Gestire gli ordini live) e osserva la card seguirlo. Cancella un ordine di prova per vederla scomparire. L’accettazione di un ordine non invia un webhook, quindi la card resta in New finché la cucina non lo segna come preparing o ready.

Idee

  • Suoni: un chime quando una card entra in New, uno diverso quando entra in Ready.
  • Board per postazione: tagga gli articoli per categoria (il builder può fare match sul nome dell’articolo o su plu) e mostra un board per postazione, come fa la comanda cucina personalizzata su carta.
  • Alert per ordini in ritardo: quando una card diventa rossa, invia un messaggio su Slack usando il pattern di Alert ordini.

Cosa non fa

  • Non può modificare un ordine. Il board è in sola lettura; accettare, segnare come ready e completare avvengono ancora nella dashboard o sulla cassa, che è a cosa serve il Kitchen Display integrato.
  • Sa solo ciò che dicono gli eventi. Non esiste un evento order.accepted, quindi una card resta in New finché la cucina non la segna come preparing o ready. Neanche un ordine rifiutato invia un evento; semplicemente non si muove. Se una card non si muove, controlla il registro di consegna webhook nel portale per vedere cosa è stato inviato.
  • L’URL è la chiave. Chiunque abbia l’URL completo del board può vedere codici ordine live, nomi di battesimo e articoli, quindi trattalo come una password: non condividerlo fuori dal team e cambia BOARD_TOKEN se uno schermo viene perso.
  • Parte vuoto. Gli ordini effettuati prima che l’endpoint venisse collegato non appariranno.
  • È il tuo servizio. Il supporto di storekit può confermare che gli eventi hanno raggiunto il tuo URL e il codice di risposta; il board è tuo.

Correlati

Eventi ordine

Ogni evento del ciclo di vita dell’ordine e il suo payload.

Kitchen Display

Lo schermo cucina bumpable integrato in storekit.

Stati degli ordini

Cosa significa ogni stato e come gli ordini si spostano tra di essi.

Scrivere un prompt che funziona

La struttura dietro questo prompt e cosa dire quando il builder sbaglia.