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é.