Che cos'è un Cart Drawer?

Un cart drawer è un pannello che compare sopra la pagina corrente e mostra il contenuto del carrello senza passare a una pagina di carrello separata. Si apre dall'icona del carrello nell'intestazione e di norma anche dopo l'aggiunta di un articolo. Il pannello elenca righe, quantità e totale dell'ordine, spesso insieme a indicatori di avanzamento come la soglia per la spedizione gratuita, e contiene un'azione primaria che porta al checkout. È diventato il modello di carrello abituale nelle storefront pensate prima per il mobile.

Definizione

Un cart drawer è un modello di presentazione, non un sistema di carrello a sé. Lo stato del carrello resta identico che venga reso in un pannello, in una pagina di carrello dedicata o in un mini carrello a tendina. Le varianti si distinguono per il trigger, per l'apertura automatica dopo l'aggiunta di un articolo e per la quantità di contenuti secondari ospitati, come campo codice sconto, raccomandazioni o stima di spedizione. I requisiti di accessibilità sono stringenti: il pannello è una superficie modale, il focus deve spostarsi al suo interno, il tasto di uscita deve chiuderlo e lo sfondo non deve scorrere. L'errore più frequente è il sovraccarico di offerte, perché allunga il percorso verso il checkout.

Perché è importante

In una storefront disaccoppiata il carrello risiede dietro un'API commerce e viene indirizzato tramite un identificativo conservato nella sessione del browser. Il pannello si aggancia a uno stato di carrello condiviso lato client, così ogni componente che modifica il carrello, sia una card di prodotto, un selettore di quantità o un modulo bundle, genera un solo aggiornamento e un solo ridisegno. La pagina circostante può essere generata staticamente e messa in cache sull'edge, mentre il carrello viene caricato a runtime in modo separato: i dati specifici del cliente restano fuori dal documento in cache. Gli aggiornamenti ottimistici mantengono il pannello reattivo, ma la risposta del server resta il riferimento per prezzo, disponibilità e promozioni.

Casi d'uso

Nella scheda prodotto il pannello si apre dopo l'aggiunta e conferma l'articolo senza lasciare la pagina, il che sostiene le sessioni con più articoli. Nelle viste elenco consente di aggiungere prodotti in sequenza. Nel pannello trovano posto una barra di avanzamento verso la soglia di spedizione, un suggerimento compatto di upgrade o un campo codice sconto, purché il pulsante di checkout resti l'elemento più evidente. Sugli schermi piccoli il pannello occupa di norma l'intera altezza della finestra, con totale e azione primaria fissati sul bordo inferiore.

Vedi anche

Per approfondire: Cart Abandonment · Checkout Optimization.