# 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…

- Pagina: <https://www.datafirefly.com/it/documentation/image-survol-badges-prestashop/>
- Lingua: it
- Aggiornato il: 2026-07-15
- Altre lingue: [fr](https://www.datafirefly.com/documentation/image-survol-badges-prestashop/index.md), [en](https://www.datafirefly.com/en/documentation/image-survol-badges-prestashop/index.md), [es](https://www.datafirefly.com/es/documentation/image-survol-badges-prestashop/index.md), [de](https://www.datafirefly.com/de/documentation/image-survol-badges-prestashop/index.md), [pl](https://www.datafirefly.com/pl/documentation/image-survol-badges-prestashop/index.md), [pt](https://www.datafirefly.com/pt/documentation/image-survol-badges-prestashop/index.md), [nl](https://www.datafirefly.com/nl/documentation/image-survol-badges-prestashop/index.md)
- Indice: <https://www.datafirefly.com/it/documentation/llms.txt>

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.