Archivi categoria: Moduli

Effetto Zoom su prodotti Prestashop

In questo tutorial vediamo come creare un effetto zoom sui prodotti di Prestashop, utilizzando dei moduli che siano gratuiti.
Un ottimo modulo che permette di farlo è proprio il modulo Prestashop elevateZoom for Prestashop.

Questo modulo potrà essere scaricato dal sito stesso di Prestashop al seguente ElevateZoom for prestashop download .

Il modulo come detto è gratuito e per essere scaricato basta registarsi sempre gratuitamente al sito di Prestashop.
Nella pagina di download è bene selezionare, in base alla propria versione, ad esempio il nostro tutorial fa riferimento alla versione 1.6 di prestashop e quindi andremo a scaricare al versione modulo 1.0.4., chi usa invece versioni precedenti di Prestashop può scaricare la versione 1.0.3 che è compatibile con la versione di Prestashop 1.5

Come installare il modulo ElevateZoom for Prestashop

Come al solito andiamo nell’area amministrazione di Prestashop, come sappiamo è un link diverso, poiché prestashop rinomina la cartella per motivi di sicurezza.

Clicchiamo quindi su Moduli -> Moduli e Servizi .
Clicchiamo il pulsante in alto a destra, Aggiungi nuovo modulo.
Clicchiamo su Scegli un file -> selezioniamo il file scaricato -> clicchiamo su Carica. Una volta caricato procediamo a cliccare su installa modulo.
Se tutto è andato a buon fine, ci ritroviamo nella scheda di configurazione del modulo per poter settare i parametri principali di ElevateZoom for Prestashop.
Il modulo si autoconfigura, ma per poter settare diversi parametri toccherà a noi in base alle nostre esigenze.

Elevate zoom prestashop first configuration window
Elevate zoom prestashop first configuration window

Parametro Activate elevateZoom for product page: selezionando la freccia verde il plugin sarà attivo, viceversa verra disattivato.
Zoom Type: sono tre lens, inner e window, con lens si apre una lente tonda o quadra, al passaggio del mouse sull’immagine, window apre una nuova finestra, mentre inner effettua un effetto zoom al passaggio del mouse sull’immagine.
Fade in delay, determina il tempo prima dell’apparizione dello zoom.
Fade out delay, determina il tempo che passa alla chiusura dello zoom.
Window Position: determina la posizione della finestra, sono 16 posizioni.

window positions Elevator Zoom for Prestashop
window positions Elevator Zoom for Prestashop

Scroll with mousewheel: determina cosa fare con la rotella del mouse, di default usando la rotellina del mouse, viene ingrandito il livello di Zoom dell’immagine.

Cursor Type: crossair,pointer, moz-zoom-in, consigliato moz-zoom-in, che è l’immagine cursore più vicina al nostro caso.

Use tint: se usare un colore particolare sull’immagine ingrandita, di default non è attivo, ma attivarla se si vuole un colore particolare sull’immagine ingrandita.

Tint Color: il colore della tinta durante lo zoom

Tint opacity: l’opacità della colorazione tinta

Lens shape: la forma della lente, può essere square (quadrata),  o rotonda (round).

Lens Size: la grandezza della lente, inserire un valore in base alle proprie esigenze di layout, 300 potrebbe essere ok.

Extra parameters: parametri extra passati al Javascript di Elevator, esempio zoomWindowWidth:300, zoomWindowHeight:100, ma possono essere passati tutti i parametri di configurazione che questo Javascript include.

Additional Code: è il Javascript che fa partire lo Zoom, necessario per far funzionare la funzione lente, se si conosce Javascript si può inserire il proprio codice di avvio di Elevator.

Clicchiamo su Salva per confermare i nostri parametri.
Se il modulo funziona dovremmo vedere una cosa di questo tipo.

Zoom immagine Prestashop
Zoom immagine Prestashop

Possiamo provare diverse combinazioni, per capire la configurazione che calzo con il nostro sito Prestashop.