Slider Prestashop

Prestashop 1.7 – Slider intelligent (ép. 63)

C’est devenu la norme depuis un bon moment en e-commerce de mettre un slider sur la page d’accueil de sa boutique e-commerce. Pourtant, dans bien des cas celui-ci peut être optimisé… essayons de revenir aux basiques tout en innovant.

Le slider encore et toujours

A partir d’un certain moment on commence à faire les choses sans réfléchir, tous les sites e-commerces mettent un slider sur leur page d’accueil alors on le fait aussi. On cherche à faire les plus beaux effets de transition… mais ne serait-il pas plus judicieux de revenir sur une méthodologie plus simple ? Est-ce qu’il est réellement utile d’avoir 500 options comme l’on voit actuellement sur la plupart des MEGA sliders ? Et pire encore… la conclusion c’est que votre slider n’est pas vraiment responsive à 100% et qu’il y’a des bugs.

Mon constat sur les sliders

Greffer du texte dynamiquement sur les images c’est une mauvaise idée il est préférable d’incruster le texte & bouton dans l’image pour éviter les multiples règles de tailles de texte à gérer en fonction des résolutions + les débordements. Pas besoin de système de navigation (avant / arrière), activez le déroulement automatique si vous le voulez… Si vous optez pour cette logique, la partie technique du slider se résume à : « Je dois faire une image qui donne envie de cliquer et la technique je ne m’en soucie pas ». Et oui, car la responsivité des images simples c’est ce qui marche le mieux et sans bug !

Le slider intelligent

On sait que la plupart des internautes ne verront pas la 2ème image du slider c’est prouvé… alors il est préférable plutôt de faire un « aléatoire » sur l’affichage des images. Ainsi l’image en position 5 pourra potentiellement s’afficher en 1ère position. Ce n’est pas tout, je propose encore mieux… le top c’est de charger une seule image (comme on le fait dans le tutoriel) ainsi on évite de charger la page d’accueil avec pleins de slides inutiles… et cela vous garantira que chaque slide sera vu à coup sûr.

Le slider natif de Prestashop

Franchement je trouve que le slide natif de Prestashop 1.7 c’est certainement l’un des meilleurs que j’ai vu… pour une bonne raison c’est qu’il est « simple » d’utilisation en back-office ! Ce que je comprends moins c’est le choix d’avoir désactivé le slide sur mobile en standard et que le côté responsive est quand même perfectible. Grâce à la méthode que je vous présente, on peut rectifier le tir avec environ 15 lignes de codes alors ça c’est vraiment le truc que j’adore (vite fait / bien fait). C’est aussi une très bonne chose que le slider gère 1 image par langue, ce qui permet de faire du multilangue avec le texte incrusté sur les slides.

Etes-vous aussi en mode « Think different » comme Apple ?

Sincèrement parfois je me pose des questions, je me dis… mais pourquoi je suis le seul à proposer ce genre d’approche ? Et même quand je propose ce genre d’alternative aux marchands ce n’est pas forcément bien perçu : « Non c’est ringard de faire comme ça ! ». Et pourtant, je reste persuadé que c’est l’une des meilleures approche à faire sur beaucoup de niveaux… Je pense qu’il y’a toujours cette crainte de « Penser différent » et de trop faire confiance aux standard… Qui vous dit que le slider tel qu’on le connait actuellement existera toujours dans 10 ans ?

Ressources

Pour ce tutoriel vous aurez à disposition :

  • 1 x fichier slider.tpl (affichage aléatoire / dynamique des bannières)
  • 1 x fichier custom.css (avec les règles responsives pour le slider)

Télécharger

Résumé de la vidéo : le meilleur slider pour Prestashop en adaptant le module natif

  • Transformation du slider en images « aléatoires », avec explication pas à pas de chaque ligne de code dans le TPL de Smarty.
  • Ajout des règles CSS pour rendre responsive le contenu du slider.
  • Création de nouvelles slides plus grandes & percutantes.
  • Activation du module slider pour les smartphones.
  • La simplification maximale du slider c’est la clé et c’est génial de revenir aux basiques. La simplicité n’est pas un handicap, mais une force.
Notez mon billet, Google va adorer :
1 étoiles - J'aime pas !2 étoiles - Bof !3 étoiles - Bien !4 étoiles - Très bien !5 étoiles - Génial ! (8 votes, moyenne : 4,63 sur 5)
Loading...

2 commentaires sur “Prestashop 1.7 – Slider intelligent (ép. 63)”

  1. Merci pour ce bel article. Dommage pour l’instant j’ai des priorités …. prioritaires ! Mais je le garde pour l’avenir, j’avais déjà confusément le sentiment que le slider pouvait être amélioré. En tous cas j’adore ta philosophie : « La simplicité n’est pas un handicap, mais une force. » (marre de ces pages qui mettent des heures à se charger avec plein de fenêtres, pop-up et autres clignotants comme des sapins de Noël de mauvais goût).
    Bonne journée à tous.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *