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.
Super, ça marche ! C’est carrément plus classe maintenant.
Par contre, dans le fichier /magento/app/design/frontend/default/default/layout/page.xml
j’ai ajouté ces 2 lignes
lightbox/lightbox.js
css/lightbox.css
après la ligne
mage/cookies.js
(vous comprendrez de quelle lignes je parle, car dans mon commentaire les lignes ont été filtrées, sinon voir par là : http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2#insert_javascript_and_stylesheet_into_magento ) Comme recommandé sur le wiki, car sinon ça fonctionnait pas.
Merci encore pour l’astuce !
Je viens de l’installer ça marche plutôt bien.
vous pouvez voir la demo sur mon site Magento
http://www.website1service.com
par contre attention aux » ” et ’’ ne pas se tromper
En effet Matt, il marche parfaitement avec les photos de vos articles !
Merci pour le partage, les personnes hésitantes pourront voir ce que cela donne en vrai !
Pour l’affichage de photos HD en plein écran qui s’adapte à tous les écrans voir PhotoSupplements.
http://www.photosupplements.com
Il y a sur le site un comparatif avec la lightbox.
Bonjour, j’ai un thème perso sur magento, pouvez vous me donner la marche à suivre. Merci
super! ça marche très bien! Merci pour ce tuto!!!
Sur la dernière version de Magento le chemin des fichiers a changé, quelqu’un aurait une version actualisée de ce tuto ?
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