# 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.

> Pagina: https://ui.eneawork.it/blog/blocchi-per-ecommerce
> Markdown: https://ui.eneawork.it/blog/blocchi-per-ecommerce.md

*2026-10-31*

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.

## L'ordine dei blocchi

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

## Blocchi gallery

## Blocchi cart

## Blocchi 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.

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 blocco cart entra solo se il prezzo arriva da una prop o da una fetch, mai da un importo scritto nel componente: tutto il resto è una demo da riscrivere.

## 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.

## FAQ

### 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.