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.
- 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...
- 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...
- Optimisation des photos des articles de votre boutique avec Gimp N'hésitez pas à vous inscrire au flux RSS pour ne rater aucun article.Nous avons vu dans notre précédent billet, qu’il était nécessaire de retravailler vos photographies, pour obtenir un chargement rapide des pages de votre site de ecommerce et qu’ainsi...
super! ça marche très bien! Merci pour ce tuto!!!
Bonjour, j’ai un thème perso sur magento, pouvez vous me donner la marche à suivre. Merci
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.
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 !
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