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

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 :

Ticket d’intervention Prestashop
Noté 5.00 sur 5 basé sur 16 notations client
(16) 60,00€ HT Ajouter au panier

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.