Immagine al Passaggio del Mouse e Badge Automatici — Guida di configurazione

Questa guida spiega come installare e configurare il modulo Immagine al Passaggio del Mouse e Badge Automatici per PrestaShop 8 e 9. Il modulo mostra la seconda immagine del prodotto al passaggio del mouse negli elenchi e applica automaticamente i badge Novità, Offerta e Scorte in esaurimento secondo le regole che definisci, senza sovrascrivere il tuo tema.

Installazione

L’installazione funziona come per qualsiasi modulo PrestaShop:

1. Dal back office, vai su Moduli > Gestore moduli.
2. Clicca su Carica un modulo e rilascia l’archivio ZIP del modulo.
3. Una volta completata l’installazione, clicca su Configura per aprire la pagina delle impostazioni.

Il modulo registra l’hook actionFrontControllerSetMedia e carica le sue risorse (CSS e JavaScript) solo sulle pagine di elenco e sulla pagina prodotto. Nessun file di template viene sovrascritto.

Impostazioni dell’immagine al passaggio del mouse

Il primo blocco di configurazione controlla lo scambio dell’immagine al passaggio del mouse:

• Mostra la seconda immagine al passaggio del mouse: attiva o disattiva l’effetto. I prodotti con una sola immagine vengono ignorati automaticamente.
• Effetto di transizione: Dissolvenza, Dissolvenza + zoom o Istantaneo.
• Posizione dei badge: l’angolo in cui compaiono i badge (in alto a sinistra, in alto a destra, in basso a sinistra, in basso a destra). Questa impostazione è comune a tutti i badge.

L’immagine hover è la seconda immagine del prodotto secondo l’ordine di posizione definito nella scheda Immagini della pagina prodotto. Per cambiare l’immagine mostrata al passaggio del mouse, riordina semplicemente le immagini del prodotto.

I tre badge automatici

Ogni badge può essere attivato in modo indipendente, con la propria etichetta multilingua, colore di sfondo e colore del testo.

Badge «Novità»

Viene mostrato per un numero di giorni configurabile dopo la data di creazione del prodotto. Il valore predefinito riprende l’impostazione PrestaShop PS_NB_DAYS_NEW_PRODUCT. Imposta la durata desiderata nel campo Prodotto considerato nuovo per (giorni).

Badge «Offerta»

Compare quando un prodotto è contrassegnato come «In saldo» o quando è attivo un prezzo specifico con riduzione per il contesto del visitatore (negozio, valuta, paese, gruppo cliente e date di validità). L’opzione Mostra la percentuale di sconto sostituisce l’etichetta con il valore, ad esempio -20 %, quando la riduzione è percentuale.

Badge «Scorte in esaurimento»

Compare quando la quantità disponibile del prodotto è strettamente maggiore di 0 e inferiore o uguale alla soglia di scorte in esaurimento che definisci. La quantità viene letta dalla tabella stock_available con risoluzione multi-negozio (il negozio corrente ha priorità sul gruppo di negozi).

Etichette multilingua

Le etichette Novità, Offerta e Scorte in esaurimento sono fornite per impostazione predefinita in francese, inglese, spagnolo, tedesco e italiano. Ogni etichetta è modificabile lingua per lingua dalla pagina di configurazione: seleziona la lingua nel selettore del campo, quindi inserisci il testo desiderato.

Prestazioni e compatibilità

• Un’unica chiamata AJAX raggruppata per pagina recupera i dati di tutti i prodotti visibili (fino a 120 prodotti per lotto).
• L’immagine hover viene caricata in lazy load, solo al primo passaggio del mouse.
• Lo script è JavaScript vanilla, senza dipendenza da jQuery.
• Il modulo rileva le miniature dei prodotti in JavaScript: è compatibile con il tema classic e i temi figli, e si riadatta automaticamente dopo la navigazione a faccette e la paginazione AJAX.
• Su mobile touch, lo scambio dell’immagine al passaggio del mouse viene disattivato automaticamente.

Risoluzione dei problemi

Il passaggio del mouse non mostra una seconda immagine. Verifica che il prodotto abbia almeno due immagini nella scheda Immagini della sua pagina, e che l’opzione immagine al passaggio del mouse sia attivata.

Un badge non compare. Assicurati che il badge sia attivato, che la sua etichetta non sia vuota per la lingua corrente, e che la condizione sia soddisfatta (prodotto recente, prezzo specifico attivo, o quantità sotto la soglia).

Non viene mostrato nulla dopo un filtro. Il modulo si riadatta dopo la navigazione a faccette; se il tuo tema usa un meccanismo di rendering personalizzato, svuota la cache di PrestaShop (Parametri avanzati > Prestazioni) dopo l’installazione.