Carrousel accueil Prestashop

Prestashop 1.7 – Module Carrousel (ép.5)

Intégrer le carrousel sur votre Prestashop c’est pas du déjà vu ? Oui dans la version 1.6 on l’avait déjà fait, mais comme tout est nouveau on va profiter de refaire le tour pour voir s’il y’a des changements.

Episode 5

Même si je ne suis pas un grand fan des sliders, tous les clients veulent en mettre sur l’accueil de leur boutique… donc on va faire ensemble un test d’intégration. Au niveau configuration ça reste la même chose que pour la version précédente sous PS 1.6.

Ce que j’aime dans ce module avant tout c’est sa simplicité d’utilisation, car sincèrement j’overdose un peu des modules du genre « révolution slider », qui sont juste « impossible » à mettre entre les mains des clients tellement ceux-ci sont complexes à prendre en main.

Par contre, le reproche que je ferai au module officiel natif, c’est finalement la qualité du responsive… Il semblerait qu’un module de ce genre, devrait s’adapter correctement sur tous les supports. C’est le cas, mais le ciblage de l’image principale n’est pas si évident. Si on met une image trop large elle est décentrée sur desktop, mais correcte sur tablette… si elle est ajustée sur desktop… elle est trop petite sur tablette.

On va voir donc ensemble pour ajouter quelques règles pour optimiser un peu l’affichage et la compatibilité, ainsi que la lisibilité du texte. Rien de « fou » en soi, mais avec ça on peut dire que le slider est utilisable.

Ressources

Pour ce tutoriel vous avez à disposition :

  • Fichier slider.psd (généré aux bonnes dimensions)
  • Fichier theme.css.txt (règles à ajouter à votre fichier theme.css)

Télécharger

Au programme

  • Le slider s’appelle à présent « Carrousel » et non « Diaporama ».
  • Installez l’outil Web Developper pour Firefox et visualisez les tailles des DIV.
  • Créez une nouvelle slide de taille (1110px * 340px) sous Photoshop et avec une image prise sur Pixabay.
  • Configurez le module carrousel et ajoutez une nouvelle slide en vous basant sur les exemples déjà existants.
  • Améliorez la présentation du slider en ajoutant un ombrage au texte et en définissant des nouvelles règles pour les supports responsives.
  • Ecoutez mon avis personnel sur le module.

24 commentaires sur “Prestashop 1.7 – Module Carrousel (ép.5)”

    1. Bonjour,

      Effectivement le lien ne semble pas fonctionner, j’ai regardé dans le code de Prestashop… mais il ne semble pas y avoir le code pour le lien (oui c’est fou) ou alors j’ai raté quelque chose.

      J’ai dû modifier le fichier : « themes\classic\modules\ps_imageslider\views\templates\hook\slider.tpl »

      avec le code suivant

      {if $homeslider.slides}
  <div id="carousel" data-ride="carousel" class="carousel slide hidden-sm-down" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
    <ul class="carousel-inner" role="listbox">
      {foreach from=$homeslider.slides item=slide name='homeslider'}
        <li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}">
          <figure>
              <a href="{$slide.url}"> {* Webbax add link - start - 22.01.17 *}
                <img src="{$slide.image_url}" alt="{$slide.legend|escape}">
                {if $slide.title || $slide.description}
                  <figcaption class="caption">
                    <h2 class="display-1 text-uppercase">{$slide.title}</h2>
                    <div class="caption-description">{$slide.description nofilter}</div>
                  </figcaption>
                {/if}
              </a> {* Webbax add link - end - 22.01.17 *}
          </figure>
        </li>
      {/foreach}
    </ul>
    <div class="direction">
      <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="icon-prev hidden-xs" aria-hidden="true">
          <i class="material-icons">&#xE5CB;</i>
        </span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true">
          <i class="material-icons">&#xE5CC;</i>
        </span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
{/if}
      Répondre

  2. Bonjour,

    Merci pour votre tuto qui m’a bien aidé a adapter les images du carrousel. Par contre le carrousel ne fonctionne pas sur smartphone.
    Je l’ai bien activé au niveau des modules, mais rien à faire.

    Avez-vous une solution?

    Meilleures salutations,

    Rafael

    Répondre

    1. Bonjour,

      Normalement en natif sous Prestashop 1.7 le slider est masqué sur mobile, je ne suis pas certain que celui-ci soit supporté pour le mobile (vu qu’il est désactivé par défaut).

      Cela impliquerai de creuser les règles CSS / conditions et de vérifier s’il y’a une condition spéciale qui force la désactivation pour mobile.

      Merci pour votre visite !

      Répondre

    2. normalement si on enleve …hidden-sm-down
      dans le code qui suis sa marche ????
      sauf que sa a marcher pour la baniere mais pas pour le carousel je sais toujours pas pourquoi ????
      {if $homeslider.slides}

      Répondre

  3. Bonjour!
    J’apprécie grandement vos tutos pour nous aider à mieux cerner Prestashop. Je trouve l’idée du carrousel très sympa, cependant j’aurai aimé qu’il prenne toute la largeur de l’écran (comme le header et footer) et non pas juste le container prédéfini, une idée pour changer cela? Merci!

    Répondre

    1. Bonjour,

      Cette modification nécessite une révision globale du module, pour cela je conseillerai plutôt un module externe… Le module natif n’est pas prévu pour 100% de largeur au niveau des règles, cela nécessiterait trop d’adaptations.

      Merci pour votre visite !

      Répondre

  4. Salut

    Merci pour tes solutions super Vidéo, ça m’a beaucoup aidé. La seul chose que je cherche encore, c’est une fonction de sélection random pour les images, pour évite qu’on voit tjs les mêmes images quand on charge le site web. Est-ce que qq’un connait une solution simple?

    Répondre

    1. Bonjour,

      Pour avoir un affichage « aléatoire » ce n’est pas le carrousel qui propose cette fonctionnalité, mais plutôt les produits populaires en dessous. Dans le module des produits phares vous pouvez activer l’option « aléatoire ».

      A bientôt !

      Répondre

  5. Bonjour,

    Merci pour toutes vos vidéos qui m’aident bien à bidouiller 🙂

    Dans le carrousel de base, je voudrais savoir comment il est possible de modifier le taux de compression des images ? Quand j’importe des JPG nets et optimisés dans le module, je trouve que la qualité sur le front office est bien trop dégradé. Ce n’est plus aussi net que la photo sur mon pc.

    Merci d’avance,

    Répondre

  6. Bonjour,

    Merci pour cet excellent tuto en vidéo.
    Pouvez-vous m’indiquer comment supprimer les flèches gauche et droite qui viennent en surimpression sur l’image ?
    Merci beaucoup

    Répondre

    1. Bonjour,

      Une règle CSS du genre dans le custom.css devrait suffire : 

      .carousel .direction {
    display:none!important;
}

      Bonne continuation !

      Répondre

  7. Bonjour,

    Pour le problème de taille en responsive, que pensez vous de ce code ?
    .carousel .carousel-inner{
    height:auto!important;
    }
    Cela semble marcher, mais ca me rajoute une bordure blanche en bas de photo 🙁
    Merci.
    Mickael

    Répondre

    2. J’ai changé ce code

      figure {
      margin:0 0 0rem;
      }

      et la bande blanche disparait

      étonnant que ce genre de détail ne soit pas corrigé par l’équipe de prestashop depuis le temps. C’est le premier truc qu’on voit quand on installe le theme.

      Répondre

  8. Bonjour,

    Tout d’abord merci pour ce tuto. Je change actuellement l’apparence du mon site et j’ai vu plus haut dans les commentaires ainsi que dans beaucoup de forums que pas mal de monde cherche à avoir un slider qui prenne tout la largeur. Il est possible de l’avoir en natif, en fouillant un peu je suis tombé sur cette solution:
    – Dans apparence>position, on choisi le carrousel et on le modifie pour le greffer sur displayNavFullWidth, un hook vide qui est prevu pour cela.
    – On selectionne toutes les exceptions en ne gardant que « index » pour le voir que sur la page d’acceuil

    Ensuite j’ai juste appliqué les regles
    css .carousel .carousel-inner {margin-bottom: 0px;}
    .carousel {margin-bottom: 0px;}

    Il fonctionne aussi en responsive du coups, à voir pour y faire quelques petites modifs.

    Répondre

    1. Bonjour,

      Merci beaucoup pour cette contribution, à l’occasion j’y reviendrai peut-être sur la possibilité d’optimisation du slider.

      A bientôt !

      Répondre

    1. Bonjour,

      Pour cela il faut aller dans les positions des modules pour tenter de déplacer le module « plus bas ». S’il est déjà en dernière position, il faut essayer de le greffer sur un « hook » différent pour tester.

      A bientôt !

      Répondre

Laisser un commentaire

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