3 excellents plugins pour animer vos images dans PrestaShop

15 juin 2013

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 :

1. Label.css : léger et tout en CSS3, le site propose d’ailleurs un tuto clair : http://usablica.github.io/label.css
2. Hover Caption (ou HCaption.js) : des exemples pour des effets différents et un script pas lourd du tout : http://ryun.github.io/HCaptions
3. 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 , dans mon cas, on est sur le thème PrestaShop par défaut :

<="" >="">
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 :
<="" >="" title="{$product.name|escape:'htmlall':'UTF-8'}">
On va remplacer cette ligne par le code suivant :
<="" >="" title="{$product.name|escape:'htmlall':'UTF-8'}"><="" href="%7B%24product.link%7Cescape:'htmlall':'UTF-8'%7D" class="product_img_link label inside middle float" >="">
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 !
<="" href="%7B%24product.link%7Cescape:'htmlall':'UTF-8'%7D" class="product_img_link label inside middle float" >="">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é.