Category Showcase: documentazione del carosello categorie PrestaShop

Installazione

Nel back office, apri Moduli > Gestione moduli, clicca su «Carica un modulo» e invia il file dfcategoryshowcase.zip. Il modulo è compatibile con PrestaShop da 8.0 a 9.x.

All’installazione, il modulo crea le sue tabelle, la cartella /img/dfcategoryshowcase/ per le immagini caricate, l’hook displayDfCategoryShowcase e una vetrina dimostrativa: le sottocategorie della categoria Home, in carosello, nella homepage. Apri il negozio per vedere il risultato, poi modifica o elimina questa vetrina.

Il modulo si gestisce da Design > Category Showcase (anche il pulsante «Configura» del modulo porta lì).

Creare una vetrina

Clicca su «Aggiungi una vetrina». La scheda Generale contiene:

• Nome interno: visibile solo nel back office.
• Hook: la posizione di visualizzazione (vedi sotto).
• Layout: carosello, griglia o masonry.
• Preset di design: applica uno stile completo al salvataggio (vedi sotto).
• Categorie mostrate: la sorgente delle categorie.
• Titolo, sottotitolo, testo e link «Vedi tutto»: per lingua.

Le tre sorgenti

• Scelte a mano: dopo il salvataggio, il modulo ti porta alla schermata delle categorie della vetrina. Aggiungile una alla volta e riordinale con il trascinamento.
• Sottocategorie di una categoria padre: scegli la categoria padre e, se serve, un numero massimo. L’elenco segue il catalogo.
• Sottocategorie della categoria visualizzata: da usare con displayHeaderCategory o displayFooterCategory. Ogni pagina categoria mostra le proprie sottocategorie. Una categoria senza sottocategorie non mostra nulla.

Nelle due modalità «sottocategorie», aggiungere una categoria nella schermata delle categorie serve solo a personalizzarla. Disattivarla la nasconde dalla vetrina.

Personalizzare una categoria

Dall’elenco delle vetrine, clicca su «Categorie» e aggiungi o modifica una categoria. Ogni campo vuoto riprende il valore della categoria PrestaShop:

• Immagine personalizzata: JPG, PNG, WebP o GIF. Il modulo genera copie da 480 e 960 px, servite automaticamente agli schermi piccoli.
• Immagine mobile: facoltativa, mostrata sotto i 768 px. Utile per un taglio più stretto.
• Nome e descrizione breve: gli a capo della descrizione vengono mantenuti.
• Badge: ad esempio Novità, Saldi o -30%.
• Testo del pulsante e link: il link può puntare a un elenco filtrato o a una landing page. Sono accettati solo link http(s), relativi, ancore, mailto: e tel:.
• Classe CSS: aggiunta alla scheda.

Una stessa categoria può essere aggiunta una sola volta per vetrina.

Design

Preset

Il campo «Preset di design» della scheda Generale propone Minimal, Schede, Overlay, Cerchi e Banner. Il preset sostituisce le opzioni che copre (immagine, scheda, testi, pulsante, colonne) al salvataggio. Poi il campo torna su «Mantieni le mie impostazioni» e tutte le opzioni restano modificabili.

Schede di impostazione

• Layout: righe (da 1 a 3), colonne su desktop (da 1 a 8), tablet (da 1 a 6) e mobile (da 1 a 4), spaziatura, limite di righe per griglia e masonry, stile masonry, contenitore (colonna del tema, contenuto con larghezza massima, larghezza intera), margini e sfondo della sezione.
• Intestazione: mostra il titolo, tag (H2 consigliato in homepage), allineamento, colori e dimensioni, posizione e stile del link «Vedi tutto».
• Immagine: formato immagine PrestaShop («Automatica» sceglie il formato più nitido di almeno 400 px, altrimenti l’immagine originale), proporzioni, ritaglio o immagine intera, forma rotonda, sfondo, caricamento differito.
• Scheda: arrotondamento, bordo, ombra, sfondo, spaziatura interna, effetto al passaggio del mouse, durata dell’animazione.
• Testi: posizione (sotto l’immagine, sull’immagine in alto, al centro o in basso, o nessun testo), velo, tipografia del nome, descrizione, contatore di prodotti.
• Pulsante e badge, Carosello, Visibilità, Avanzate: vedi le sezioni seguenti.

Con la forma rotonda, il testo va sempre sotto l’immagine.

Carosello

Le opzioni della scheda Carosello si applicano quando il layout è «Carosello»: scorrimento automatico e intervallo, pausa al passaggio del mouse, ciclo continuo, colonne scorse per clic, frecce (sul carosello, fuori sugli schermi grandi o accanto al titolo), colori, punti di navigazione, anteprima della categoria successiva su mobile, trascinamento con il mouse.

Con 2 o 3 righe, le categorie riempiono ogni colonna dall’alto in basso, poi le righe scorrono insieme. Lo scorrimento automatico si ferma al passaggio del mouse, con il focus da tastiera, al tocco, quando la scheda del browser è nascosta o quando il carosello esce dallo schermo. È disattivato se il visitatore ha chiesto al sistema di ridurre le animazioni.

Dove mostrare una vetrina

• displayHome: homepage.
• displayHeaderCategory e displayFooterCategory: pagine categoria, sopra o sotto i prodotti.
• displayDfCategoryShowcase: hook creato dal modulo, da richiamare dove vuoi nel tema con {hook h='displayDfCategoryShowcase'}.
• Hook personalizzato: scegli «Hook personalizzato…» e scrivi un nome (lettere, cifre, – e _). Un hook inesistente viene creato e registrato automaticamente. Richiamalo con {hook h='tuoHook'}. Un vecchio nome di hook (alias) viene salvato con il suo nome reale.
• Widget: {widget name='dfcategoryshowcase' id_showcase=1} mostra una vetrina precisa, qualunque sia il suo hook.

Più vetrine possono condividere un hook: vengono mostrate nell’ordine dell’elenco, modificabile con il trascinamento. Il modulo si sgancia automaticamente dagli hook non più usati.

Visibilità

• Mostra dal / fino al: date nel formato AAAA-MM-GG HH:MM:SS. Vuoto = senza limite.
• Gruppi di clienti: la vetrina è mostrata solo ai gruppi selezionati (Visitatore, Ospite, Cliente o i tuoi gruppi B2B). Tutti selezionati = nessuna limitazione.
• Nascondi su mobile / su desktop (scheda Avanzate): sotto i 768 px o da 1024 px.
• Negozi: in multinegozio, associa ogni vetrina ai negozi desiderati.

Duplicare una vetrina

L’azione «Duplica» dell’elenco copia la vetrina con le sue categorie, testi, negozi e immagini. La copia viene creata disattivata: modificala e poi attivala.

CSS personalizzato

Ogni vetrina è resa in <section id="dfcs-ID">, dove ID è il numero mostrato nell’elenco. Il campo «CSS personalizzato» della scheda Avanzate viene stampato solo con quella vetrina. Esempio:

#dfcs-2 .dfcs-card__name { letter-spacing: .08em; }

Se la stessa vetrina compare due volte in una pagina (hook e widget), la seconda copia riceve l’identificativo dfcs-ID-2.

Cache e prestazioni

Il risultato è in cache Smarty per vetrina, lingua, negozio e gruppo di clienti. La cache si svuota a ogni salvataggio nel modulo, a ogni modifica di una categoria e a ogni modifica di un prodotto se una vetrina mostra il contatore di prodotti. Il CSS e il JavaScript del modulo vengono caricati solo se almeno una vetrina è attiva.

Domande frequenti

La vetrina non compare

Verifica che la vetrina sia attiva, associata al negozio, nel suo periodo di visualizzazione e aperta al gruppo del visitatore. Verifica poi che il tema richiami davvero l’hook scelto. Per un hook personalizzato, il tag {hook h='...'} deve essere presente in un template.

Le immagini sono sfocate

Lascia il formato immagine su «Automatica» o carica un’immagine personalizzata. Il formato category_default di PrestaShop 8 misura solo 141 x 180 px.

Nel masonry l’ordine non segue la lettura da sinistra a destra

Gli stili «altezze naturali» e «altezze alternate» riempiono le colonne dall’alto in basso. Se l’ordine da sinistra a destra conta, usa la griglia o lo stile «prima categoria in evidenza».

Disinstallazione

La disinstallazione elimina le tabelle del modulo, le sue schede di amministrazione e la cartella /img/dfcategoryshowcase/ con le immagini caricate.