Product Carousel Pro — Caroselli di Prodotti Illimitati (dfproductcarousel)

Product Carousel Pro crea caroselli di prodotti illimitati ovunque nel vostro negozio PrestaShop: bestseller, novità, offerte, prodotti di una categoria o una selezione manuale ordinata a mano, visualizzati su sei hook standard o sui vostri hook personalizzati creati al volo. La particolarità del modulo: le schede prodotto sono renderizzate con il template di miniatura del vostro tema attivo, via ProductAssembler e ProductPresenter. Prezzi, flag, vista rapida e aggiungi al carrello funzionano esattamente come nelle vostre pagine categoria.

Installazione

1. Nel back-office di PrestaShop, aprite Moduli > Gestore moduli.
2. Cliccate su Carica un modulo e trascinate il file dfproductcarousel.zip.
3. Una scheda Product Carousel Pro appare sotto il menu Moduli: è lì che avviene tutto (anche il pulsante Configura del modulo vi reindirizza).

Il modulo crea tre tabelle (caroselli, titoli multilingue, associazione negozi) e registra sei hook di visualizzazione più actionFrontControllerSetMedia per i suoi asset. Gli hook personalizzati creati in seguito si registrano automaticamente al salvataggio del carosello interessato.

Creare un carosello

Dall’elenco, cliccate su Aggiungi un carosello. Il modulo di inserimento è organizzato in cinque blocchi: Contenuto, Posizionamento, Layout, Stile e Comportamento.

• Nome interno: visibile solo nel back-office, per orientarsi nell’elenco.
• Titolo e sottotitolo: multilingue, visualizzati sopra il carosello. Lasciate il titolo vuoto per non mostrare alcuna intestazione.

L’elenco dei caroselli offre poi attivazione in un clic, duplicazione (la copia viene creata disattivata) e azioni di massa di eliminazione.

Fonti dei prodotti

Ogni carosello sceglie la propria fonte tra sei:

• Bestseller: i prodotti più venduti del negozio.
• Novità: i prodotti contrassegnati come nuovi (il periodo è la vostra impostazione PrestaShop «Numero di giorni durante i quali il prodotto è considerato nuovo»).
• Offerte: i prodotti con uno sconto in corso.
• Prodotti di una categoria: scegliete la categoria nell’albero di selezione, i prodotti seguono l’ordine della categoria.
• Categoria home: i prodotti della categoria radice del negozio, l’equivalente dei «prodotti in evidenza» nativi.
• Selezione manuale: scegliete i prodotti uno per uno.

Il campo Numero massimo di prodotti limita quanti prodotti vengono caricati, qualunque sia la fonte.

La selezione manuale

Digitate almeno due caratteri nel campo di ricerca: l’autocompletamento trova i vostri prodotti per nome o riferimento. Ogni prodotto cliccato si aggiunge all’elenco sottostante, con la sua maniglia di trascinamento: riordinate con il drag and drop, e il front-office mostra i prodotti esattamente in quell’ordine. I prodotti disattivati o nascosti nel catalogo vengono filtrati automaticamente alla visualizzazione, senza rompere il carosello.

Scegliere il posizionamento

Hook standard

Sei hook sono proposti nel menu a tendina:

• displayHome: home page;
• displayContentWrapperTop e displayContentWrapperBottom: sopra e sotto il contenuto principale, sulla maggior parte delle pagine;
• displayFooterBefore: subito prima del footer;
• displayFooterProduct: in fondo alla scheda prodotto, la posizione classica del cross-selling;
• displayShoppingCartFooter: sotto il riepilogo del carrello.

Più caroselli possono condividere lo stesso hook: si impilano nell’ordine del loro campo Posizione.

Hook personalizzati

Selezionate Hook personalizzato nel menu, poi digitate un nome nel campo che appare, per esempio MioCarosello. Al salvataggio, il modulo pulisce il nome (solo lettere e cifre), lo prefissa con display se necessario (displayMioCarosello), lo registra presso PrestaShop e si mette in ascolto. Posizionate poi la chiamata nel template che preferite:

{hook h='displayMioCarosello'}

L’hook creato entra nel menu a tendina per i caroselli successivi. Potete creare tutti gli hook che vi servono.

Sintassi widget

Per visualizzare un carosello preciso indipendentemente dal suo hook, usate la sintassi widget con l’identificativo visibile nella prima colonna dell’elenco:

{widget name='dfproductcarousel' carousel=3}

Comodo in una pagina CMS o in un template su misura. Il carosello deve essere attivo per essere visualizzato.

Layout

• Prodotti per riga: tre valori indipendenti, da 1 a 8, per desktop (992 px e oltre), tablet (da 768 a 991 px) e mobile (meno di 768 px). La configurazione classica è 4 / 3 / 1.
• Modalità di scorrimento: «Un prodotto alla volta» avanza di una scheda per clic, «Riga completa» avanza di una pagina intera.
• Spaziatura: la distanza in pixel tra le schede (20 px per impostazione predefinita).
• Larghezza piena: il carosello esce dal suo contenitore per occupare tutta la larghezza dello schermo, di grande effetto in home page combinato con lo skin Sezione scura.

Stile

I cinque skin

• Classico: le schede prodotto del tema rigorosamente intatte. La scelta predefinita e la più sicura.
• Minimal: rimuove ombre e bordi per una resa piatta.
• Card: ombra, angoli arrotondati e leggero sollevamento al passaggio del mouse.
• Contorno: un bordo sottile intorno a ogni scheda, che assume il colore di accento al passaggio del mouse.
• Sezione scura: posa tutto il carosello su uno sfondo scuro, con titolo e paginazione adattati.

Regolazioni complementari

• Allineamento del titolo: sinistra, centro o destra, la sottolineatura di accento lo segue.
• Colore di accento: usato per le frecce al passaggio del mouse, la paginazione attiva e la sottolineatura del titolo. Lasciatelo vuoto per ereditare il colore principale del vostro tema.
• Frecce: visibili o nascoste, in tre stili (cerchio, quadrato, minimal senza sfondo).
• Paginazione: punti o barre, generata automaticamente in base al numero di pagine.

Comportamento

• Autoplay: scorrimento automatico con ritardo configurabile (5 000 ms per impostazione predefinita, minimo 1 000 ms). La riproduzione si mette in pausa quando la scheda del browser è nascosta.
• Pausa al passaggio del mouse: sospende l’autoplay finché il cursore è sul carosello.
• Loop infinito: il carosello riparte dall’inizio senza scatti, grazie alla clonazione trasparente delle estremità. Senza questa opzione, le frecce si disattivano alle estremità.

Qualunque sia la regolazione, il carosello si comanda con il dito (swipe touch e mouse, con protezione dai clic accidentali a fine gesto), con la tastiera (frecce sinistra e destra quando il carosello ha il focus), e rispetta il senso di lettura RTL così come la preferenza di sistema prefers-reduced-motion.

Rendering nativo del tema: come funziona

• I prodotti sono assemblati e presentati da ProductAssembler e ProductPresenter, i meccanismi che PrestaShop stesso usa per i suoi elenchi.
• Ogni scheda è poi renderizzata dal template catalog/_partials/miniatures/product.tpl del vostro tema attivo: prezzi, sconti, flag, vista rapida e aggiungi al carrello sono quelli del tema, senza alcun adattamento.
• Il modulo non scrive mai nei file del tema: carica il proprio foglio di stile per la meccanica del carosello, dopo il CSS del tema.
• Un prodotto in errore viene ignorato silenziosamente invece di rompere tutto il carosello.

Multinegozio

Ogni carosello è associato ai negozi del contesto al momento del salvataggio. Per creare un carosello per un negozio preciso, posizionatevi nel suo contesto con il selettore multinegozio prima di crearlo. Un carosello salvato nel contesto «Tutti i negozi» viene visualizzato ovunque.

Risoluzione dei problemi

• Il carosello non appare: verificate nell’ordine che il carosello sia attivo, che la sua fonte restituisca almeno un prodotto (una categoria vuota o una selezione manuale di prodotti disattivati producono un carosello muto), che l’hook scelto esista sulla pagina visitata, e svuotate la cache di PrestaShop (Parametri avanzati > Prestazioni).
• L’hook personalizzato non mostra nulla: il nome in {hook h='...'} deve corrispondere esattamente al nome registrato, prefisso display incluso, visibile nella colonna Hook dell’elenco. Dopo aver aggiunto la chiamata a un template, svuotate la cache Smarty.
• Le frecce non appaiono: si nascondono automaticamente quando tutti i prodotti stanno in una sola riga. Aggiungete prodotti o riducete il numero di colonne.
• Lo skin Card o Contorno rende male con il mio tema: alcuni temi applicano già ombre e bordi alle loro miniature. Tornate allo skin Classico, che non tocca nulla, o Minimal, che neutralizza gli effetti del tema.
• Due caroselli nell’ordine sbagliato sullo stesso hook: regolate il loro campo Posizione, la visualizzazione segue l’ordine crescente.
• La ricerca prodotti non suggerisce nulla: la ricerca parte da due caratteri e interroga nomi e riferimenti della lingua in corso di modifica.

Disinstallazione

La disinstallazione rimuove le tre tabelle, la scheda back-office e gli hook registrati. Il vostro tema e i vostri template restano intatti; solo le chiamate {hook h='...'} che avete aggiunto manualmente ai vostri template vanno rimosse a mano (un hook senza modulo in ascolto semplicemente non mostra nulla e non produce alcun errore).