Cestino Modelli CSS

Template CSS modificabili per il carrello

I template CSS per il carrello determinano il comportamento del carrello sullo schermo: come si allinea ciascuna riga, come si adatta su smartphone e come il totale si separa dall'elenco soprastante. Gran parte del lavoro reale riguarda i casi limite, come il titolo di un prodotto che occupa due righe o il link di rimozione troppo vicino al checkout.

Allineamento Flexbox su schermi stretti

La riga del carrello riunisce contenuti di larghezze molto differenti. CSS Grid mantiene stabili le colonne dell'anteprima, del titolo e del prezzo lungo l'intero elenco. All'interno di una singola cella, Flexbox allinea i pulsanti e il valore numerico del selettore di quantità sulla stessa linea.

Su uno schermo stretto, la riga viene solitamente disposta in verticale, spostando il controllo di quantità e il prezzo sotto il titolo. Il riepilogo scende al di sotto dell'elenco, mentre sui display ampi alcuni template lo rendono fisso (sticky), mantenendo il totale sempre visibile anche nei carrelli più lunghi.

È utile verificare una demo con contenuti per i quali gli stili non erano stati originariamente disegnati:

• il nome di un prodotto abbastanza lungo da andare a capo, per verificare se la colonna del prezzo regge;
• un prezzo a quattro cifre accanto a un prezzo originale e a un'etichetta promozionale;
• una vista per smartphone con diversi articoli, per verificare che le righe impilate rimangano visivamente distinte.

Stati notati dai clienti durante le modifiche

I pulsanti per la quantità necessitano di stili di hover e focus facili da individuare, fondamentali per gli acquirenti che navigano nel carrello tramite tastiera. L'azione di rimozione funziona meglio se più discreta e compatta, in modo da evitare clic accidentali mentre si tenta di selezionare il cursore di quantità.

Un pulsante di checkout o di aggiornamento disabilitato deve apparire inequivocabilmente inattivo. Quando una quantità supera la disponibilità a magazzino o un articolo non è più acquistabile, un messaggio colorato e un bordo attorno alla riga indicano chiaramente dove risiede il problema.

Gli sconti aggiungono un ulteriore livello di priorità. Il prezzo attuale deve avere il massimo risalto visivo, mentre il vecchio prezzo può essere barrato e attenuato. Anche il carrello vuoto costituisce uno stato: spaziature ampie e un solo collegamento per tornare allo shopping evitano che appaia come una griglia incompleta o difettosa.

Peso visivo e posizionamento del riepilogo

Il totale dell'ordine e il pulsante di checkout devono risaltare rispetto a ogni singolo prezzo unitario e ai link di rimozione. Caratteri di dimensioni maggiori e un pulsante a tinta unita svolgono al meglio questo compito. Nicepage Theme Colors consente di applicare una palette cromatica condivisa all'intero progetto, mantenendo i pulsanti del carrello e i richiami di colore dei prezzi coerenti con il resto del negozio.

Un rapido stress test risolve la maggior parte dei dubbi: carica una demo con i nomi dei prodotti più lunghi e formati di prezzo reali, quindi visualizzala alla larghezza di un telefono con uno sconto applicato. Se le righe restano allineate e il checkout risalta con chiarezza, gli stili sono pronti per ordini reali.