Cestino Modelli HTML

Utilizza template HTML per carrello pronti all'uso per negozi online

Un template HTML per carrello gestisce il lavoro che spesso viene sottovalutato: stabilire quali elementi esistono e come si nidificano. Le righe prodotto, i campi quantità e i link per la rimozione sono già posizionati nel markup. Anche il riepilogo dell'ordine e il pulsante di checkout hanno il proprio spazio, così il titolare del negozio può iniziare direttamente aggiungendo i prodotti reali.

Come si ripetono le righe dei prodotti

La maggior parte di un carrello è una piccola unità duplicata più volte. Un acquirente con un solo articolo e uno con dieci vedono la stessa struttura di riga, motivo per cui quella singola riga conta molto più di quanto lasci intendere una demo con due prodotti di esempio. Prezzo e quantità si trovano al suo interno, mentre il totale appartiene all'intero ordine e si trova all'esterno dell'elenco ripetuto.

Una riga ben strutturata tiene solitamente raggruppati questi elementi:

1. un contenitore prodotto che ospita l'immagine, il titolo e la variante scelta;
2. un campo quantità i cui comandi di aggiornamento e rimozione appartengono esattamente a quell'articolo;
3. spazi separati per il prezzo unitario e il subtotale di riga, con spazio per un eventuale prezzo precedente.

Blocchi all'esterno dell'elenco articoli

Sotto o accanto alle righe si trovano le aree che descrivono l'ordine nel suo insieme. In un template solido, ciascuna di esse è una sezione di markup a sé stante, facile da individuare quando si modifica il file in un secondo momento.

Cerca questi blocchi all'esterno dell'elenco ripetuto:

1. un riepilogo dell'ordine che raccoglie il subtotale, eventuali sconti o spese di spedizione e il totale finale;
2. un'area di checkout impostata come modulo o blocco di azione autonomo, che fornisce all'ordine un passaggio definito verso il pagamento;
3. una sezione per carrello vuoto che sostituisce le righe con un breve messaggio e un link di ritorno al catalogo.

È utile prevedere anche una piccola area di notifica per i messaggi relativi agli articoli esauriti, poiché aggiungerne una in seguito significherebbe dover inserire nuovo markup tra blocchi già esistenti.

Quali parti sono già codificate

Nicepage supporta siti di e-commerce per l'output HTML e il carrello fa parte di queste funzionalità per negozi online. La documentazione ufficiale Carrello per l'E-Commerce illustra come funziona il carrello acquisti di Nicepage e come si inserisce in un progetto di e-commerce.

Prima di confrontare le demo, elenca ciò che il tuo negozio mostra nel carrello. Se i clienti selezionano varianti e applicano sconti, ognuna di queste opzioni richiede un'area predefinita nel markup. Un template che ne è privo richiede in genere di ristrutturare ogni singola voce dopo aver collegato il catalogo. Una demo può avere un aspetto del tutto diverso dal tuo brand ed essere comunque la base perfetta, purché la sua struttura corrisponda ai dati del tuo ordine. Il checkout è un passaggio separato, quindi il carrello deve solo concludersi con un blocco che trasferisca chiaramente l'ordine al passaggio successivo.