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.

    Articles sur le même sujet :

  1. Optimisations des photos avec Xnview pour les intégrer dans votre boutique en ligne N'hésitez pas à vous inscrire au flux RSS pour ne rater aucun article.1ère Etape : Préparation des photos pour les intégrer dans votre boutique d’ecommerce Nous avons vu dans notre précédent billet : Comment optimiser les photos des fiches produits...
  2. Comment bien préparer la création de votre boutique en ligne avec Magento ou Prestashop N'hésitez pas à vous inscrire au flux RSS pour ne rater aucun article.Vous souhaitez vous lancer dans le ecommerce et mettre une boutique en ligne, 2 possibilités s’offrent à  vous : Vous avez déjà  un commerce et souhaitez développer votre...
  3. Comment optimiser les photos des fiches produits de votre ecommerce Un des travaux fastidieux lorsque vous concevez un site d'ecommerce est que pour une même photo d'un produit vous devez retailler celle-ci et la décliner dans différentes tailles. Le logiciel utilisera ensuite telle taille de photo pour l'affichage en vignette,...

10 commentaires pourquoi ne pas laisser le vôtre ?

Nous n'apporterons pas de support par commentaire pour un problème technique avec l'un de nos modules. Merci de nous contacter directement avec notre formulaire de contact!

I am incessantly thought about this, appreciate it for posting.

carrot cake dublin le 4 février 2016 à 10 h 56 min

Some truly nice stuff on this web site, I enjoy it.

massage naturiste paris le 25 janvier 2016 à 8 h 41 min

dans la version 1.5.1.0 cela n’éxiste plus : /magento/app/design/frontend/default/default/layout/page.xml
et ça non pus :/magento/app/design/frontend/default/default/template/catalog/product/view/media.phtml

Comment faire alors ? merci

rduvrac le 29 avril 2011 à 12 h 36 min

Sur la dernière version de Magento le chemin des fichiers a changé, quelqu’un aurait une version actualisée de ce tuto ?

Antoine le 5 septembre 2010 à 20 h 47 min

super! ça marche très bien! Merci pour ce tuto!!!

astro le 22 janvier 2009 à 17 h 44 min

Ecrire un commentaire