Ajouter les sous catégories dans la page catégorie de Prestashop 1.7
Sommaire
Préambule
Avez-vous remarqué l’absence de sous-catégories, dans les pages catégorie de PrestaShop 1.7 ? C’est un problème pour certains clients habitué à le faire depuis des années… Voyons ensemble comment y remédier rapidement avec cette nouvelle version de Prestashop.
Nous utilisons pour cette exemple le template “Classic” qui est fournis par defaut. Nous devons éditer les fichiers “category.tpl” et “theme.css” de ce thème.
Editer le fichier category.tpl
Rendez vous dans : “themes/classic/templates/catalog/listing”
Identifiez le “block” :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | {block name='product_list_header'} <div class="block-category card card-block hidden-sm-down"> <h1 class="h1">{$category.name}</h1> {if $category.description} <div id="category-description" class="text-muted">{$category.description nofilter}</div> <div class="category-cover"> <img src="{$category.image.large.url}" alt="{$category.image.legend}"> </div> {/if} </div> <div class="text-xs-center hidden-md-up"> <h1 class="h1">{$category.name}</h1> </div> {/block} |
et juste avant le dernier {/block} ajoutez :
| 1 2 3 4 5 6 7 8 9 10 11 12 | <div id="subcategories" class="block-category card card-block hidden-sm-down"> <ul class="clearfix"> {foreach from=$subcategories item=subcategory} <li> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img"> <img width='120px' height='120px' class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}" /> </a> <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5> </li> {/foreach} </ul> </div> |
Ce qui donne :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | {** * 2007-2017 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-2017 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'} <div class="block-category card card-block hidden-sm-down"> <h1 class="h1">{$category.name}</h1> {if $category.description} <div id="category-description" class="text-muted">{$category.description nofilter}</div> {/if} {if $category.image.large.url} <div class="category-cover"> <img src="{$category.image.large.url}" alt="{$category.image.legend}"> </div> {/if} </div> <div class="text-sm-center hidden-md-up"> <h1 class="h1">{$category.name}</h1> </div> <div id="subcategories" class="block-category card card-block hidden-sm-down"> <ul class="clearfix"> {foreach from=$subcategories item=subcategory} <li> <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img"> <img width='120px' height='120px' class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}" /> </a> <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5> </li> {/foreach} </ul> </div> {/block} |
Editer le fichier theme.css
Rendez vous dans “themes/classic/assets/css” et ajoutez ce code dans le fichier theme.css :
| 1 2 3 4 5 6 7 8 | #subcategories ul li { float: left; width: 25%; text-align: center; } #subcategories ul li img { margin-bottom: 10px; } |
Vous avez maintenant les sous catégories dans les pages catégories de votre boutique Prestashop version 1.7 😉
