Accueil > blog > Prestashop > Ajouter des sous-catégories avec miniatures sur Prestashop 1.7
10 Avr 2020

Ajouter des sous-catégories avec miniatures sur Prestashop 1.7

Prestashop, Tutoriel

Mise à jour de l’article le 28/12/2021 : Compatible avec Prestashop 1.7.7.1

Mise à jour de l’article le 02/05/2020 : J’ai testé sur la version 1.7.6.5 et cela fonctionne parfaitement. Attention à bien vider le cache pour voir les modifications.

Sur Prestashop 1.7 nous n’avons plus les sous-catégories d’affichées sur les catégories de produits. Si vous n’avez pas un thème spécifique avec cette option alors ce tutoriel va vous aider ! De plus nous allons voir comment utiliser la miniature de la catégorie et non l’image de couverture.

Pourquoi afficher des sous-catégories sur son site e-commerce ?

Dans une catégorie de produits, le fait d’afficher les sous éléments, cela va agrandir la ligne de flottaison de votre site. L’utilisateur va devoir scroller plus longtemps avant de voir vos produits. Mais les sous-catégories vont avoir un avantage considérable, elles vont servir d’entonnoir à vos futurs clients. Il va pouvoir rejoindre directement l’endroit qu’il cherche.

Voici un exemple avec un site de vêtement :
– Vêtement (catégorie)
– Homme (sous-catégorie)
– Sports (sous-catégorie)
– Jogging (sous-catégorie)
*Liste des produits que le client recherche*

Bien sûr vous pouvez utiliser la navigation de recherche pour cela sur Prestashop. L’avantage de la sous-catégorie c’est qu’elle est illustrée en image.

Afficher vos sous-catégories dans category.tpl sur Prestashop 1.7

Je vais donner plusieurs exemples d’affichage en dessous en utilisant le thème par défaut Classic. Ils seront tous différents au niveau de l’image à afficher.

Tout d’abord rendez vous dans votre back-office et créez une sous-catégorie.
Ensuite, ajoutez une image de couverture à votre catégorie (image principale qui sera affichée) puis enregistrez (très important).
Maintenant qu’elle est active vous pouvez la modifier à nouveau et si vous le souhaitez, ajouter une miniature.

Enregistrez une première fois la page avec une image de couverture avant de mettre une miniature

Modifier le fichier category.tpl

Pour exposer l’ensemble sur votre site vous allez devoir faire une modification dans le code.

Rendez-vous ici : themes/nomdevotrethemes/templates/catalog/listing/ et ouvrir le category.tpl

Sur le thème Classic vous pouvez le mettre dans : themes/nomdevotrethemes/templates/catalog/_partials/category-header.tpl
À la suite des éléments déjà présents. Certains thèmes Prestashop ne disposent pas de ce fichier c’est pour cela que je me concentre sur le fichier category.tpl.

Une fois que vous avez ouvert le category.tpl vous devez ajouter ce code dans le {block name=’product_list_header’} :

<div id="subcategories">
	<ul class="clearfix">
    	{foreach from=$subcategories item=subcategory} 
   			<li class="col-xl-2 col-sm-3 col-xs-4">
      		  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
         	  	 <img src="{$subcategory.image.large.url}" alt="{if !empty($subcategory.image.legend)}{$subcategory.image.legend}{else}{$subcategory.name}{/if}">
       		  </a>
        	  <a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">
        	  	{$subcategory.name|truncate:125:'...'|escape:'html':'UTF-8'}
        	  </a>
   			</li>
   		{/foreach}
   	</ul>
</div>

Votre fichier doit ressembler à cela :

{**
 * 2007-2018 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2018 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
  	<div id="subcategories">
		<ul class="clearfix">
	    	{foreach from=$subcategories item=subcategory} 
	   			<li class="col-xl-2 col-sm-3 col-xs-4">
	      		  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
	         	  	 <img src="{$subcategory.image.large.url}" alt="{if !empty($subcategory.image.legend)}{$subcategory.image.legend}{else}{$subcategory.name}{/if}">
	       		  </a>
	        	  <a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">
	        	  	{$subcategory.name|truncate:125:'...'|escape:'html':'UTF-8'}
	        	  </a>
	   			</li>
	   		{/foreach}
	   	</ul>
	</div>
{/block}

En front-office vous devez avoir ce résultat (sur le thème classic) :

Nous verrons la partie CSS plus loin dans l’article. Cela va permettre d’avoir un meilleur rendu graphique pour l’utilisateur.

Utiliser la miniature catégorie redimensionnée par Prestashop

Pour l’utiliser vous devez remplacer la balise image dans votre code par celle-ci :

<img class="replace-2x" src="{$urls.base_url}img/tmp/category_{$subcategory.id_category}-thumb.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />

Ce qui donne :

<div id="subcategories">
	<ul class="clearfix">
    	{foreach from=$subcategories item=subcategory} 
   			<li class="col-xl-2 col-sm-3 col-xs-4">
      		  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
         	  	 <img class="replace-2x" src="{$urls.base_url}img/tmp/category_{$subcategory.id_category}-thumb.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
       		  </a>
        	  <a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">
        	  	{$subcategory.name|truncate:125:'...'|escape:'html':'UTF-8'}
        	  </a>
   			</li>
   		{/foreach}
   	</ul>
</div>

Dans l’URL de l’image nous allons chercher dans le dossier image de Prestashop les miniatures (img/tmp) et on détermine avec une variable l’ID de la sous-catégorie en ajoutant “thumb” ce qui permet d’afficher l’image redimensionnée par Prestashop.

Charger la miniature catégorie avec sa taille par défaut

Vous pouvez aussi ne pas charger une image avec “thumb” pour des problèmes de qualité. On va donc appeler l’image non formaté par Prestashop. Attention à ne pas charger des images trop lourdes si c’est juste pour l’avoir en miniature sur le site. Cela peut alourdir le temps de chargement.

Il vous faut tout simplement supprimer “-thumb” du nom de l’image :

<div id="subcategories">
	<ul class="clearfix">
    	{foreach from=$subcategories item=subcategory} 
   			<li class="col-xl-2 col-sm-3 col-xs-4">
      		  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
         	  	 <img class="replace-2x" src="{$urls.base_url}img/tmp/category_{$subcategory.id_category}.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
       		  </a>
        	  <a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">
        	  	{$subcategory.name|truncate:125:'...'|escape:'html':'UTF-8'}
        	  </a>
   			</li>
   		{/foreach}
   	</ul>
</div>

Modifier le style graphique des sous-catégories

Voici quelques lignes de CSS à ajouter pour avoir un meilleur rendu visuel sur le site. Adaptez-le selon vos besoins et votre thème. Pour mon exemple, j’ai mis cela dans le custom.css du thème Classic de Prestashop 1.7.

#subcategories ul {
	text-align: center;
}
#subcategories ul li img {
	width: 100%
}
#subcategories li a {
	display: block;
}
#subcategories li a.subcategory-name {
	margin-top: 1rem;
}

Voici donc mon rendu final :

Vous avez besoin d’aide pour afficher les sous-catégories ?

– Afficher les sous-catégories de Prestashop
– Modifier l’appel des images des éléments
– Appliquer du CSS pour adapter à votre charte graphique
…

Vous pouvez commander un ticket de support Prestashop 1.7 pour que j’applique ce tutoriel sur votre site e-shop.

14 commentaires sur “Ajouter des sous-catégories avec miniatures sur Prestashop 1.7”

  1. bonjour,
    petit soucis sur la version 1.7.6.5 de prestashop

    j’ai toujours le cadre avec le message veuillez nous excuser pour la gène occasionner

    Répondre

    1. Bonjour,

      Je vous confirme après test que cela fonctionne très bien sous 1.7.6.5.
      Attention à bien fermer les balises et de bien vider le cache après modification.

      Répondre

  4. Bonjour,
    J’ai bien la catégorie catégory-header tpl mais je n’ai pas la balise block. Dois-je mettre le code à la fin du coup ?
    Voici ce que j’ai :

    {if $listing.pagination.items_shown_from == 1}

    {$category.name}

    {if $category.description}
    {$category.description nofilter}
    {/if}
    {if $category.image.large.url}

    {/if}

    {/if}

    Répondre

    1. Vous n’avez pas forcément besoin de la balise.
      Placez le après {if $category.image.large.url}{/if}.
      Mais au vu de ce fichier de thème, je pense que ça devrait être dans un autre fichier pour un rendu esthétique.
      Là par contre c’est du cas par cas par rapport au thème

      Répondre

    1. Peut-être que la structure du thème n’est pas adaptée pour ce tutoriel.
      Depuis, Prestashop intègre cette fonction dans son thème et c’est les mêmes variables que dans mon tutoriel.
      A mon avis, cela doit être placé dans un autre fichier dans votre thème

      Répondre

  6. Bonjour, comment ajouter une liste de produit dans ces sous categorie ? 4 produit par categorie par exemple.
    Je ne trouve e pas de solution.
    Merci pour votre aide

    Répondre

    1. Fonctionnement de base de PrestaShop, vous ajoutez vos produits à des catégories, il faut aller dans chaque fiche produit en back

      Répondre

      1. Bonjour Mathieu,
        je parle en FO, dans les catégories principales, il y a des sous-catégories. Je voudrais ajouter, sous l’affichage des sous-catégories, quelques produits (une petite liste des produits que l’on va trouver dans ces sous-catégories). Mais je ne trouve pas comment faire. Comme ici par exemple:

        Répondre

        1. En natif, il y a toujours des produits sous les sous-catégories, comme j’ai dit c’est le système natif.
          Vous avez une variable et conditions qui génèrent automatiquement les produits dans les catégories
          Donc si cela ne fonctionne pas, c’est un soucis dans votre thème / code et le votre à l’air particulier.

          Répondre

Laisser un commentaire

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