Blocks
5 blocchi per una pagina e-commerce
Una pagina e-commerce deve vendere un prodotto, non mostrare un catalogo. Cinque categorie, l'ordine tra gallery e carrello, i guasti dei prezzi lato client e i conteggi reali del catalogo.
In sintesi
- La gallery si sceglie dal formato delle foto, non dal numero di miniature.
- Un carrello che calcola il prezzo nel browser non è un carrello.
- Due blocchi cart e quattro checkout: il pagamento resta fuori dal catalogo.
Una pagina e-commerce deve vendere un prodotto, non mostrare un catalogo. Il catalogo indicizza 51 blocchi hero, 4 gallery, 2 cart, 4 checkout e 45 footer, letti il 2026-11-01: cinque categorie per una pagina prodotto.
I conteggi sono quelli delle pagine categoria, misurati lo stesso giorno. Due blocchi cart e quattro checkout su 1.556 record dicono la cosa più importante di questa pagina: la parte che incassa non è quella che il catalogo copre meglio.
Cosa deve fare la pagina
Il compratore ha una domanda sola: «è il prodotto giusto per me, e quanto arriva?». La pagina deve mostrare il prodotto in grande, dire varianti e disponibilità, mettere il prezzo vicino al bottone e spiegare spedizione e reso senza aprire un'altra pagina. Le storie del brand, i video di due minuti e le recensioni sotto la piega sono un secondo lavoro, da fare dopo che la prima domanda ha risposta.
- Una gallery che regge foto verticali e orizzontali senza saltare.
- Varianti con disponibilità reale, non un menu a tendina decorativo.
- Prezzo e costo di spedizione prima del click sul carrello.
- Un carrello che rilegge il prezzo dal server al momento dell'ordine.
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| hero | mettere il prodotto in scena | 51 |
| gallery | far vedere il prodotto da vicino | 4 |
| cart | riepilogare la scelta | 2 |
| checkout | chiudere l'ordine | 4 |
| footer | dare spedizioni, resi e pagamenti | 45 |
Hero, gallery, cart, checkout, footer. La gallery sta subito sotto l'hero perché il compratore deve vedere il prodotto, e il carrello non va in cima: chi non ha ancora scelto una variante non può riempirlo, e un carrello vuoto in alto è la prima impressione sbagliata. Il checkout è una pagina a sé nella pratica, ma il blocco va progettato adesso perché condivide i campi con il carrello.
I blocchi da cui partire
Le tabelle riportano blocco, registry, file e categoria. La gallery da 2 file è la più leggera e la più limitata: miniature più immagine principale, senza zoom. Il cart da 1 file è un riepilogo, non un carrello con quantità e stock: chiamalo così anche nel codice, e non aspettarti che regga il calcolo delle tasse.
Blocchi hero
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Hero 01 - Agency Hero Section | Shadcn Space | 8 | hero |
| Hero 02 - Real Estate Hero Section | Shadcn Space | 6 | hero |
Blocchi gallery
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Gallery 01 - Image Gallery Section | Shadcn Space | 2 | gallery |
| Gallery Grid with Lightbox | uitripled | 1 | gallery |
Blocchi cart
Blocchi checkout
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Checkout 01 - Tabbed Billing Checkout | Shadcn Space | 2 | checkout |
| Checkout 01 | commercn | 1 | checkout |
Cosa si rompe in produzione
Il primo guasto è il prezzo: il blocco carrello somma i valori nel browser e il totale non coincide con quello incassato quando c'è uno sconto o un'imposta diversa per regione. Il secondo è la gallery che ricostruisce il layout a ogni cambio immagine e sposta il bottone di acquisto. Il terzo è il checkout che chiede l'indirizzo prima di dire quanto costa la spedizione.
- Totale calcolato lato client: si discosta dal prezzo incassato.
- Gallery senza dimensioni: il bottone di acquisto si sposta a ogni foto.
- Stock non verificato: si vende un prodotto esaurito.
- Checkout senza errore di carta: l'utente resta su una pagina muta.
curl "https://ui.eneawork.it/api/blocks/category/cart?limit=5"La chiamata restituisce i blocchi cart disponibili con fonte e file. Con due soli risultati, la verifica è rapida: se nessuno dei due accetta un prezzo dal server, il carrello va costruito da zero e il catalogo serve solo per il riepilogo visivo.
Un limite da dichiarare
Con 2 blocchi cart e 4 checkout, il catalogo copre la vetrina e non la transazione. Indirizzi, metodi di pagamento, 3-D Secure e webhook dell'ordine non esistono qui: la pagina prodotto si può comporre, il percorso d'acquisto no. Chi pianifica solo sui blocchi sottostima la parte che costa.
Nel catalogo: blocco prezzo, componenti e tutti i blocchi. Le guide: creare un e-commerce, tabelle prezzi in 10 minuti e peso di una libreria UI.
Domande frequenti
Quante foto servono nella gallery di un prodotto?
Da quattro a sei, con almeno una scala di riferimento e una del dettaglio. Oltre sei, il compratore smette di scorrere. Il blocco del catalogo non impone un numero: la griglia delle miniature si adatta, ma la qualità delle foto resta il fattore che decide la conversione.
Posso usare il blocco cart come carrello vero?
Solo dopo avergli dato uno stato esterno: righe, quantità e prezzi devono arrivare dal server. Il blocco da 1 file è un riepilogo visivo con importi statici; usarlo come carrello significa riscrivere la logica e probabilmente anche la struttura.
Meglio mostrare la spedizione in pagina o al checkout?
In pagina, vicino al prezzo. Chi scopre il costo di spedizione solo al checkout abbandona più spesso, e il dato va dato come intervallo quando dipende dalla destinazione, con la soglia di spedizione gratuita accanto.
Servono recensioni nella pagina prodotto?
Sì, ma sotto la piega e con un estratto: numero, voto medio e due testi. Nessun blocco del catalogo porta un sistema di recensioni, quindi il componente va costruito o collegato a un servizio esterno, e va fatto dopo la parte d'acquisto.
Come verifico il carrello prima di andare online?
Con tre ordini di prova: uno con sconto, uno con spedizione a un'altra regione e uno con carta rifiutata. Se il totale mostrato differisce da quello incassato in uno solo dei tre, il calcolo è nel posto sbagliato.