Tutto quello che vorresti sapere prima di installare.
Uno sguardo dettagliato su come funziona Modulo Carosello Categorie PrestaShop 8/9: Mostrare le Categorie in Homepage, perché l'abbiamo progettato così, e il ragionamento dietro le funzionalità qui sopra.
Una vetrina di categorie configurabile, non un blocco fisso
Il blocco categorie nativo di PrestaShop mostra un elenco di link o miniature nel formato imposto dal tema. Qui ogni vetrina si configura in un modulo a schede: layout, numero di righe, colonne su desktop, tablet e mobile, spaziatura, larghezza del contenitore, sfondo della sezione. Scegli le categorie a mano e le riordini con il trascinamento, oppure lasci che il modulo mostri le sottocategorie di un reparto, con un limite. All'installazione viene creata una vetrina dimostrativa nella homepage per vedere subito il risultato.
Immagine, nome e testo personalizzati per ogni categoria
Una categoria si chiama spesso «Abbigliamento donna» nel catalogo mentre in homepage si vuole mostrare «Nuova collezione». Ogni categoria aggiunta a una vetrina accetta quindi un nome personalizzato, una descrizione breve, un'immagine dedicata e un'immagine mobile con un taglio più stretto, un badge, un testo del pulsante e un link a un elenco filtrato o a una landing page. Senza personalizzazione, il modulo riprende l'immagine e il nome della categoria. Per l'immagine sceglie automaticamente il formato PrestaShop più nitido disponibile, perché il formato category_default di PrestaShop 8 misura solo 141 x 180 px.
Carosello, griglia o masonry, su 1 a 3 righe
Il carosello fa scorrere 1, 2 o 3 righe insieme, con frecce, punti, ciclo continuo e autoplay facoltativo. Su mobile lascia intravedere una parte della scheda successiva per indicare che la riga si può scorrere. La griglia dispone le categorie in colonne regolari, con un limite di righe facoltativo. Il masonry propone tre stili: altezze naturali delle immagini, altezze alternate o prima categoria in evidenza su 2 x 2. Quando una riga contiene meno categorie delle colonne, si allinea al titolo invece di restare attaccata a sinistra.
5 preset per iniziare, 81 opzioni per rifinire
Il preset «Cerchi» offre in un clic immagini rotonde in stile storie di Instagram, 6 per riga su desktop. «Overlay» mette il testo sull'immagine con una sfumatura, «Banner» mostra 2 grandi riquadri con i nomi in maiuscolo, «Schede» inserisce ogni categoria in una scheda bianca con descrizione e link. Il preset compila le opzioni di design al salvataggio, poi tutto resta modificabile: colori, dimensioni, arrotondamenti, bordi, ombre, 6 effetti al passaggio del mouse, posizione del testo, stile del pulsante e del badge. Un campo di CSS personalizzato, limitato all'identificativo della vetrina, copre gli ultimi dettagli.
Nella homepage, nelle pagine categoria o ovunque
Ogni vetrina sceglie il proprio hook da un elenco o in un campo libero: un nome di hook sconosciuto viene creato e registrato automaticamente, e il modulo si sgancia dagli hook non più usati. La sorgente «categoria visualizzata» mostra in ogni pagina categoria le sue sottocategorie, con una sola vetrina per tutto il catalogo. L'hook displayDfCategoryShowcase e il tag widget permettono di collocare una vetrina precisa in qualsiasi template. Le date di inizio e fine e la limitazione per gruppo di clienti servono per le campagne stagionali e le selezioni B2B.
Veloce e accessibile
Il carosello usa lo scorrimento nativo del browser (CSS scroll-snap), pilotato da circa 3 KB di JavaScript compresso, senza jQuery. Le immagini caricate vengono generate a 480 e 960 px e servite con srcset e sizes calcolati in base alle colonne. La prima immagine si carica subito, le successive in lazy loading, con attributi width e height. Il risultato è in cache Smarty e si svuota da solo quando cambia una categoria o un prodotto. Sull'accessibilità: la sezione è etichettata dal suo titolo, pulsanti e punti sono annunciati ai lettori di schermo, la navigazione da tastiera ha un focus visibile, l'autoplay si ferma al focus e prefers-reduced-motion viene rispettato.
Ancora non ci sono recensioni.