Modulo Quick View PrestaShop 8/9 — Documentazione

Presentazione

DF Quick View sostituisce l’anteprima rapida nativa del suo tema PrestaShop con una finestra moderna: galleria di immagini completa, selezione delle combinazioni in tempo reale, indicatore di disponibilità, selettore di quantità e aggiunta al carrello in AJAX. Grazie al precaricamento al passaggio del mouse, la finestra si apre all’istante e il cliente resta nella pagina di categoria per tutto il percorso.

Il modulo non sovrascrive alcun template del tema: si innesta tramite l’hook standard actionFrontControllerSetMedia e lavora lato browser sulle miniature prodotto esistenti. Il JavaScript è nativo, senza jQuery né dipendenze esterne.

Prerequisiti

• PrestaShop 8.0 a 9.x
• PHP 7.4 o superiore
• Un tema che mostri le miniature prodotto nelle pagine di elenco (il tema Classic e i suoi temi figli funzionano senza configurazione)

Installazione

1. Scarichi l’archivio dfquickview-1.0.0.zip dal suo account cliente DataFirefly.
2. Nel back office, vada su Moduli > Gestore dei moduli, clicchi su Carica un modulo e rilasci l’archivio.
3. Clicchi su Installa, poi su Configura.

Non viene creata alcuna tabella nel database: il modulo memorizza solo le sue impostazioni nella tabella di configurazione di PrestaShop. La disinstallazione è pulita ed elimina tutte le sue chiavi.

Configurazione

Modalità di attivazione

Tre modalità determinano come si apre la finestra:

• Intercettazione — il modulo cattura i collegamenti di anteprima rapida del suo tema (gli elementi con le classi .quick-view, .js-quick-view o l’attributo data-link-action="quickview") e apre al loro posto la propria finestra. Il comportamento nativo viene neutralizzato.
• Inserimento — il modulo aggiunge un proprio pulsante sovrapposto su ogni miniatura prodotto. Utile se il suo tema non offre alcuna anteprima rapida.
• Entrambe (consigliata, valore predefinito) — entrambi i meccanismi sono attivi.

Selettore CSS delle miniature prodotto

Il modulo deve sapere quali elementi della pagina sono miniature prodotto. Il valore predefinito, .product-miniature, .js-product-miniature, copre il tema Classic e la grande maggioranza dei temi figli.

Se il suo tema usa una struttura diversa, apra una pagina di categoria, ispezioni il contenitore di un prodotto negli strumenti per sviluppatori del browser e riporti qui la sua classe. Il modulo cerca poi l’identificativo del prodotto nell’attributo data-id-product all’interno della miniatura e, in mancanza, lo deduce dall’URL del collegamento al prodotto.

Precaricamento intelligente

Attivo per impostazione predefinita. Non appena il cursore si sofferma su una miniatura per la durata del ritardo di precaricamento (120 ms per impostazione predefinita), il modulo recupera i dati del prodotto in secondo piano e precarica la sua prima immagine. Al clic è tutto già in memoria: la finestra si apre senza latenza.

Su mobile, il precaricamento si attiva al primo contatto tattile con la miniatura.

Viene inviata una sola richiesta per prodotto, anche se il visitatore passa più volte sulla stessa miniatura. Se teme un carico eccessivo sul server, aumenti il ritardo (da 300 a 500 ms filtra i passaggi involontari) oppure lo disattivi: la finestra si caricherà allora al clic, mostrando uno scheletro di caricamento animato.

Durata della cache lato cliente

I dati prodotto recuperati vengono conservati nella sessione del browser per la durata indicata (300 secondi per impostazione predefinita). Un visitatore che riapre la stessa finestra non genera alcuna nuova richiesta.

La cache è isolata per lingua, valuta, negozio e gruppo cliente: un visitatore non può mai vedere un prezzo calcolato per un altro gruppo. Imposti il valore a 0 per disattivare completamente la cache di sessione (la cache in memoria della pagina resta attiva).

Contenuto visualizzato

• Mostrare la descrizione breve — mostra il riepilogo del prodotto nella finestra (nascosto su mobile per risparmiare spazio).
• Mostrare il riferimento prodotto — mostra il riferimento del prodotto, o quello della combinazione selezionata se ne possiede uno.
• Mostrare il collegamento «Vedi la scheda prodotto» — aggiunge un collegamento alla scheda completa sotto il pulsante di aggiunta al carrello.

Caricare su tutte le pagine

Per impostazione predefinita, le risorse del modulo vengono caricate solo sulle pagine di elenco: home, categorie, ricerca, marchi, fornitori, offerte, novità e più venduti. Attivi questa opzione se mostra miniature prodotto altrove: pagine CMS, blocchi personalizzati, moduli di terze parti.

Colore d’accento

Determina il colore dei pulsanti, dei contorni di selezione e degli stati attivi nella finestra. Inserisca un colore esadecimale in linea con la sua identità visiva.

Funzionamento della finestra

Galleria

La finestra mostra tutte le immagini del prodotto: immagine principale, miniature cliccabili sotto, frecce precedente e successiva. È supportata la navigazione da tastiera (frecce sinistra e destra per cambiare immagine, tasto Esc per chiudere) e lo scorrimento tattile funziona su mobile.

Se la combinazione selezionata ha immagini associate in PrestaShop, la galleria si limita automaticamente a tali immagini. Altrimenti restano visibili tutte le immagini del prodotto.

Combinazioni

I gruppi di attributi vengono resi secondo il tipo configurato in PrestaShop:

• Campione di colore — i gruppi contrassegnati come gruppi di colore mostrano un cerchio, con la texture se esiste un file di texture per l’attributo, altrimenti con il colore esadecimale.
• Elenco a discesa — i gruppi di tipo «elenco a discesa» mostrano un menu.
• Pulsante — gli altri gruppi mostrano pulsanti rettangolari cliccabili.

A ogni cambio di selezione, il modulo ricalcola la combinazione corrispondente e aggiorna prezzo, prezzo barrato, percentuale di sconto, riferimento, disponibilità, quantità minima e immagini.

Due stati visivi segnalano i vicoli ciechi:

• Attenuato — l’attributo, combinato con la selezione in corso, non corrisponde ad alcuna combinazione esistente.
• Sfumato — la combinazione esiste ma è esaurita, e il prodotto non consente l’ordine in mancanza di disponibilità.

Disponibilità e quantità

Vengono mostrati tre stati a seconda della disponibilità della combinazione selezionata: disponibile, ordinabile (ordine consentito anche senza scorte) oppure esaurito (il pulsante di aggiunta viene disattivato).

Il selettore di quantità rispetta la quantità minima definita sul prodotto o sulla combinazione: si inizializza su tale valore e impedisce di scendere al di sotto.

Aggiunta al carrello

L’aggiunta viene inviata in AJAX al controller carrello nativo di PrestaShop. In caso di successo, il modulo emette l’evento updateCart del framework di front office: il blocco carrello della sua intestazione si aggiorna automaticamente, senza ricaricare.

Gli errori restituiti dal negozio — esaurito, quantità minima non raggiunta, prodotto non disponibile — vengono mostrati nella finestra, sotto il pulsante.

I prodotti con campi di personalizzazione obbligatori non possono essere aggiunti al carrello da una finestra: il modulo mostra un messaggio e invita il cliente ad aprire la scheda prodotto completa.

Compatibilità con la navigazione a faccette

Quando il cliente applica un filtro, PrestaShop sostituisce l’elenco dei prodotti senza ricaricare la pagina. Il modulo rileva l’evento updateProductList e sorveglia anche le modifiche del documento: i suoi pulsanti vengono reinseriti automaticamente sulle nuove miniature, senza alcun intervento da parte sua.

Risoluzione dei problemi

Nessun pulsante appare sulle miniature

Verifichi prima di tutto che la modalità di attivazione includa l’inserimento («Inserimento» o «Entrambe»). Poi controlli il selettore CSS delle miniature: apra una pagina di categoria, ispezioni il contenitore di un prodotto e confermi che corrisponda al selettore configurato. Infine, si assicuri che la miniatura contenga un attributo data-id-product o un collegamento alla scheda prodotto.

La finestra non si apre al clic sull’anteprima rapida del tema

La modalità di attivazione deve includere l’intercettazione («Intercettazione» o «Entrambe»). Alcuni temi usano classi non standard per il loro pulsante: in tal caso, passi alla modalità «Inserimento» e nasconda il pulsante nativo del suo tema con una regola CSS nel suo foglio di stile personalizzato.

Le risorse non si caricano su una pagina specifica

Il modulo carica le sue risorse solo sulle pagine di elenco standard. Se mostra miniature prodotto su una pagina CMS o all’interno di un modulo di terze parti, attivi l’opzione Caricare su tutte le pagine.

Le modifiche alla configurazione non sono visibili

Svuoti la cache di PrestaShop (Parametri avanzati > Prestazioni > Svuota la cache) e ricarichi la pagina forzando l’aggiornamento del browser. Se ha modificato la durata della cache lato cliente, i visitatori già in sessione conservano i loro dati fino alla scadenza.

Il prezzo nella finestra non corrisponde a quello dell’elenco

I prezzi della finestra sono calcolati lato server con lo stesso metodo della scheda prodotto, tenendo conto del gruppo cliente, della valuta e delle imposte. Se la differenza persiste, verifichi che il suo tema non applichi una visualizzazione dei prezzi personalizzata sulle miniature e svuoti la cache lato cliente impostandone temporaneamente la durata a 0.

Disinstallazione

Dal gestore dei moduli, scelga Disinstalla. Tutte le chiavi di configurazione del modulo vengono eliminate. Nessun dato di prodotto o di ordine viene modificato.