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 😉
