Blocks
4 blocchi per una pagina marketplace
Una pagina marketplace deve far incontrare domanda e offerta in tre click. Cinque categorie, la scelta tra card e tabella, i guasti della ricerca senza risultati e i conteggi reali.
In sintesi
- Card per oggetti comparabili a occhio, tabella per attributi numerici.
- Tre blocchi search su 1.556: nessun filtro a faccette nel catalogo.
- Lo stato «nessun risultato» è parte della ricerca, non un dettaglio.
Una pagina marketplace deve far incontrare domanda e offerta in tre click. Il catalogo indicizza 3 blocchi search, 13 table, 4 gallery, 10 profile e 4 checkout, letti il 2026-11-01: cinque categorie per una pagina di ricerca e risultato.
I conteggi sono quelli delle pagine categoria pubbliche, misurati lo stesso giorno. Il dato che pesa più di tutti è search: 3 blocchi su un catalogo da 1.556 record. La parte che decide il prodotto è quella che nessun registry pubblica come file copiabile.
Cosa deve fare la pagina
Un marketplace non vende un oggetto: vende la certezza che l'oggetto giusto esista e che chi lo vende risponda. La pagina dei risultati deve mostrare disponibilità, prezzo totale con spedizione e reputazione del venditore nella stessa riga. La pagina di dettaglio deve ripetere quelle tre informazioni, perché il 70% dei dubbi nasce dal confronto tra le due.
- Prezzo totale, spedizione inclusa, già nella riga del risultato.
- Un filtro che sopravvive al refresh e al link condiviso.
- Uno stato «nessun risultato» con tre alternative cliccabili.
- Una pagina venditore con tempi di risposta e resi, non solo stelle.
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| search | trovare un oggetto o un servizio | 3 |
| table | confrontare su attributi | 13 |
| profile | decidere di chi fidarsi | 10 |
| checkout | pagare in un flusso unico | 4 |
Search, table, profile, checkout, footer. La ricerca apre la pagina perché è il compito; il risultato viene subito dopo e il profilo del venditore si raggiunge dal risultato, non il contrario. Il checkout è l'ultimo passo e va progettato come flusso a sé: su un marketplace può contenere più venditori nello stesso ordine, cosa che nessun blocco del catalogo prevede.
I blocchi da cui partire
Le tabelle riportano blocco, registry, file e categoria. Il blocco topbar da 7 file viene classificato come search dal registry: contiene casella e dropdown, non una pagina di risultati. La data table da 24 file è la scelta più densa e va letta prima di installarla, perché porta con sé una libreria di tabella completa.
Blocchi search
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Topbar 06 - Search Focused Topbar | Shadcn Space | 7 | topbar |
| Global search | flx | 1 | global |
Blocchi table
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Data Table Core | niko-table | 24 | data |
| Data Table | niko-table | 16 | data |
Blocchi profile
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Profile Form - 1 | shadcn-ui-clerk-components | 3 | profile |
| Forms 01 - Edit Profile Form | Shadcn Space | 2 | forms |
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 guasto più costoso è la ricerca che non ha stato vuoto: nessun risultato diventa una pagina bianca e il visitatore pensa che il sito sia rotto. Il secondo è il prezzo che cambia tra risultato e checkout quando la spedizione si aggiunge tardi. Il terzo è la tabella con righe che crescono di altezza appena arriva una descrizione lunga.
- Nessuno stato vuoto: la ricerca senza risultati sembra un errore.
- Prezzo senza spedizione nella lista: il totale cambia al checkout.
- Tabella che perde l'header dopo due scroll su 50 righe.
- Filtri nello stato locale: si perdono al refresh e nei link.
curl "https://ui.eneawork.it/api/blocks/category/table?limit=5"
La risposta elenca le table disponibili con fonte e file: leggila per capire quali sono pensate per dati finanziari e quali per elenchi generici. Su un marketplace serve la seconda famiglia, con celle che reggono testo e stato insieme.
Un limite da dichiarare
Il catalogo non ha filtri a faccette: i 3 blocchi search sono campi con dropdown e nessuno porta conteggi per filtro. Su un marketplace con più di 200 inserzioni il filtro a faccette è il componente che decide la conversione, e va costruito da zero con la sua query.
Nel catalogo: data table, blocco prezzo e tutti i blocchi. Le guide: checklist accessibilità, alternative a MUI e Radix, Base UI e React Aria.
Domande frequenti
Meglio card o tabella per i risultati di un marketplace?
Card quando le foto sono il criterio di scelta, tabella quando il visitatore confronta prezzo, distanza e valutazione. La tabella mostra più righe per schermata e permette di ordinare; la card regge l'immagine, che su oggetti usati vale più di ogni attributo.
Perché il catalogo ha solo 3 blocchi search?
Perché una ricerca utile richiede indice, ranking e query: nessun registry la consegna come file. I 3 blocchi sono la casella e il dropdown, cioè la parte visibile. Il motore resta lavoro di backend, e su un marketplace è la parte che costa di più.
Come mostro la reputazione del venditore senza ingannare?
Con numero di transazioni, tempo medio di risposta e percentuale di resi, non solo la media delle stelle. Una media di 4,9 su tre recensioni non dice nulla, e accanto a una media alta serve il conteggio per capire quanto fidarsi.
Il checkout deve gestire più venditori nello stesso ordine?
Se il marketplace lo permette, sì, e allora i 4 blocchi checkout del catalogo non bastano: ognuno presume un carrello unico. La divisione per venditore tocca totali, spedizioni e resi, quindi va decisa prima di scegliere il blocco.
Quante inserzioni servono prima di introdurre i filtri?
Intorno alle 50, quando i risultati superano le due schermate. Sotto quella soglia bastano ordinamento e ricerca testuale; sopra, il filtro a faccette diventa la funzione principale e il catalogo non ne offre nessuno pronto.