dfvariantswatch — Campioni varianti foto & stock

Panoramica

dfvariantswatch sostituisce i menu a tendina delle combinazioni sulle schede prodotto PrestaShop con campioni visivi cliccabili (foto, colori o testo), mostra un’anteprima della variante nella galleria principale al passaggio del cursore e indica lo stock di ogni variante direttamente sul campione.

Il modulo funziona migliorando i widget nativi di PrestaShop tramite JavaScript: non sostituisce alcun template del tema, il che lo mantiene compatibile con Classic, Hummingbird e la maggior parte dei temi premium.

Installazione

1. Back office → Moduli → Gestione moduli → Carica un modulo
2. Trascinate l’archivio dfvariantswatch.zip e cliccate su Installa
3. Cliccate su Configura per aprire le impostazioni

L’installazione crea la tabella df_variant_swatch, la cartella immagini img/dfvariantswatch/ e i valori di configurazione predefiniti. Nessuna modifica al tema è necessaria.

Come vengono scelti i campioni

Per ogni attributo, il modulo sceglie la fonte del campione in questo ordine di priorità:

1. Immagine caricata nel back office per quell’attributo (scheda Campioni per attributo)
2. Codice colore esadecimale definito nel back office
3. Immagine derivata automaticamente dalla prima combinazione che usa quell’attributo
4. Colore nativo di PrestaShop dell’attributo (campo colore del gruppo)
5. Chip di testo con il nome dell’attributo

La salvaguardia dei gruppi non differenziati

La derivazione automatica viene conservata solo quando le immagini differiscono realmente tra gli attributi del gruppo, o quando il gruppo è contrassegnato come gruppo di colori in PrestaShop. In pratica: su un prodotto con un gruppo Taglia (S, M, L, XL) le cui combinazioni condividono le stesse foto, le taglie restano in chip di testo invece di mostrare quattro volte la stessa foto.

Configurazione

Impostazioni generali

• Attivare il modulo — spegne il rendering front senza disinstallare
• Cambiare galleria al passaggio — anteprima della variante al passaggio su un campione
• Mostrare il badge di stock — stato di disponibilità sotto ogni campione
• Nascondere le varianti esaurite — nasconde completamente i campioni esauriti invece di barrarli
• Forma — rotonda, quadrata o pillola; Dimensione in pixel
• Soglia scorte basse — al di sotto, il badge passa allo stato di scorte basse
• Etichette di stock — i tre testi sono personalizzabili e traducibili via Localizzazione → Traduzioni
• Modalità di caricamento dati — Inline (consigliata) o AJAX, vedere sotto
• Gruppi non resi come campioni — i gruppi selezionati mantengono il loro widget nativo

Campioni per attributo

Questa scheda elenca tutti i gruppi di attributi del negozio. Per ogni valore potete caricare un’immagine (jpg, png, webp o gif, 2 MB massimo, 200 per 200 pixel consigliato) o inserire un codice colore in formato #RRGGBB, visualizzare in anteprima il campione attuale ed eliminarne uno esistente.

Modalità di caricamento dati

Inline (predefinita, consigliata): i dati delle varianti sono incorporati nella pagina al momento del rendering. Nessuna chiamata AJAX al caricamento, visualizzazione immediata dei campioni, massima robustezza.

AJAX: i dati vengono recuperati dopo il caricamento della pagina. Riservate questa modalità ai negozi dietro una cache full-page aggressiva dove la freschezza dello stock mostrato conta più della velocità di visualizzazione.

Accessibilità da tastiera

Il selettore implementa il pattern WAI-ARIA radiogroup: il tasto Tab porta il focus sulla variante selezionata del gruppo (un solo punto di tabulazione per gruppo), le frecce navigano e selezionano all’interno del gruppo con ciclo continuo saltando le varianti non disponibili, Spazio o Invio conferma il campione focalizzato. Gli stati vengono annunciati agli screen reader tramite aria-checked e i tooltip rispettano prefers-reduced-motion.

Personalizzazione CSS

Le variabili CSS esposte permettono di regolare l’aspetto dal CSS del vostro tema figlio senza toccare il modulo:

.dfvs-swatch {
    --dfvs-size: 56px;   /* dimensione dei campioni */
}
.dfvs-swatch.dfvs-active {
    box-shadow: 0 0 0 2px #b8860b; /* anello della variante attiva */
}

Per disattivare l’anteprima al passaggio su un prodotto specifico, aggiungete un elemento con l’attributo data-dfvs-disable-hover nel template del prodotto.

Risoluzione dei problemi

I campioni non compaiono

• Verificate che il modulo sia attivato nella sua configurazione
• Aprite la console del browser: il modulo traccia i suoi passaggi con il prefisso [dfvariantswatch] — vedrete il numero di gruppi resi o il motivo per cui nulla è stato reso
• Il prodotto deve avere combinazioni; un prodotto semplice non mostra nulla, è normale

Le taglie compaiono in testo e non in foto

È il comportamento atteso della salvaguardia: i valori del gruppo condividono le stesse foto di combinazioni. Caricate immagini dedicate per taglia nella scheda Campioni per attributo se desiderate dei visual (per esempio pittogrammi di taglie).

Il blocco nativo ricompare dopo un clic

Il modulo riapplica l’occultamento dopo ogni aggiornamento AJAX di PrestaShop. Se un tema molto personalizzato aggira gli eventi standard, contattate il supporto con l’URL della scheda prodotto interessata.

Disinstallazione

La disinstallazione rimuove la tabella del modulo, le immagini caricate in img/dfvariantswatch/ e tutte le chiavi di configurazione. Le foto delle vostre combinazioni, ovviamente, non vengono toccate.