Vous êtes d’accord qu’avoir 2 yeux c’est pratique ? Hum, mais si je vous disais qu’on va vous greffer un 3ème oeil pour que vous puissiez voir « encore mieux » sur votre boutique Prestashop vous seriez content ? C’est ce qu’on va faire aujourd’hui.
Hum, je ne vois pas bien l’image !
Est-ce que vous vous êtes déjà fait cette réflexion ? Vous êtes sur un site et vous ne voyez pas bien l’image, c’est trop petit, vous aimeriez pouvoir zoomer mais vous ne pouvez pas… aie c’est frustrant.
Parfois on cherche à zoomer pour voir en détail un produit, mais aussi dans certains cas pour lire du texte incrusté dans l’image et si l’image n’est pas zoomable c’est « mission impossible ».
L’insertion des images dans Prestashop
En principe ça se fait assez facilement et naturellement sur les fiches produits, mais là où ça se complique c’est surtout quand vous voulez ajouter des images dans la description courte et longue du produit.
Premièrement l’image s’ajuste rarement proprement, elle déborde et n’est pas responsive… puis si on essaye de la calibrer à la bonne taille (largeur & auteur), on ne voit plus rien l’image est trop petite.
Le cas de figure est plus ou moins similaire aussi dans les pages CMS de Prestashop, la mise en forme de ces pages est souvent désastreuse. Restez avec un code HTML simple et maintenable.
Envie de « retripatouiller » vos fiches Prestashop ? Hoooo que non !
Quand on veut améliorer l’ergonomie d’une boutique Prestashop, la pire des choses est de devoir reprendre manuellement le contenu déjà en place et adapter le code de chaque page (réviser toutes les fiches produits c’est le bad trip des e-commerçants).
C’est pour cela qu’en regardant sur le web je suis tombé sur jQuery Zoom qui permet d’accomplir de véritables miracles. La librairie est assez intelligente pour proposer un zoom automatique sur les images d’une page sans devoir les encapsuler manuellement une à une avec du code spécifique.
Même pour le mobile first ça fonctionne !
Comme un utilisateur sur deux est sur mobile, il est important que l’accessibilité soit aussi au top sur ce type de format et bonne nouvelle… la librairie Javascript réagit lors du positionnement du doigt sur l’image, c’est vraiment intuitif.
C’est encore mieux que les systèmes de popup à la sauce Thickbox, parce que dès que vous retirez votre doigt de l’image, le dézoome se fait automatiquement (vous n’avez pas besoin de cliquer / décliquer). Cela semble un détail, mais au niveau UX l’expérience est vraiment intéressante.
Quelques « petites » règles à suivre pour les images
Très souvent chez les e-commerçants la gestion des images n’est pas très rationalisée. Pensez à ne jamais inclure de liens externes vers des images stockées à distance, rapatriez-les toujours sur votre propre serveur (comme montré dans la vidéo).
Idéalement, essayez de nommer vos images de manière explicite avec un nom clair, afin que sur le FTP de votre serveur vous puissiez en identifier le contenu sans même les ouvrir.
En ce qui concerne la résolution privilégiez des images qui font au moins 1024 pixels de largeur et pour l’emplacement des images, pensez à les stocker toujours dans le même dossier pour vous y retrouver facilement.
Pour ce tutoriel Prestashop vous avez à disposition :
- jquery.zoom.min.js (la librairie zoom)
- layout-both-columns.tpl.tpl (pour charger la libraire)
- 1 x custom.css (pour ajuster la taille des images)
- 1 x custom.js (pour déclencher l’action zoom)
Résumé de la vidéo : Un module Zoom Prestashop gratuit 100% natif
- On commence par insérer une image dans Prestashop pour voir ce que ça donne… et le résultat est assez « brut » si on ne fait rien.
- Ensuite, on intègre la librairie Zoom et on déclenche une action Javascript dans la fiche produit, l’effet est immédiat et rend l’image 100% accessible.
- Sur le mobile la fonction zoom est aussi automatiquement active.
- Pour les pages CMS Prestashop on fait la même chose, facile en 5 lignes de code tout fonctionne.
- Raisonnez en « mono-colonne », en affichant des images l’une sous l’autre, nous sommes à l’ère du mobile… c’est ce support qui définit les règles principales à suivre.
Bonjour,
Un grand merci pour vos tutos.
Ca marche aussi pour le(s) image(s) produit(s) de la colonne gauche ?
Perso j’ai du mal avec l’image du produit sur la page produit. Quelqu’un peut-il m’aider ?? Merci d’avance.
Marcel
Po … Po …Po… que c’est beau !
Encore une astuce qui déchire. Après je pense qu’il faut l’utiliser à bon escient. Perso pour la description ont peut plutôt mettre les images avec l’article, le module est fait pour cela, après il y a risque de surcharge je pense, mais pour les pages cms c’est vraiment un GROS plus.
Mais c’est bien de nous monter comment l’intégrer dans différents endroits.
Grand merci pour ce tuto.
Pour ma part ça fonctionne sur certaines photos pas sur toute et j’aimerais le mettre directement sur le produit pour que les clients voient les détails
Pardon je me suis trompé de page je voudrais faire la meme chose dans la page description (ps je sais pas codé) j’ai pris vos fichiers et placé a l’endroit dit) merci beaucoup pour ce tuto génialissime .
Merci par avance de votre réponse .
Super tuto, une fois de plus.
En revanche je cherche en vain à appliquer le zoom sur une image dans la description de catégorie. J’ai testé pas mal de code et je n’y arrive pas. Quelqu’un aurait une idée ? (Presta 1.7)