La lista prodotti smette di essere un vicolo cieco
Un visitatore che scorre una pagina categoria ha una sola domanda in testa: è questo il prodotto giusto? Rispondere costa normalmente un clic per entrare nella scheda prodotto e un altro per tornare indietro — e ognuno di questi viaggi di andata e ritorno è un'occasione per perderlo.
Questo modulo risponde alla domanda dove il visitatore già si trova. Basta puntare una foto, oppure cliccare un piccolo pulsante a forma di lente, e un popup di anteprima si apre sopra la lista: le immagini del prodotto in uno slider, il nome, il prezzo, la descrizione breve e il badge New (nuovo) oppure On sale (in offerta). Nessun ricaricamento della pagina, niente da installare nel tema.
Al passaggio del mouse o al clic — decidete voi
Impostate l'attivazione al passaggio del mouse e l'anteprima segue l'attenzione del visitatore senza un solo clic. Impostatela al clic e sulla foto compare invece un piccolo pulsante a forma di lente.
La modalità clic è rigorosa su un punto che conta davvero: un clic normale sulla foto continua ad aprire la scheda prodotto. Solo il pulsante lente apre l'anteprima. Chi sa già cosa vuole non viene mai intercettato.
Due layout
Il layout verticale mette l'immagine principale in alto con una striscia di miniature sotto. L'orizzontale mette l'immagine a sinistra e i dettagli a destra. Condividono lo stesso foglio di stile e lo stesso template — passare dall'uno all'altro è un'impostazione, non un altro percorso di codice.
Nel layout verticale, puntare una miniatura qualsiasi cambia subito l'immagine principale. Lo slideshow opzionale scorre le foto con l'intervallo che scegliete tra 1000 e 20000 ms, e si mette in pausa mentre il visitatore punta l'immagine, così non porta mai via una foto a chi la sta guardando davvero.
Da sapere prima di scegliere: la striscia di miniature fa parte del solo layout verticale. Nel layout orizzontale le foto si raggiungono attraverso lo slideshow, quindi se scegliete l'orizzontale e disattivate lo slideshow, i visitatori vedranno sempre e solo la prima immagine.
Il prezzo mostrato è il prezzo che pagherebbero
Viene calcolato lato server, non indovinato nel browser. Il popup usa la valuta del visitatore, le regole fiscali che si applicano a lui e il suo gruppo di clienti — compreso il fatto che quel gruppo possa vedere i prezzi oppure no.
Se il negozio funziona in modalità catalogo, se il prodotto ha i prezzi disattivati, oppure se il gruppo del visitatore non può vedere i prezzi, il blocco prezzo non viene mostrato. Non dovete ricordarvi di disattivarlo.
Badge che dicono la verità
Il badge New (nuovo) compare solo sui prodotti davvero recenti, in base all'impostazione del vostro negozio numero di giorni per cui il prodotto è considerato nuovo — quindi sparisce da solo quando un prodotto smette di essere nuovo.
On sale (in offerta) segue la casella Mostra il badge "In saldo!" nella scheda Prezzi del prodotto stesso. Deliberatamente non si basa sugli sconti: un prodotto con prezzo ribassato non riceve alcun badge "On sale" se non lo avete effettivamente contrassegnato come in offerta. Il punto è proprio questo — il badge significa quello che avete detto voi, non quello che ha fatto un prezzo specifico.
Sopravvive alla ricerca a faccette e allo scorrimento infinito
Gli eventi sono delegati, quindi le schede prodotto che compaiono dopo il caricamento della pagina — filtrate dalla ricerca a faccette, aggiunte dallo scorrimento infinito, sostituite da un modulo di terze parti — funzionano subito. Non c'è nessun passaggio di reinizializzazione e niente da ricollegare.
Un solo interruttore per il Quick view del tema
Quasi tutti i temi hanno un proprio pulsante Quick view, e due popup in concorrenza sono una pessima esperienza. Invece di dirvi di andare a modificare il tema, il modulo può nascondere quel pulsante al posto vostro con un singolo interruttore.
Conosce sia il markup di Classic (.quick-view, [data-link-action="quickview"]) sia quello di Hummingbird (.product-miniature__quickview-button, [data-ps-action="open-quickview"]). E gestisce il dettaglio che di solito qui va storto: il pulsante si trova spesso dentro un pannello bianco che appare al passaggio del mouse, per cui nascondere solo il pulsante lascia una fascia bianca vuota sulla scheda. Il modulo misura cosa contiene davvero quel pannello — se il Quick view era l'unica cosa presente sparisce l'intero pannello, e se il pannello ospita anche le varianti di colore quelle restano visibili.
Dove compare, e dove deliberatamente no
L'anteprima si carica sulle pagine home, categoria, risultati di ricerca, marca, fornitore, novità, più venduti e offerte — e anche sulla scheda prodotto, così che i blocchi Prodotti della stessa categoria e Prodotti visti la abbiano ugualmente.
Il checkout non viene mai toccato. Là non viene caricato assolutamente nulla.
Gli smartphone mantengono il comportamento di sempre
Il passaggio del mouse non esiste su uno schermo touch, e un popup di anteprima che litiga con un tocco è peggio di nessuna anteprima. Impostate una larghezza minima dello schermo — 432 px per impostazione predefinita — e al di sotto il modulo si disattiva completamente, lasciando ai visitatori da mobile il comportamento semplice e veloce che si aspettano.
La versione 3 ha sostituito due endpoint davvero insicuri
Vale la pena dirlo chiaramente.
La versione 2.x includeva file ajax/*.php autonomi che avviavano a mano il core di PrestaShop ed erano protetti da un token scritto nel codice — lo stesso valore in ogni installazione del pianeta. Chiunque avesse letto il modulo una volta conosceva il token di tutti i negozi che lo usavano.
La versione 3 li sostituisce con un vero front controller PrestaShop, protetto da un token specifico del negozio, confrontato con hash_equals(). Il controller convalida l'id del prodotto e serve soltanto prodotti attivi, visibili a catalogo e appartenenti al negozio corrente. Tutto il resto riceve un 404 o un 403.
Cos'altro ha corretto la versione 3
La versione 2.x caricava jquery-1.11.0.min.js da un percorso che non esiste in PrestaShop 1.7 e successivi, e questo rompeva il popup in silenzio su parecchi negozi. Includeva inoltre sedici file jQuery, uno per versione, ciascuno con la propria implementazione SHA-1 da 130 righe. Tutto questo è sparito: il front office si regge ora su un unico file JavaScript vanilla, senza dipendenze.
Anche il vecchio trucco del cookie web_url è sparito — la configurazione raggiunge ora il file JavaScript tramite Media::addJsDef.
Gli URL semplificati non contano più. Il prodotto viene identificato attraverso l'attributo data-id-product della scheda stessa, con l'URL come ripiego, invece che analizzando indirizzi riscritti.
I formati immagine vengono rilevati, non scritti a mano nel codice. Il popup sceglie i formati adatti dalle vostre Design → Impostazioni immagini invece di dare per scontati nomi che cambiano da una versione di PrestaShop all'altra, così i temi personalizzati con tipi di immagine rinominati continuano a funzionare.
La versione 3.0.2 l'ha fatto funzionare su Hummingbird
Merita di essere citata perché il problema era invisibile più che rumoroso. Hummingbird genera il link della miniatura come .product-miniature__image-link, dove Classic usa .product-thumbnail / a.thumbnail. Quella classe non era nel selettore di attivazione, quindi su Hummingbird non si apriva proprio nulla — e il pulsante Quick view del tema restava visibile, perché nemmeno i suoi nomi di classe corrispondevano alle regole di occultamento. Ora entrambi vengono riconosciuti accanto al markup di Classic, e il CSS e il JavaScript del front office portano la versione del modulo nel loro URL, così la correzione arriva anche ai visitatori di ritorno senza che nessuno debba svuotare una cache.
La pagina di configurazione si controlla da sola
Ogni volta che la aprite, il modulo esegue quattro verifiche — Modulo attivo, Hook front office, Formati immagine prodotto e Richieste sicure — e vi mostra l'esito di ciascuna. Quando l'anteprima non compare, quel pannello di solito vi dice il perché prima ancora che iniziate a tirare a indovinare. Anche i file rimasti da versioni precedenti alla 3.0.0 vengono ripuliti automaticamente.
Compatibilità
PrestaShop dalla 1.7 alla 9, in otto lingue: francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco.
Nessun override, nessuna modifica al core o al tema, e niente jQuery. L'aggiornamento da una 2.x è automatico: le vostre impostazioni vengono conservate, le nuove opzioni ricevono valori predefiniti sensati e i file obsoleti vengono eliminati al posto vostro.
Domande frequenti
Un clic normale continua ad aprire la scheda prodotto?
Sì. In modalità clic solo il piccolo pulsante lente apre l'anteprima — cliccare sull'immagine si comporta esattamente come ha sempre fatto. In modalità passaggio del mouse nulla intercetta i clic.
Il prezzo nel popup corrisponderà a quello che il cliente paga davvero?
Sì. Viene calcolato sul server usando la sua valuta, le regole fiscali che gli si applicano e il suo gruppo di clienti. In modalità catalogo, o per un gruppo che non può vedere i prezzi, il blocco prezzo non viene mostrato affatto.
Funziona ancora quando filtro una categoria con la ricerca a faccette?
Sì. Gli eventi sono delegati, quindi le schede rigenerate dalla ricerca a faccette o dallo scorrimento infinito continuano a funzionare senza alcuna reinizializzazione.
Il mio tema ha già un pulsante Quick view — mi ritroverò con due popup?
No, se lasciate attiva l'opzione Nascondi il pulsante quick view del tema. Copre sia il markup di Classic sia quello di Hummingbird, e rimuove il pannello circostante solo quando il Quick view ne era l'unico contenuto, così le varianti di colore non vanno perse.
Funziona sugli smartphone?
Per scelta progettuale si disattiva sotto la larghezza schermo che impostate — 432 px per impostazione predefinita — perché il passaggio del mouse non esiste sugli schermi touch. I visitatori da mobile mantengono il comportamento di sempre.
Il mio prodotto scontato non mostra il badge "On sale" — perché?
Perché uno sconto e il flag in offerta sono due cose diverse. Il badge segue la casella Mostra il badge "In saldo!" nella scheda Prezzi del prodotto, non i suoi prezzi specifici. Spuntate quella casella e il badge compare. Il badge New (nuovo) invece è automatico e segue l'impostazione del vostro negozio "numero di giorni per cui un prodotto è considerato nuovo".
Rallenta le mie pagine prodotto?
L'HTML del popup viene richiesto solo quando un visitatore apre davvero un'anteprima, e la risposta viene messa in cache privata per un minuto. La pagina in sé carica un piccolo foglio di stile e un piccolo file JavaScript vanilla, e assolutamente nulla sul checkout.
Sto aggiornando da una 2.x — devo fare qualcosa?
No. L'aggiornamento conserva le impostazioni esistenti, assegna valori predefiniti sensati alle nuove opzioni ed elimina da solo i vecchi file AJAX autonomi e le risorse specifiche di ogni versione.
Modifica il mio tema o sovrascrive file del core?
No. Un hook di visualizzazione e un front controller, niente altro.
Commenti (2)
Non è stato possibile inviare il tuo giudizio sulla recensione
Segnala commento
Segnalazione inviata
Non è stato possibile inviare la tua segnalazione