Telefono: +39 392 33 73 731
Email: info@zod.it
Se andiamo in area amministrazione di Prestashop, sotto Preferenze > Prodotti troviamo una opzione disabilitata di default, si tratta di "Attiva JqZoom invece di Thickbox nella pagina del prodotto".
Una volta attivata abbiamo un effetto lente di ingrandimento al passaggio del mouse sopra la foto principale della scheda prodotto.
Tuttavia non si tratta di una vera sostituzione di script, Thickbox permane, se clicchiamo sulla foto oppure sui piccoli thumbnail, si apre la foto ingrandita in finestra modale. Di seguito spiego come rimuovere interamente questo comportamento, inoltre ho cambiato l'azione sui thumbnail affinché cambino la foto principale al click invece che al passaggio del mouse.
1. Rimuovere l'etichetta che indica di ingrandire la foto principale: aprire product.tpl del vostro tema. Il codice diventa come segue. Invece di cancellare la parte, l'ho commentata con i commenti Smarty così: {*... parte rimossa... *}
{if $have_image}
<span id="view_full_size">
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"{if $jqZoomEnabled} class="jqzoom"{/if} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
{*<span class="span_link">{l s='Maximize'}</span>*}
</span>
{else}
2. Sempre in product.tpl appena sotto di qualche riga, si deve evitare che al click sui thumbnail si apra Thickbox, il codice diventa come segue, ho sempre usato i commenti.
<li id="thumbnail_{$image.id_image}">
{*<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$image.legend|htmlspecialchars}">*}
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')}" onclick="return false" title="{$image.legend|htmlspecialchars}">
<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
</a>
</li>
3. Adesso aprire il file js/product.js del vostro tema, va cambiato l'evento dei thumbnail, da hover diventa click.
da così:
//hover 'other views' images management
$('#views_block li a').hover(
function(){displayImage($(this));},
function(){}
);
a così:
//click 'other views' images management
$('#views_block li a').click(
function(){displayImage($(this));}
);
4. Sempre in js/product.js mi sono accorto che c'è un bug in versione originale, nella riga seguente bisogna invertire "large" con "thickbox", altrimenti il primo caricamento dello zoom sembra non funzionare, rimane della stessa dimensione dell'immagine originale.
da così:
$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('thickbox', 'large'));
a così:
$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('large', 'thickbox'));
5. Ancora in js/product.js, appena sotto quella riga, ci sono i controlli delle misure del riquadro JqZoom. Io ho cambiato da 200 a 400 e ridotto l'offset così:
$('img.jqzoom').jqueryzoom({
xzoom: 400, //zooming div default width(default width value is 200)
yzoom: 400, //zooming div default width(default height value is 200)
offset: 15 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
6. Infine va rimosso l'evento che apre Thickbox sull'immagine principale, il codice è sempre in seguito, si commenta così:
//add a link on the span 'view full size' and on the big image
//$('#view_full_size, #image-block img').click(function(){
//$('#views_block .shown').click();
//});
Questa parte è opzionale, e serve se non siete soddisfatti dello script originale proposto da Prestashop.
Io l'ho sostituito per avere sul cursore un riquadro corrispondente all'ingrandimento, per ottenerlo bisogna cambiare script. Non è un'operazione difficile, la spiego in altri sei punti.
1. Procurarsi i file di JqZoom 2.3 presso il sito dello sviluppatore Mind-Projects (il sito è andato offline, lo script adesso è reperibile qui). Prelevare il file js, css e l'immaginetta zoomloader.gif
2. Andare nella folder di Prestashop: js/jquery/plugins/jqzoom. Inserire l'immaginetta zoomloader.gif, poi aprire i file jquery.jqzoom.js e jquery.jqzoom.css e sostituire tutto il codice con quello nuovo. Aggiustare il percorso nel css in corrispondenza di background-image: url(zoomloader.gif);
3. Aprire nel vostro tema il file product.tpl. Cambiare il codice dell'immgine principale aggiungendo una <a> come wrapper, con href, id e rel come segue:
<span id="view_full_size">
<a rel='gal1' id="demo1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')}">
<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')}"{if $jqZoomEnabled} class="jqzoom"{/if} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
</a>
</span>
4. Qualche riga più sotto, sempre in product.tpl, cercare dove vengono costruiti i thumbnails, cambiare il codice come segue il link è completamente diverso:
<li id="thumbnail_{$image.id_image}">
<a rel="{ldelim}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')}'{rdelim}"><img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /></a>
</li>
5. Ora aprire il file js/product.js del tema, e rimuovere interamente l'azione sulle immagini thumbnails, perché adesso sono controllate dal nuovo script di JqZoom (il codice lo avevo modificato come da istruzioni precedenti)
va tolto tutto...
//click 'other views' images management
$('#views_block li a').click(
function(){displayImage($(this));}
);
6. Subito sotto si ha la parte che lancia JqZoom, vanno cambiati: il nome della funzione, il selettore, ed anche tutti i parametri, come segue.
//set jqZoom parameters if needed
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
{
$('a#demo1').jqzoom({
zoomType: 'reverse',
lens:true,
title:false,
preloadImages: true,
alwaysOn:false,
zoomWidth: 400,
zoomHeight: 400,
xOffset:15,
yOffset:0,
position:'right'
});
}
Con questo si conclude la guida, se volete lasciate un commento.
Nel 2018 ho scelto Serverplan, leggi l'articolo "La mia esperienza con gli hosting" per conoscere la mia opinione sui servizi e le prestazioni di alcuni famosi provider italiani.
Commento di Matteo
Giovedì 16 Maggio 2013Wow! Grazie mille, stavo proprio cercando di fare l'upgrade di jqzoom, e grazie alla tua guida ha funzionato perfettamente! Mi stavo chiedendo però se sarebbe possibile usare il nuovo jqzoom e CONTEMPORANEAMENTE avere anche il pulsante (<span class="span_link">{l s='Maximize'}</span>) per vedere l'immagine intera nella finestra modale... così l'utente finale avrebbe ancora più scelta, no?
Risposta di Marco
Per farli funzionare insieme potresti evitare di fare la prima parte di modifiche che ho scritto, fai quindi solo l'upgrade a JqZoom. Non ho provato ma dovrebbe andare tutto liscio.
Ho fatto in modo che uno escluda l'altro per essere più in linea con il flag del back end, e perché penso che siano adatti a scopi diversi:
Queste proprietà possono essere viste come vantaggio o svantaggio, nel mio caso, trattandosi di quadri e disegni, il cliente voleva che l'ingrandimento fosse "a lente" e che pennellate, segni, o la trama della tela potessero percepirsi. Cmq preferiva non vedere per intero l'ingrandimento.
JqZoom non è male, mi piace l'effetto. Però io generalmente preferisco Thickbox, è più easy, e funziona anche in mobile. Per i prodotti normali credo sia sufficiente.
Commento di All
Giovedì 06 Giugno 2013Sei un grande, mi hai risparmiato anni di ricerche web! Guida 5 stelle!
Commento di Luca
Sabato 23 Novembre 2013Salve,
ho provato senza sucesso ad aggiornare.
Nella JqZoom 2.3 ci sono 3 file JS
jquery.jqzoom-core.js
jquery.jqzoom-core-pack.js
jquery-1.6.js
nella cartella JS di Prestashop solo uno
jquery.jqzoom.js
non riesco a capire quale dei 3 devo sostituire
a jquery.jqzoom.js ???
Può cortesemente essermi di aiuto ???
Grazie
Luca
Risposta di Marco
I tre file sono:
Quindi nel nostro caso è sufficiente copiare dentro a jquery.jqzoom.js l'intero contenuto di uno dei primi due js, probabilmente il secondo, dato che non bisogna ritoccare in alcun modo quel codice.
Bisogna poi copiare l'intero contenuto anche del css, dentro a jquery.jqzoom.css con attenzione al percorso dell'immaginie di background per il loading.
Se lo script continua a non funzionare, sospetto che il problema sia altrove.
Commento di prezzi economici
Lunedì 31 Marzo 2014Qualcuno sa come attivare i feed rss?
Risposta di Marco
E' tutto automatico, i feed vengono generati per categoria e sono accessibili coi lettori dei browser, per questi non è previsto un bottone del sito. Altrimenti, se lo vuoi fare, bisogna agire manualmente nel template componendo l'url e passando ID categoria, come vedi il link è fatto così, e devi generare ad esempio il "3":
yourdomain.com/modules/feeder/rss.php?id_category=3&orderby=position&orderway=asc
Oppure configuri il bottone presente nel link del footer, non conosco e non ho approfondito, ci sono altre spiegazioni a questo post:
http://www.prestashop.com/forums/topic/269880-understanding-the-rss-feed-in-prestashop-for-products/
Oppure installi un modulo, forse volevi questo?
http://www.inmotionhosting.com/support/edu/prestashop-15/335-rss-feed-module
Commento di DE MARTINO ANTONIO
Venerdì 06 Ottobre 2017Sto utilizzando Prestashop 1.6.1.14 (versione inglese)
Ho grandi difficoltà nell'utilizzo degli attributi e soprattutto nell'associazione delle immagini all'attributo colore
1) una volta create le combinazioni, se ne ho dimenticata qualcuna e voglio tornare al Generatore di Combinazioni per inserirla mi perde molte delle informazioni che sono state generate nelle varie combinazioni (ad esempio la q.ta minima) nonostante l'avviso dica che saranno perse "solo quelle non salvate". Ad esempio l'associazione con la/le immagini selezionate
2) Se ho caricato più immagini alla sezione "immagini" non mi fa vedere le didascalie che ho introdotto ma solo la prima che diventa quella principale. Quindi se ho didscalie su più lingue e voglio cambiare la scritta in una sola lingua, mi tocca riscriverla in tutte le lingue stando attento a non pigiare Upgrade prima di selezionarla, perchè altrimenti mi assegna la didascalia principale a tutte le immagini. Un disastro !!
3) E' un palla pazzesca poi assegnare l'immagine prescelta alla singola combinazione visto che ogni volta bisogna salvare e non si possono fare tutte assieme. Quando si hanno più di cento combinazioni si perdono i riferimenti e si sbagla quasi di certo. Non c'è modo di assegnare l'associazione immagine / attributo prima di far creare la combinazione (come avviene ad esempio per i prezzi )?
4) Sai se nella versione 1.7 qualcuno di questi problemi sarà risolto ? So che hanno cambiato il dashboard
grazie
De Martino Antonio
Risposta di Marco
1) La parte delle combinazioni è abbastanza rigida, io suggerisco di fare prima uno studio preciso di quel che si desidera nei prodotti, quindi usare il generatore una sola volta. Nel caso ci siano modifiche successive, valutare se sia meglio svuotare tutto e rigenerare tutte le combinazioni, oppure usare la procedura di aggiunta manuale per le nuove combinazioni.
2) Per il caricamento delle immagini non c'è molto che si possa fare, se si vogliono didascalie diverse bisogna caricarle una alla volta, altrimenti prendono una didascalia uguale per tutte.
3) Sulla assegnazione delle immagini alle combinazioni, ma anche per ogni altra modifica che si voglia fare, Pretsashop non offre molte alternative: bisogna aprirle una per una e salvarle. Per velocizzare la gestione dei prodotti io ricorro a estensioni. Nello specifico delle immagini per le combinazioni uso uno script gratuito che si chiama Prestools Suite scaricabile nel forum a questo indirizzo. Fa anche molte altre cose utili, l'interfaccia è brutta ma lo strumento è molto potente, io l'ho migliorato ritoccando i CSS e una volta integrato in PS è accettabile. Poi uso anche un modulo a pagamento, si chiama Products Hero e lo trovi a questo indirizzo. Come vedi dalle immagini di esempio ti permette di modificare le informazioni dei prodotti inline, cioè direttamente nella lista, o anche aprendo un popup per modificare la scheda principale, inoltre apre in popup le combinazioni, quindi le puoi aggiornare velocemente da li. Ci sono anche altri moduli di mass edit, dipede da quel che ti serve, prova a cercare nel repository.
4) Non ho ancora provato PS 1.7
Aggiungi un commento