25 fév

Par: Guillaume

Ajouter les sous catégories dans Prestashop 1.7

Dans le nouveau thème par défaut de Prestashop, on peux s’aperçevoir qu’il n’y a plus le listing des sous catégories.

Nous allons voir comment le rétablir

En regardant le code du nouveau thème, je me suis rendu compte qu’il n’y avait plus les sous catégories,

pourtant, en testant la variable $subcategories on s’aperçoit qu’elles sont toujours présentes…

Comment rétablir les sous catégories dans Prestashop 1.7 ?

Pour cette opération, il faut modifier 2 fichiers:

category.tpl
custom.css

Editez le premier fichier category.tpl se trouvant dans: /themes/classic/templates/catalog/listing/category.tpl

Positionnez vous en dessous de:

<div class="text-sm-center hidden-md-up">
      <h1 class="h1">{$category.name}</h1>
    </div>

Et rajoutez:

{if isset($subcategories) && $subcategories|count > 0}

    <!-- Subcategories -->
    <div id="subcategories" class="row">
      <p class="subcategory-heading">{l s='Subcategories'}</p>
      <ul class="clearfix">
      {foreach from=$subcategories item=subcategory}
        <li class="col-md-4 thumbnail-container">
          <div class="subcategory-image text-center">
            <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
            {if $subcategory.id_image}
              <img  src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
            {else}
              <img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
            {/if}
          </a>
          </div>
          <p><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></p>
          {if $subcategory.description}
            <div class="cat_desc">{$subcategory.description|truncate:110:'...'|strip_tags}</div>
          {/if}
        </li>
      {/foreach}
      </ul>
    </div>

    {/if}

Ensuite allez dans le css qui se trouve dans: /themes/classic/assets/css/custom.css

et collez:

 #subcategories .thumbnail-container{
    position: relative;
    padding-top: 10px;
    margin-bottom: 1.563rem;
    margin: 0 .625rem;
    height: 318px;
    width: 257px;
    background: #fff;
    box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
}

p.subcategory-heading{
  color: #000;
  font-weight: bold;
}
 #subcategories .thumbnail-container a{
  display: block;
  text-align: center;
 }

Videz votre cache du navigateur et de prestashop

allez sur une catégories et admirez le changement.

Enjoy ;)