Category Wall — Pagina categoria visiva

Category Wall sostituisce l’elenco delle sottocategorie nativo di PrestaShop con un muro di riquadri con immagine, dotato di contatori prodotti e tre layout tra cui scegliere. Questa guida copre l’installazione, la configurazione e l’uso avanzato del modulo.

Installazione

Il modulo si installa come qualsiasi modulo PrestaShop, senza dipendenze esterne né Composer.

1. Dal back-office, apri Moduli > Gestore moduli e clicca su Carica un modulo (pulsante in alto a destra).
2. Seleziona il file dfcategorywall.zip e avvia l’installazione.
3. Una volta installato, clicca su Configura per accedere alle impostazioni.

Come funziona la visualizzazione

Su ogni pagina categoria, il modulo mostra automaticamente il muro delle sottocategorie sopra l’elenco dei prodotti. Si appoggia all’hook displayContentWrapperTop, presente nel tema Classic e nella maggior parte dei temi che ne derivano.

Se non esiste alcuna sottocategoria attiva per la categoria consultata, il muro non viene mostrato: il modulo resta completamente invisibile sulle categorie «foglia».

Opzioni di configurazione

Tutte le opzioni si regolano dalla schermata di configurazione del modulo.

Layout

Sono disponibili tre presentazioni:

• Griglia — una griglia regolare di riquadri di dimensioni identiche, ideale per un risultato pulito e strutturato.
• Mosaico — una disposizione dinamica in cui la prima sottocategoria occupa un riquadro ingrandito, per attirare lo sguardo su un reparto di punta.
• Carosello — uno scorrimento orizzontale fluido, touch-friendly su mobile e dotato di frecce di navigazione su desktop.

Colonne

Imposta il numero di colonne mostrate su desktop, da 2 a 6. Questo valore si applica ai layout griglia e carosello. La visualizzazione passa automaticamente a 3 e poi a 2 colonne su tablet e mobile.

Contatori prodotti

Attiva Mostra i contatori prodotti per far comparire, su ogni riquadro, il numero di prodotti della sottocategoria sotto forma di badge.

• Conta i prodotti in modo ricorsivo — somma i prodotti di tutto l’albero figlio (sottocategorie annidate incluse), e non solo i prodotti collegati direttamente.
• Nascondi le sottocategorie vuote — rimuove dal muro le sottocategorie senza alcun prodotto visibile, per presentare solo reparti realmente forniti.

Descrizione e titolo

• Mostra la descrizione delle sottocategorie — mostra un breve estratto sotto il nome di ogni riquadro (troncato a 120 caratteri).
• Mostra il titolo della sezione e Titolo della sezione — un’intestazione personalizzabile e multilingua mostrata sopra il muro (ad esempio «Esplora le sottocategorie»). Lascia il campo vuoto per nascondere il titolo.

Nascondi l’elenco nativo

L’opzione Nascondi l’elenco delle sottocategorie nativo aggiunge una regola CSS discreta che nasconde il blocco delle sottocategorie predefinito del tema, per evitare qualsiasi duplicato con il muro. Questa opzione non ha effetto se il tuo tema non mostra quel blocco.

Riquadri senza immagine

Quando una sottocategoria non ha un’immagine di copertina, il modulo genera automaticamente un riquadro di riserva: un gradiente di colore stabile, derivato dall’identificativo della categoria, con l’iniziale del suo nome. La griglia resta così sempre omogenea, senza celle vuote.

Uso come widget

Oltre alla pagina categoria, il muro può essere inserito ovunque in un template tramite l’interfaccia widget di PrestaShop.

{widget name='dfcategorywall'}

Per mirare a una categoria specifica, passa il suo identificativo:

{widget name='dfcategorywall' id_category=12}

Risoluzione dei problemi

Il muro non viene mostrato

• Verifica che la categoria consultata abbia effettivamente sottocategorie attive.
• Assicurati che il tuo tema attivi l’hook displayContentWrapperTop. In caso contrario, usa l’inserimento tramite widget descritto sopra.

Le sottocategorie appaiono in doppio

Attiva l’opzione Nascondi l’elenco delle sottocategorie nativo per rimuovere il blocco originale del tema.

Le frecce del carosello non appaiono

Le frecce appaiono solo quando ci sono abbastanza riquadri da superare la larghezza visibile. Su mobile, la navigazione avviene solo con il dito (scorrimento touch).