Ajouter les sous catégories dans Prestashop 1.7 - PrestaSafe
PrestaSafe.com
  • Accueil 
  • Prestashop
    • Présentation de Prestashop 
    • Support et assistance pour Prestashop 
    • Création de votre boutique de vente en ligne 
    • Cartzilla, un thème PrestaShop Performant, Mobile et SEO 
    • Migration PrestaShop 
    • Maintenance technique pour site E-commerce PrestaShop 
  • Blog 
  • Devis en ligne 
  • Boutique 
  • Contact 
  • Mon compte 
    prestashop

    Ajouter les sous catégories dans Prestashop 1.7

    1. By guillaume
    2. 2 Comments

    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:
    2 Comments

    Articles similaires

    08 Déc

    PrestaShop solution e-commerce

    Ajouter un fil d’ariane sur un module front

    10 Fév

    PrestaShop solution e-commerce

    Les bases pour débugger Prestashop

    05 Fév

    PrestaShop solution e-commerce

    PrestaShop Ready ferme ses portes, comment faire ?

    Loading...

    Insérer/modifier un lien

    Saisissez l’URL de destination

    Ou alors, faites un lien vers l’un des contenus de votre site

      Aucun mot n’a été donné pour cette recherche. Voici les recherches précédentes. Recherchez ou utilisez les flèches haut et bas pour choisir un élément.