Scheda di conferma ordine per schermi di digital signage

Mostra il carrello mentre il personale aggiunge articoli e illumina l’ultima voce. Dai grande risalto al totale, con subtotale, sconto, tasse e mancia, poi mostra il prompt di pagamento. Una volta che il cliente paga, mostra un ringraziamento con il numero d’ordine.

Live card

Questa scheda viene disegnata nel browser con lo stesso codice usato dai Player, con dati di esempio.

Categoria: Retail. Tag: Negozi, Ristoranti e caffè, Prezzi e tariffe.

Layout

Questa scheda a schermo intero riempie tutto lo schermo in orizzontale o verticale e non è posizionata come angolo, chip o striscia.

Layout: pieno. Moduli: orizzontale, verticale.

Layout, temi e pubblicazione delle schede. Esplora le schede.

Dati e privacy

Questa scheda usa le proprietà configurate e i dati live della scheda.

Proprietà

Per tema, sfondo, accento e posizione, vedi Proprietà comuni.

Imposta le proprietà statiche nei params della scheda quando la crei. Il suo documento dati contiene solo proprietà dinamiche. Le righe annidate descrivono il contenuto della proprietà genitore.

Proprietà statiche

Nome	Tipo	Predefinito	Valori e limiti	Descrizione
`title`	string	`"Your order"`	maxLength: `30`
`status`	string	`"open"`	`"open"`, `"paying"`, `"paid"`	aperto mostra il carrello, pagamento aggiunge la richiesta di pagamento, pagato mostra il ringraziamento.
`orderNumber`	string	`""`	maxLength: `12`
`currency`	string	`"$"`	maxLength: `4`	Il simbolo della valuta mostrato prima degli importi.
`decimals`	integer	`2`	`0`, `2`	0 mostra importi interi (per yen o won).
`discount`	number	`0`	minimo: `0`	Uno sconto a livello d’ordine in unità maggiori, oltre agli sconti sulle righe.
`discountLabel`	string	`""`	maxLength: `30`	Nomina lo sconto ordine, per esempio Fedeltà 10%.
`subtotal`	number		minimo: `0`	Sovrascrive la somma delle righe.
`tax`	number		minimo: `0`	L’importo della tassa; la riga Tassa appare solo quando è fornita.
`taxLabel`	string	`""`	maxLength: `20`
`tip`	number	`0`	minimo: `0`
`total`	number		minimo: `0`	Sovrascrive il totale calcolato dalla scheda (subtotal - sconti + tasse + mancia).
`welcome`	string	`""`	maxLength: `40`	Il saluto inattivo. Vuoto significa Benvenuto.
`welcomeNote`	string	`""`	maxLength: `100`
`payPrompt`	string	`""`	maxLength: `50`	Vuoto indica Tocca, inserisci o striscia per pagare.
`thanks`	string	`""`	maxLength: `40`	Vuoto indica Grazie.
`paidNote`	string	`""`	maxLength: `100`	Una linea sotto il ringraziamento, per esempio dove è andata la ricevuta.
`backgroundColor`	stringa, nullo	`null`	modello: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Sovrascrive il colore di sfondo e della piastra della scheda con un colore piatto ordinato in CSS. #RRGGBBAA fornisce l’opacità. background none ha la precedenza.
`textColor`	stringa, nullo	`null`	modello: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Sovrascrive i colori del testo principale e secondario. I colori di accento e di stato semantico mantengono i loro ruoli.

Proprietà dinamiche

Nome	Tipo	Predefinito	Valori e limiti	Descrizione
`lines`	array	`[]`	maxItems: `60`
`lines[].id`	string	`""`	maxLength: `40`	Identifica la riga, così una riga già mostrata non si anima di nuovo.
`lines[].qty`	integer	`1`	minimo: `1`; massimo: `999`
`lines[].name`	string		minLength: `1`; maxLength: `60`; Obbligatorio
`lines[].mods`	stringa o array	`""`	anyOf: `[{"type":"string","maxLength":80},{"type":"array","maxItems":8,"items":{"type":"string","maxLength":30}}]`
`lines[].price`	number	`0`	minimo: `0`	Il prezzo unitario in unità maggiori (12,50). Una riga senza prezzo e senza sconto indica Gratis.
`lines[].discount`	number	`0`	minimo: `0`	Un importo di sconto su questa riga, in unità maggiori.
`lines[].addedAt`	string	`""`	maxLength: `40`	Istante ISO in cui questa riga è stata aggiunta; ancora la sua diapositiva in Primetime.
`paidAt`	string	`""`	maxLength: `40`	Istante ISO in cui il pagamento è stato approvato; ancora la rivelazione del controllo Primetime.
`updatedAt`	string	`""`	maxLength: `40`	Istante ISO dell’ultimo aggiornamento del carrello.

Esempio di canvas

Salva le proprietà statiche come params.json e crea la scheda. Il risultato contiene il suo ID crd_.

{
  "theme": "neomustard"
}

screenrig card create --type order-confirmation --major 1 --file params.json

Aggiungi questo elemento ai primitives di una pagina playlist, con quell’ID al posto di quello dell’esempio. Pubblica la playlist e assegna uno schermo.

{
  "id": "order-confirmation",
  "primitive": "card",
  "card": "crd_01EXAMPLECARD000000000",
  "layout": "full",
  "content_fit": "fill"
}

Scrivere dati live

Scrivi il documento nella scheda dopo averla creata, poi sostituiscilo per aggiornare lo schermo senza ripubblicare. La scheda controlla ogni scrittura rispetto alle sue proprietà dinamiche e rifiuta un documento che non accetta. Usa lo stesso progetto della playlist.

Salva il documento come card-data.json. Il CLI legge il documento stesso, senza wrapper:

{
  "lines": [],
  "paidAt": "",
  "updatedAt": ""
}

screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json

Oppure chiamare direttamente l’API. L’API incapsula lo stesso documento in un campo document. Un token agente nomina già il suo progetto, quindi non viene inviato un header progetto; se invii ScreenRig-Project, deve corrispondere al progetto del token. Fornisci l’autorizzazione API tramite l’ambiente; vedi Autenticazione API.

curl --request PUT "https://api.screenrig.ai/api/cards/crd_01EXAMPLECARD000000000/data" \
  --header "Authorization: Bearer $SCREENRIG_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{"document":{"lines":[],"paidAt":"","updatedAt":""}}'