Accueil » Blog » Vidéos PS 1.7 de A à Z » Prestashop 1.7 – Module Carrousel (ép.5)

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)”

Merci pour les supers tutos.
Est-ce que le lien dans l’url cible fonctionne chez vous? Je n’ai pas réussi à le faire fonctionner…

Répondre

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}