A force de mettre en place des sites marchands en ligne, je suis toujours à la recherche du petit détail qui fera la différence sur un projet… Ce petit détail qui assurera un effet « wouah » pour l’internaute. Et si ce détail pouvait être un effet visuel au survol de vos images produits dans votre boutique PrestaShop ?
3 plugins CSS3 et jQuery pour animer vos photos produits
PrestaShop offre par défaut un listing produit, soit les uns en dessous des autres, soit en blocs avec x produits par ligne. Quoiqu’il en soit, c’est pas très fun à mon goût aussi on va essayer d’animer cette liste de produits à l’aide d’un plugin CSS3 ou jQuery parmi :
- Label.css : léger et tout en CSS3, le site propose d’ailleurs un tuto clair : http://usablica.github.io/label.css
- Hover Caption (ou HCaption.js) : des exemples pour des effets différents et un script pas lourd du tout : http://ryun.github.io/HCaptions
- Hongkiat Image Captions : un poil plus lourd que les deux autres mais 6 effets visuels et un tutoriel pour la mise en place : http://www.hongkiat.com/blog/css3-image-captions
Animation des images produits dans PrestaShop
Cas pratique, on va animer le listing produit dans PrestaShop et pour cela, on va s’armer du premier plugin tout en CSS3 : Label.css.
Etape 1 : télécharger et installer le plugin
On télécharge le plugin Label.css puis on extrait le contenu de l’archive téléchargée. Dans le dossier « Master », on trouve un fichier label.css que l’on va placer dans www/themes/mon-theme/css/
On ouvre ensuite le fichier header.tpl de son thème et on ajoute cette ligne avant la balise </head>, dans mon cas, on est sur le thème PrestaShop par défaut :
[php]
&lt;link href="{$base_dir}themes/default/css/label.css" rel="stylesheet" type="text/css" media="all">
[/php]
Etape 2 : télécharger et installer le plugin
On ouvre ensuite le fichier du listing produits product-list.tpl et on va rechercher la ligne suivante :
[php]
&lt;a href="{$product.link|escape:’htmlall’:’UTF-8′}" title="{$product.name|escape:’htmlall’:’UTF-8′}">
[/php]
On va remplacer cette ligne par le code suivant :
[php]
&lt;a href="{$product.link|escape:’htmlall’:’UTF-8′}" class="product_img_link label inside middle float" title="{$product.name|escape:’htmlall’:’UTF-8′}" data-label="{$product.name|escape:’htmlall’:’UTF-8’|truncate:35:’…’}">
[/php]
L’attribut data-label= »{$product.name|escape:’htmlall’:’UTF-8’|truncate:35:’…’} » indique l’élément qui va s’afficher au survol. Dans mon cas, j’ai repris la variable « nom du produit » mais ça pourrait très bien être le prix ou la dispo ou autre.
Avec label.css on peut aussi choisir les effets comme indiqué via les classes de l’élément : top, middle, bottom // left, right // insde, outside // top, bottom // float, fade.
Etape 3 : on savoure !
Tout est dit, c’est magnifique, ça s’anime ! Reste plus qu’à tout mettre en forme mais vous avez à présent les clés pour animer votre site… Une seule réserve : ne faites pas de votre boutique un arbre de Noël qui clignote dans tous les sens 😉 Voici un cas pratique d’utilisation de ces plugins sur le site de David Bralizz.
N’hésitez pas à commenter avec un plugin que vous utilisez ou que vous avez remarqué.
Mercie 🙂 pour le conseil je mis met tous de suite 😉 a plus tard
Arnaud ca marche pas toujour ou il faut absolument que j’ai un menu produit comme dans le site davidbralizz
Germain, prenez le temps de lire le fonctionnement sur le site du plugin : http://usablica.github.io/label.css
Pour avoir un menu, il ne s’agit pas de ce plugin mais d’un module mega menu pour PrestaShop comme l’Advanced Top Menu de Presta Module http://goo.gl/3YMg24
avec la class et le data-label comment je comprend pas trop 🙁 s’il vous plait expliquer moi clairement
Vous avez :
[code]href=”{$product.link|escape:’htmlall’:’UTF-8′}” title=”{$product.name|escape:’htmlall’:’UTF-8′}”[/code]
Il vous faut au final :
[code]<a href=”{$product.link|escape:’htmlall’:’UTF-8′}” class="product_img_link label inside middle float" title=”{$product.name|escape:’htmlall’:’UTF-8′}” data-label="{$product.name|escape:’htmlall’:’UTF-8’|truncate:35:’…’}">[/code]
#Arnaud je disait dans mon fichier produit-list j’ai pas la ligne :
<a href= »{$product.link|escape:’htmlall’:’UTF-8′} » title= »{$product.name|escape:’htmlall’:’UTF-8′} »>
j’ai plutot :
href= »{$product.link|escape:’htmlall’:’UTF-8′} » title= »{$product.name|escape:’htmlall’:’UTF-8′} »
et je sais pas trop comment faire 🙁
Dans ce cas, éditez votre code avec la class et le data-label comme cité dans l’article 🙂
Bonjour et merci 🙂 pour tous ce que vous fêtes pour nous s’il vous plais j’ai téléchargé le fichier label.css comme le tuto l’indique mais chez mw dans mon fichier produit-list.tpl j’ ai pas la ligne :
<a href= »{$product.link|escape:’htmlall’:’UTF-8′} » title= »{$product.name|escape:’htmlall’:’UTF-8′} »>
a la place j’ai :
je sais pas comment faire .Mercie d’avance
Bonjour, merci pour le retour. Votre commentaire est incomplet donc je ne peux pas vous aider en l’état :s
Merci pour ce tuto simple et très rapide à mettre en place !
Je précise juste pour ceux qui n’y arriverais pas il faut bien sûr écrire :
<a href="{$product.link|escape:'htmlall':'UTF-8'}" …
au lieu de
<a href="{$product.link|escape:'htmlall':'UTF-8'}" …
@julien : Effectivement c’est bien ça même si je ne l’ai pas précisé 😉
@Ludovic : Vous avez la source de label.css http://usablica.github.io/label.css pour vous aider sinon je peux intervenir si vraiment vous n’y arrivez pas 😉
@Ludovic : Hello, avez-vous bien suivi le tuto ? Vérifiez bien que le fichier label.css est bien chargé dans votre site PrestaShop ? Ensuite vérifiez bien le code entré dans le fichier .tpl et .css 😉
N’hésitez pas à poster ici pour aider les autres aussi !
@Patrick : Bonjour, il est possible de faire simple avec l’affichage des attributs au survol comme sur http://www.marinamode.fr via un léger module. La popup image n’apporte pas de grand intérêt à ce niveau de la navigation à mon sens 🙂
@Patrick : Bonjour et merci pour le retour, ça fait toujours plaisir 😉 Pour les attributs sur l’image au survol, il existe ce module pour afficher les attributs sur le listing produits.
bonjour et merci pour votre réponse je me suis permis de vous envoyer un message privé via le formulaire de contact.
Cordialement.
@carlier : Ok noté 🙂
@carlier : Bonnjour et oui je répond à tous les commentaires car vous faites un effort alors je prend le temps de rédiger une réponse. Quel point n’avez-vous pas saisi ? Car je me suis forcé à détailler les étapes mais c’est vrai qu’il faut savoir manipuler les fichiers .tpl de PrestaShop ainsi que du jQuery.