Una lente di ingrandimento per Virtuemart 2

In questo articolo vedremo come implementare l'effetto lente di ingrandimento (magnify glass) per i prodotti di Virtuemart 2.

Il primo passo consiste nel trovare nel trovare l'effetto che ci è gradito. Per questo articolo, che ha principalmente fini didattici, il codice che genera l'effetto deve avere determinate caratteristiche:

• deve essere rilasciato sotto una licenza free ed open source;
• deve essere compatibile con le librerie jQuery native di Virtuemart (v1.7), per non creare conflitti tra le librerie difficilmente risolvibili da chi non è un programmatore;
• deve essere implementabile senza troppe difficoltà;
• deve essere ben configurabile;
• deve adattarsi bene a qualsiasi layout (per questo motivo ho scartato le lenti tonde);
• deve supportare una serie di immagini intercambiabili.

La scelta è caduta sul modulo jQZoom Evolution, che è, oltretutto, un prodotto italiano sviluppato da Mind Projects.

 

Le librerie della Lente di Ingrandimento

Come prima operazione, una volta scaricato il pacchetto dell'effetto, provvediamo a rendere disponibili le librerie necessarie al nostro sistema e-commerce.

All'interno della cartella "/templates" del sito vi è l'elenco dei templates utilizzabili dalla nostra installazione di Joomla!, accediamo alla cartella di quello in uso ed inseriamo i file richiesti rispettando le convenzioni usate dal template.

Nel caso specifico del mio template, tra le varie cartelle, ve ne è una nominata 'js' che contiene i javascripts e una 'css' per i fogli di stile; ho pertanto copiato, dal pacchetto dell'effetto lente, il file 'jquery.jqzoom-core-pack.js' nella prima cartella, ed il file 'jquery.jqzoom.css' nella seconda. Nella cartella dei fogli di stile ho anche creato un file 'jquery.jqzoom.custom.css' destinato a contenere le eventuali modifiche che vorremo apportare al css originario e/o le classi di supporto per VirtueMart.

 

Preparare VirtueMart 2 per la modifica dei templates

È importante, quando si eseguono questi tipi di interventi, lavorare a regola d'arte, in modo che un eventuale aggiornamento del sistema e-commerce, cosa tutt'altro che infrequente con VirtueMart, non vanifichi il lavoro svolto. Pertanto partiremo creando un ovveride per il template della view che andremo a modificare.

All'interno della cartella del nostro template accediamo alla cartella "html" e creiamo, se già non esistono, prima la cartella "com_virtuemart" e poi, al suo interno la cartella "productdetails".

Per maggiori informazioni sulla tecnica degli override fate riferimento alla documentazione di joomla.

Creiamo ora, o editiamo, il file "default_images.php" che è l'estensione (il sub template) del template "default.php" che si occupa di visualizzare l'immagine principale del prodotto e le relative immagini secondarie. Per avere una struttura del file in modo da non perdersi durante la spiegazione potete copiare qui il file originale di VirtueMart che si trova nella cartella "/components/com_virtuemart/views/productdetails/tmpl/".

 

Effetto lente di ingrandimento

Per prima cosa dobbiamo caricare la libreria js e il relativo foglio di stile, nonché il nostro css aggiuntivo. Dato che VirtueMart provvede autonomamente a caricare la libreria jQuery 1.7, non dovremo indicarla tra i file da includere:

<?php
$doc = JFactory::getDocument ();
$tmpl = JApplication::getInstance('site')->getTemplate();
$doc->addScript("/templates/{$tmpl}/js/jquery.jqzoom-core-pack.js", 'text/javascript');
$doc->addStyleSheet("/templates/{$tmpl}/css/jquery.jqzoom.css");
$doc->addStyleSheet("/templates/{$tmpl}/css/jquery.jqzoom.custom.css");
?>
 

 

Inseriamo ora il codice js per l'utilizzo della libreria. Notate che, all'interno di Joomla! e Virtuemart, causa la contemporanea presenza di MooTools, JQuery è sempre caricato in modalità 'no conflict', è pertanto necessario richiamarlo usando il nome esteso e non l'abbreviazione '$', di conseguenza modificheremo il codice nel seguente modo:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.jqzoom').jqzoom({
            zoomType: 'standard',
            lens:true,
            preloadImages: false,
            alwaysOn:false,
            zoomWidth: 400 // questa è la dimensione orizzontale della lente di ingrandimento
        });
});
</script>
 

Inseriamo ora il codice per visualizzare l'immagine principale. Questo è il codice di esempio della libreria, prestate attenzione che la classe associata al link della immagine ("jqzoom") deve corrispondere al selettore passato come parametro a jQuery (vedi sopra), mentre l'attributo "rel='gal1'" serve per permettere il cambio dell'immagine principale, torneremo sull'argomento dopo.

<a href="immagine_grande.jpg" class="jqzoom" rel='gal1'  title="titolo" >
      <img src="immagine_piccola.jpg"  title="titolo">
</a>

Convertiamo il codice di esempio per adattarlo alle variabili disponibili all'interno di VirtueMart, ed otterremo il codice per il nostro template:

<?php $image = $this->product->images[0]; ?>
<div class="mainImage">
   <a href="/<?php echo ($image->file_url); ?>" class="jqzoom" rel='galproducts'  title="<?php echo ($image->file_title); ?>">
      <img src="/<?php echo ($image->file_url_thumb); ?>"  title="<?php echo ($image->file_title); ?>">
   </a>
</div>
 

 

Galleria di miniature (thumbnails)

Come detto, questa libreria prevede anche la possibilità di gestire una serie di miniature (thumbnails), ovvero una serie di immagini associate al prodotto come spesso accade nei vari e-commerce. Di seguito il codice di esempio; i dati inseriti nell'attributo 'rel' del tag 'a' contengono le informazioni necessarie per collegare la galleria all'immagine principale e per impostare la miniatura e lo zoom. Dovremo tener conto anche della classe 'zoomThumbActive' usata dalla libreria per identificare la miniatura attiva.

<ul>
    <li>
        <a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery:'gal1', smallimage:'immagine_piccola_1.jpg', largeimage:'immagine_grande_1.jpg'}">
            <img src='immagine_piccola_1.jpg'>
        </a>
    </li>
    <li>
        <a href='javascript:void(0);' rel="{gallery:'gal1', smallimage:'immagine_piccola_2.jpg', largeimage:'immagine_grande_2.jpg'}">
            <img src='immagine_piccola_2.jpg'>
        </a>
    </li>
    <li>[...]</li>
</ul>
 
 

Convertiamo ora il codice, come abbiamo fatto sopra, per l'uso con il nostro e-commerce. Per sfruttare più agevolmente i css già presenti abbiamo convertito la lista ('ul') di immagini in una sequenza di blocchi 'div':

<div class="additionalImages">
    <?php $i = 0; foreach ($this->product->images as $image): ?>
        <div>
            <a class="<?php echo ($i?"":"zoomThumbActive"); ?>" href='javascript:void(0);' rel="{gallery:'galproducts', smallimage:'/<?php echo ($image->file_url_thumb); ?>', largeimage:'/<?php echo ($image->file_url); ?>'}">
                <img src='/<?php echo ($image->file_url_thumb); ?>'>
            </a>
        </div>
    <?php $i++; endforeach; ?>
    <div class="clear"></div>
</div>
 

Se preferite usare le liste potete usare il codice seguente:

<ul class="additionalImages">
    <?php $i = 0; foreach ($this->product->images as $image): ?>
        <li>
            <a class="<?php echo ($i?"":"zoomThumbActive"); ?>" href='javascript:void(0);' rel="{gallery:'galproducts', smallimage:'/<?php echo ($image->file_url_thumb); ?>', largeimage:'/<?php echo ($image->file_url); ?>'}">
                <img src='/<?php echo ($image->file_url_thumb); ?>'>
            </a>
        </li>
    <?php $i++; endforeach; ?>
</ul>
<div class="clear"></div>

 

Prova di funzionamento

Salviamo il nostro file e ricarichiamo la pagina di dettaglio del prodotto per gustarci il nuovo effetto zoom. Ovviamente potranno essere necessari alcuni interventi sui vari css per armonizzare l'effetto con il resto del vostro sito, ma questi interventi, che variano di sito in sito, non possono certo essere trattati qui.

A seconda del template in uso potrebbero essere stati modificati i nomi dei files che gestiscono i vari aspetti della visualizzazione, in tal caso sarà necessario un attento esame del codice php per trovare le sezioni da modificare. Inoltre il cambio del codice potrebbe rendere non più corrispondente la struttura del codice a quella del foglio di style obbligando all'intervento anche su quest'ultimo.
Pur non trattandosi di un intervento particolarmente complesso è necessario un certo grado di confidenza con php e css.

 

Per comodità del lettore, è disponibile un file contenente i files già inseriti nelle posizioni corrette, pronto da essere caricato, una volta decompresso, nella cartella del template.

Ricordatevi comunque di effettuare una copia di sicurezza dei files già presenti prima di sovrascriverli.