Skip to main content

Configurazione Layout Cassa

Il Layout Engine della cassa gestisce la disposizione di tutti gli elementi sullo schermo POS: tasti prodotto, scorciatoie funzionali, carrello e barra comandi. La configurazione avviene tramite l'editor WYSIWYG integrato nell'applicazione cassa.

Struttura dello Schermo​

Lo schermo cassa si basa su un albero di nodi (ScreenNode) che definisce la suddivisione in zone. Ogni nodo puo essere di tipo row (divisione orizzontale), column (divisione verticale) o zone (area funzionale).

Le zone principali predefinite sono:

Zone IDFunzione
productsGriglia tasti prodotto, con paginazione
cart_list_placeholderCarrello ordine corrente
system_infoBarra comandi (CommandBar)

Ogni zona ha un parametro flex che ne determina la proporzione rispetto alle zone sorelle. Ad esempio, una zona prodotti con flex: 3 accanto a un carrello con flex: 1 occupera il 75% dello spazio orizzontale.

Editor WYSIWYG​

Per accedere all'editor, dalla schermata cassa selezionare l'icona ingranaggio nella barra superiore. L'editor si apre con:

  1. Area Canvas: anteprima in tempo reale del layout in formato 16:9
  2. Pannello Proprieta: a destra, mostra e modifica le proprieta del tasto selezionato
  3. Barra strumenti: simulazione stati (idle, selling, refund, payment), gestione permessi, sincronizzazione prodotti

Procedura di modifica​

  1. Aprire l'editor dal menu impostazioni della cassa
  2. Cliccare su un tasto per selezionarlo e aprire il pannello proprieta
  3. Modificare titolo, colore (aspect), azione e posizione (riga/colonna)
  4. Utilizzare il selettore pagina in basso per navigare tra le pagine della zona
  5. Premere Salva per salvare localmente e sincronizzare con il server

Zone e Griglie​

Ogni zona (LayoutGroup) e definita da una griglia con numero di colonne e righe. I tasti vengono posizionati specificando row e col (1-based) e possono occupare piu celle tramite rowSpan e colSpan.

{
  "zona": "products",
  "columns": 6,
  "rows": 5,
  "tasti": [
    {
      "row": 1, "col": 1,
      "title": "Margherita",
      "aspect": "accent",
      "page": 1,
      "action": { "type": "CART_ADD", "payload": { "sku": "PIZZA-MARG" } }
    }
  ]
}

Paginazione​

I tasti possono appartenere a una o piu pagine. Un tasto con page: [1, 3] sara visibile nelle pagine 1 e 3. I tasti con pagina 0 o lista vuota sono sempre visibili.

Ogni pagina puo essere configurata separatamente tramite PageSettings:

  • comandaName: nome visualizzato in modalita comanda tavoli
  • takeawayName: nome per la modalita asporto
  • visibleOnPos / visibleOnComanda / visibleOnTakeaway: flag di visibilita per canale
  • iconName e colorHex: personalizzazione visiva del tab pagina

Aspetto e Colori dei Tasti​

Il campo aspect del tasto determina il suo stile visivo. I valori disponibili sono:

AspectColoreUso tipico
neutralGrigio scuroTastierino numerico
primaryBlu elettricoCategorie, navigazione
accentBianco ghiaccioTasti prodotto
confirmVerde smeraldoConferma, pagamento
dangerRossoStorno, annullamento
warningArancioneFunzioni speciali

Si possono combinare con modificatori di dimensione: accent big per testi grandi, neutral small per testi ridotti.

Immagini sui Tasti Prodotto​

La sezione productImageSettings nel layout controlla la visualizzazione delle immagini:

  • enabled: attiva/disattiva le immagini su tutti i tasti
  • displayMode: background (sfondo), icon (icona piccola) o thumbnail (miniatura centrata)
  • backgroundOpacity: opacita dello sfondo (0.0 - 1.0, default 0.3)
  • variant: variante immagine da scaricare (thumb o tablet)

Ogni tasto puo avere un'immagine automatica dal prodotto collegato (productMediaId) oppure un'immagine custom assegnata manualmente (customMediaId). L'immagine custom ha sempre priorita.

Azioni Disponibili​

Ogni tasto esegue un'azione quando premuto. Le principali azioni configurabili sono:

  • CART_ADD: aggiunge prodotto al carrello (payload: sku)
  • UI_OPEN_PAYMENT: apre la schermata pagamento
  • CART_DISCOUNT: applica sconto (payload: type, value)
  • PRODOTTI_PAGINA: cambia pagina della zona prodotti
  • SYS_LAUNCH_MODULE: apre un modulo (tavoli, asporto, magazzino)
  • UI_OPEN_MODAL: apre una modale (cliente, note, sconti, buoni pasto)

La pressione lunga su un tasto CART_ADD forza l'apertura del pannello varianti, indipendentemente dalla configurazione del prodotto.

Visibilita e Permessi​

I tasti supportano regole di visibilita basate sullo stato del sistema e sui permessi dell'operatore:

  • visibleInStates: lista di stati in cui il tasto e visibile (es. ['idle', 'selling'])
  • hiddenInStates: lista di stati in cui il tasto e nascosto (es. ['refund'])
  • requiredPermission: permesso richiesto (es. can_void_item, can_discount)
  • requiresSupervisor: se true, mostra un lucchetto e richiede autenticazione supervisore

FAQ​

Come posso aggiungere una nuova pagina di prodotti? Nell'editor, nella zona prodotti, cliccare il pulsante + nella barra di navigazione pagina in basso. La nuova pagina viene creata automaticamente.

Come sincronizzo i prodotti dal catalogo al layout? Cliccare l'icona di sincronizzazione nella barra strumenti dell'editor. Il dialog permette di selezionare le categorie e genera automaticamente i tasti CART_ADD nella zona products.

Il layout si sincronizza tra piu casse? Si. Al salvataggio, il layout viene memorizzato localmente (Isar) e sincronizzato con il server. Le altre casse riceveranno l'aggiornamento alla prossima sincronizzazione.

Vedi Anche​

Questa pagina ti è stata utile?