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.

BOUM !

1 seul mail par semaine - pas de publicité

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

  2. Salut Webbax.
    En appliquant la règle dans le custom css, ça me réduit la taille de mon logo que j’ai modifié.
    Aurait tu une solution a me proposé.
    Merci et merci pour tout les tutos qui sont grandement utile.

    1. Bonjour,

      Il faudrait ajouter une règle CSS peut-être uniquement sur l’élément CSS concerné (en utilisant l’attribut ID) afin que cela n’affecte pas d’autres éléments.

      A bientôt !

  3. Hello, merci pour les tutos.
    J’ai une question à votre endroit, est-il possible d’ajouter les blocs d’images comme c’était le cas sur PS 1.6?
    Et si possible comment?

  4. Salut Webbax,
    Vraiment top ce slider en mode random! C’est exactement ce que je cherchais!
    Je souhaiterai afficher ce slider sur mes pages de catégories et afin que les images soient différentes de mes miniatures et que les visuels soient moins monotones. Sais-tu s’il est possible de faire cela ?
    Merci, à bientôt!

  5. Bonjour et merci pour ce tuto, toujours aussi intérressant et intelligent…
    Petite question bête : cette manip est également possible avec un autre thème, et en utilisant le slider natif?
    Bonne continuation.

    1. Hello,

      Oui si vous installez le module slider (par défaut) de Prestashop sur un thème personnalisé vous pouvez faire la même manipulation.

      A bientôt !

  6. Bonjour et bonne année 2021
    D’abord merci pour ce tuto
    Je viens d’appliquer ce tuto avec 4 slides et j’ai l’impression que le « tirage au sort » de la slide ne fonctionne pas car je tombe toujours sur la même.
    J’ai beau vider le cache etc… je ne sais pas
    Merci de votre aide

  7. Bonjour,
    je débutes en Prestashop et avec leotheme, je cherche à changer le slider en header de homepage par une vidéo. Et là je sèche complétement….
    Pouvez vous m’aider?

    Merci d’avance !

  8. Hello Webbax
    Merci pour te tutorial qui fonctionne parfaitement lorsque le cache en BO est désactivé, cependant lorsque le cache est actif on perd l’aspect aléatoire (ce qui est normal).
    As tu une astuce pour profiter de cette fonction tout en gardant le cache actif ? (bénéfice rapidité du site plus intéréssant que de désactiver le cache 😉 ).
    Merci pour ta réponse

Laisser un commentaire

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