Archivi categoria: Prestashop

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.

Prestashop custom home page templating

You can include your custom header and footer by modifying the file \themes\default-bootstrap\layout.tpl

Simply so if the current page is index (Home Page) you can include another custom header-home.tpl.
In this header you can set another css for example to show/hide elements of page as menu or slide.
With this simple method you can so manage different layouts according to where you are in the site. The same mechanism you can apply for footer.

Method Two 

You can also override the directory of theme, if you go in the function getLayout, you can discover where is the directory you can put the file layout.

Trying to add this code (echo $layout_override_dir.’layout-‘.$entity.’.tpl’;) I discovered the file name to be put: /default-bootstrap/override/layout-index.tpl

So let’us create this file.
Here the code to show custom layout:

As you can see i use my custom header-home.tpl.
To modify the content of home-page is enough to change in the root theme folter the file index-home.tpl, infact this file contains the hook $HOOK_HOME, containing the output of the modules installed in the site. It is also included the hook for tab content home page. Let us see the file to understand. I included comment start and end to see where starts and finishes the hook.

 

Prestashop – Come far funzionare Google Maps – Bug sui Nostri Negozi

Google Maps richiede un api key.
Dobbiamo andare al seguente indirizzo e creare un progetto e una api key da utilizzare nel nostro sito Prestashop: https://console.developers.google.com/apis/
Al momento non è stato aggiornato Prestashop per risolvere questo problema.
Dal menu MyProject selezionamo un progetto o creiamone uno nuovo.
Creiamo una credential, verrà visualizzata l’api key da usare in Prestashop. Dobbiamo anche essere certi che le api di Google Maps siano abilitate.

PrestaShop modifica Controller

Apriamo un editor di testo ed apriamo il \controllers\front\StoresController.php alla riga 289 modifichiamo come segue:

Salviamo e andiamo a verificare che funzioni tutto correttamente. La spiegazione di tale codice è che la chiamata a google necessita di un parametro aggiuntivo che è la chiave identificativa, così chiamata Api Key.

Prestashop – come aggiungere un riquadro nel footer

Vediamo la procedura per aggiungere una foto linkata all’interno di un box nel footer del tema di prestashop.

Andiamo in moduli e servizi. Cerchiamo Theme Configurator.

theme-configurator

Clicchiamo su Configura.
Clicchiamo su Add item.

Inseriamo un titolo per l’immagine.
All’altezza delle voce hook, inseriamo Footer.
Scegliamo larghezza e altezza, url ed eventuale html che apparirà dopo l’immagine. Chiaramente possiamo anche inserire un semplice blocco html senza immagine.

footer-example

 

 

Prestashop gestire le proprietà dei prodotti

In Prestashop possiamo aggiungere delle proprietà dei prodotti.

Vediamo come fare per creare e per aggiungere anche i filtri in riepilogo categoria di Prestashop.

In amministrazione selezioniamo Catalogo -> Caratteristiche -> Aggiungi una nuova caratteristica, nella maschera che si presenta, come nome inseriamo ad esempio “Spessore”, clicchiamo su Salva.

A questo punto aggiungiamo i valori, cliccando su Aggiungi un nuovo valore della caratteristica, selezioniamo appunto Spessore nella casella e come valore mettiamo Largo, poi clicchiamo su Salva quindi aggiungi un altro valore. Facciamo la stessa cosa inserendo “Piccolo”.

Nel riepilogo delle caratteristiche, se clicchiamo sul numero, possiamo modificare i valori inseriti in precedenza.

Per verificare che sia stato inserito tutto correttamente, andiamo in un qualsiasi prodotto, e verifichiamo che siano presenti queste caratteristiche.

Tali caratteristiche si trovano nella scheda “funzioni” della maschera modifica prodotto.

spessore

Si vede appunto una casella di riepilogo ( menu a tendina) dove poter scegliere le features del prodotto.

Salviamo il prodotto ed ora procediamo a fare visualizzare nei filtri questa nuova feature prodotto.

Clicchiamo su moduli -> moduli e servizi -> nella casella di ricerca inserire filter, verrà così trovato il modulo deputato alla visualizzazione filtri. Clicchiamo quindi su Configura. Di default viene installato un template che gestisce come visualizzare i filtri. Clicchiamo su modifica. Possiamo selezionare le categorie per cui usare questo template.  Cerchiamo la feature Spessore e clicchiamo su sì per abilitarla. Clicchiamo su Salva.

Ora per testare andiamo nel Front-end del nostro sito Prestashop, clicchiamo sulla categoria del prodotto di cui abbiamo settato questa feature.

 

spessore-colonna-sinistra

I nostri filtri sono operativi per l’utente finale.

Da notare che con Drag and Drop possiamo ordinare l’ordine dei filtri.

 

 

Prestashop – errore 500 internal error – modificando prodotti – Come Risolvere – Prestashop 1.6

Prestashop, benché un grande cms per e-commerce, presenta un lieve bug.

Quando appare questo errore in modifica prodotto , è necessario settare alcune opzioni.

Andiamo nel menu Parametri avanzati -> Prestazioni

 

Nella sezione Smarty settare i parametri  come segue:presta-performance-menu

Sezione Smarty -> ricompila i file del template se sono smarty-corretti-parametristati aggiornati
Cache : sì
Pulisci la cache ogni volta che qualcuno ha fatto delle modifiche

Dopo tutti i vari metodi, tra cui eliminare l’htaccess, questo è stato l’unico che ha funzionato.