Ajouter les sous catégories dans Prestashop 1.7 - PrestaSafe
PrestaSafe.com
  • Accueil 
  • Prestashop 
  • Blog 
  • Devis en ligne 
  • Boutique 
  • Contact 
  • Mon compte 

    30 Oct

    PrestaShop solution e-commerce

    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 😉

    share:
    No Comments

    Articles similaires

    17 Nov

    PrestaShop solution e-commerce

    Installer prestashop avec mysql 5.7

    24 Oct

    Interview par Maketing301

    04 Fév

    PrestaShop solution e-commerce

    TUTO – Prestashop rendre le numéro de télÃ