Comment améliorer l’affichage de ses photos dans Magento avec Lightbox

Lorsque vous concevez votre site de commerce en ligne, l’aspect visuel de votre site est très important. C’est la première impression qui va donner envie ou pas à votre futur acheteur de continuer sur votre site ou d’aller voir votre concurent.

Il faut donc prendre en compte : la qualité des images, la rapidité d’affichage, la navigation aisée à travers votre site…, mais la présentation des photos de vos fiches produits est aussi importante. Par exemple, faire apparaître une photo d’un article sur un fond noir, lorsque vous cliquez dessus pour l’agrandir, permet de la faire ressortir et de d’avoir un aspect plus agréable du produit.

Cette fonction est intégré en standard dans Prestashop, mais pas dans Magento. La solution consiste à utiliser le script Lightbox.js (vous pouvez voir des exemples sur le site : Lightbox 2).

Un très bon article de Sebastian Enders nous explique comment faire sur le wiki de Magento.

Je vais donc vous fournir ci-dessous une traduction de ces explications avec quelques modifications :

Commencez par télécharger la version zippé de lightbox et à la décompresser.

Je n’ai pas testé avec une version plus récente, mais d’après Sebastian les versions plus récentes ne sont pas compatible avec la version de prototype utilisé par Magento.

Pour commencer nous supposons que Magento est installé dans un dossier Magento sur votre serveur.

Copie des fichiers de lightbox dans Magento

Commencez par créer un répertoire lightbox dans le dossier js de Magento et copiez le fichier lightbox.js que vous venez de décompresser dans ce répertoire.

Copiez ensuite le fichier lightbox.css dans le répertoire /skin/frontend/default/default/css/ de Magento.

Créez un répertoire /skin/frontend/default/default/images/lightbox/ dans Magento et copiez dedans tous les fichiers que vous trouverez dans le dossier images du dossier lightbox décompressé.

Modification des fichiers css et js de lightbox

Ouvrez ensuite le fichier lightbox.css qui se trouve dans /magento/skin/frontend/default/default/css et remplacez :

background: transparent url(../images/blank.gif) no-repeat;

par :

background: transparent url(/magento/skin/frontend/default/default/images/lightbox/blank.gif) no-repeat

et :

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

par :

#prevLink:hover, #prevLink:visited:hover { background: url(/magento/skin/frontend/default/default/images/lightbox/prevlabel.gif) left 15% no-repeat; }

et :

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

par :

#nextLink:hover, #nextLink:visited:hover { background: url(/magento/skin/frontend/default/default/images/lightbox/nextlabel.gif) right 15% no-repeat; }

Ouvrez ensuite : /magento/js/lightbox/lightbox.js, recherchez et remplacez :

var fileLoadingImage = “images/loading.gif”;

var fileBottomNavCloseImage = “images/closelabel.gif”;

par :

var fileLoadingImage = “/magento/skin/frontend/default/default/images/lightbox/loading.gif”;

var fileBottomNavCloseImage = “/magento/skin/frontend/default/default/images/lightbox/closelabel.gif”;

Insérez l’appel aux fichiers javascript et feuille de style de lightbox dans Magento

Ouvrez le fichier : /magento/app/design/frontend/default/default/layout/page.xml et insérez entre :

<block type=“page/html_head” name=“head” as=“head”>
….
</block>

les 2 lignes suivantes :

<action method=”addJs”><script>lightbox/lightbox.js</script></action>
<action method=”addCss”><stylesheet>css/lightbox.css</stylesheet></action>

Insertion de l’appel à lightbox dans une fiche produit

Ouvrez le fichier :

/magento/app/design/frontend/default/default/template/catalog/product/view/media.phtml

et remplacez :

<?php foreach ($this->getGalleryImages() as $_image): ?>

<li>

<a href=”#” onclick=”popWin(’<?php echo $this->getGalleryUrl($_image) ?>’, ‘gallery’, ’scrollbars=yes,width=200,height=200,resizable=yes’);return false;”>

<img src=”<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68,68); ?>” alt=”<?php echo $this->htmlEscape($_image->getLabel()) ?>” title=”<?php echo $this->htmlEscape($_image->getLabel()) ?>”/>

</a>

</li>

<?php endforeach; ?>

par :

<?php foreach ($this->getGalleryImages() as $_image): ?>

<li>

<a href=”<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” rel=”lightbox[rotation]” title=”<?php echo $_product->getName();?>”>

<img src=”<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(68, 68); ?>” width=”68″ height=”68″ alt=”"/>

</a>

</li>

<?php endforeach; ?>

Voilà si maintenant vous cliquez sur un produit dans Magento il s’affichera en grand sur un fond noir avec la fonction Lightbox.

Pour avoir un affichage correct de vos photos je vous conseille de limiter leurs taille à 600 x 600 pixels.

Ces billets peuvent aussi vous interesser :