Cacher les miniatures produits lorsqu'il n'y a qu'une seule image

PrestaShop 1.7 affiche les miniatures même lorsqu'il n'y a qu'une seule image

Cette version 1.7 de PrestaShop nous étonnera toujours, suite à une demande sur le forum pour cacher les miniatures des images produits lorsque la fiche produit ne contient qu'une seule image, j'ai découvert que cette demande ne pouvait pas exister sur les précédentes versions de PrestaShop puisque le template par défaut proposé prenait en considération cette fonctionnalité.

Donc pour les utilisateurs aventureux utilisant la version 1.7 de PrestaShop, je vous propose ce petit tutoriel pour cacher cette miniature sur la fiche produit et sur la fenêtre modale qui s'ouvre pour le zoom.

On peut estimer que cette astuce apportera un gain en terme de chargement de la page produit.

Retirer la miniature sur la page produit

Vous devrez ouvrir le fichier suivant en y accédant par ftp :

  • /themes/classic/templates/catalog/_partials/product-cover-thumbnails.tpl

et encadrez le bloc affichant les miniatures par une condition simple en smarty qui vérifie qu'il y ait bien plusieurs images.

{if $product.images|@count > 1}...{/if}

Le résultat sera celui-ci

  {if $product.images|@count > 1}
      {block name='product_images'}
        <div class="js-qv-mask mask">
          <ul class="product-images js-qv-product-images">
            {foreach from=$product.images item=image}
              <li class="thumb-container">
                <img
                  class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
                  data-image-medium-src="{$image.bySize.medium_default.url}"
                  data-image-large-src="{$image.bySize.large_default.url}"
                  src="{$image.bySize.home_default.url}"
                  alt="{$image.legend}"
                  title="{$image.legend}"
                  width="100"
                  itemprop="image"
                >
              </li>
            {/foreach}
          </ul>
        </div>
      {/block}
  {/if}

Retirer la miniature de la fenêtre modale de zoom produit

Vous devrez ouvrir le fichier suivant en y accédant par ftp :

  • /themes/classic/templates/catalog/_partials/product-images-modal.tpl

et encadrez le bloc affichant les miniatures par une condition simple en smarty qui vérifie qu'il y ait bien plusieurs images.

{if $imagesCount > 1}...{/if}

Le résultat sera celui-ci

        {if $imagesCount > 1}
            <aside id="thumbnails" class="thumbnails js-thumbnails text-sm-center">
              {block name='product_images'}
                <div class="js-modal-mask mask {if $imagesCount <= 5} nomargin {/if}">
                  <ul class="product-images js-modal-product-images">
                    {foreach from=$product.images item=image}
                      <li class="thumb-container">
                        <img data-image-large-src="{$image.large.url}" class="thumb js-modal-thumb" src="{$image.medium.url}" alt="{$image.legend}" title="{$image.legend}" width="{$image.medium.width}" itemprop="image">
                      </li>
                    {/foreach}
                  </ul>
                </div>
              {/block}
              {if $imagesCount > 5}
                <div class="arrows js-modal-arrows">
                  <i class="material-icons arrow-up js-modal-arrow-up"></i>
                  <i class="material-icons arrow-down js-modal-arrow-down"></i>
                </div>
              {/if}
            </aside>
        {/if}

Visualiser les modifications

Vous avez modifié convenablement vos fichiers et sauvegardé en ligne ces modifications ... mais rien n'a changé sur votre site.

N'oubliez pas qu'il faut toujours bien vider le cache de PrestaShop après avoir effectué des modifications sur vos templates.

Pour ce faire, rendez-vous dans le menu Paramètres avancés >> Performances.

Retournez sur votre page produit et constatez la disparition de la miniature.