[SOLVED] How to display/reenable the Subcategories on the Categorie Page (PS 1.6.1.10)

[Abdillokra]

Hi everyone,

 

My theme doesn't display the subcategories on the categorie page by default.

 

I've been looking around in the forum to find how to display / reenable the Subcategories displaying on the Categorie page.

 

My Prestashop version is : 1.6.1.10.

 

I've looked too here, but it applies only to PS 1.7 : https://mypresta.eu/prestashop-17/display-available-subcategories.html.

 

 

I've looked at the category.tpl in my theme's folder (C:\wamp64\www\leria\themes\leria\category.tpl)

 

Here's the code :

 

 

*}
{include file="$tpl_dir./errors.tpl"}
{if isset($category)}
    {if $category->id AND $category->active}
        {if $scenes || $category->description || $category->id_image}
            <div class="content_scene_cat">
                 {if $scenes}
                     <div class="content_scene">
                        <!-- Scenes -->
                        {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
                        {if $category->description}
                            <div class="cat_desc rte">
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short">{$description_short}</div>
                                <div id="category_description_full" class="unvisible">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div>{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                    </div>
                {else}
                    <!-- Category image -->
                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     </div>
                  {/if}
            </div>
        {/if}
        
        <h1 class="page-heading{if (isset($subcategories) && !$products) || (isset($subcategories) && $products) || !isset($subcategories) && $products} product-listing{/if}"><span class="cat-name">{$category->name|escape:'html':'UTF-8'}{if isset($categoryNameComplement)} {$categoryNameComplement|escape:'html':'UTF-8'}{/if}</span>{include file="$tpl_dir./category-count.tpl"}</h1>
        <!--{if isset($subcategories)}
        {if (isset($display_subcategories) && $display_subcategories eq 1) || !isset($display_subcategories) }
        <!-- Subcategories --
        <div id="subcategories">
            <p class="subcategory-heading">{l s='Subcategories'}</p>
            <ul class="clearfix">
            {foreach from=$subcategories item=subcategory}
                <li>
                    <div class="subcategory-image">
                        <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 class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {else}
                            <img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-medium_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {/if}
                    </a>
                       </div>
                    <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>
                    {if $subcategory.description}
                        <div class="cat_desc">{$subcategory.description}</div>
                    {/if}
                </li>
            {/foreach}
            </ul>
        </div>
        {/if}
        {/if}  -->
        {if $products}
            <div class="content_sortPagiBar clearfix">
                <div class="sortPagiBar clearfix">
                    {include file="./product-compare.tpl"}
                    {include file="./product-sort.tpl"}
                    {include file="./nbr-product-page.tpl"}
                </div>

            </div>
            {include file="./product-list.tpl" products=$products}
            <div class="content_sortPagiBar">
                <div class="bottom-pagination-content clearfix">
                    {include file="./product-compare.tpl" paginationId='bottom'}
                    {include file="./pagination.tpl" paginationId='bottom'}
                </div>
            </div>
        {/if}
    {elseif $category->id}
        <p class="alert alert-warning">{l s='This category is currently unavailable.'}</p>
    {/if}
{/if}
 

 

 

 

And too at the category.css (C:\wamp64\www\leria\themes\leria\css\category.css)

Here is the code :

 

 

.content_scene_cat {
    color: #d7d7d7;
    line-height: 19px;
    margin: 0 0 26px 0
}

.content_scene_cat .content_scene_cat_bg {
    padding: 18px 10px 10px 42px
}

@media (max-width: 1199px) {
    .content_scene_cat .content_scene_cat_bg {
        padding: 10px 10px 10px 15px
    }
}

.content_scene_cat span.category-name {
    font-size: 30px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 50px;
    color: #fff;
    margin-bottom: 12px
}

@media (max-width: 1199px) {
    .content_scene_cat span.category-name {
        font-size: 25px;
        line-height: 30px
    }
}

.content_scene_cat p {
    margin-bottom: 0
}

.content_scene_cat a {
    color: #fff
}

.content_scene_cat a:hover {
    text-decoration: underline
}

.content_scene_cat .content_scene {
    color: #666
}

.content_scene_cat .content_scene .cat_desc {
    padding-top: 20px
}

.content_scene_cat .content_scene .cat_desc a {
    color: #777
}

.content_scene_cat .content_scene .cat_desc a:hover {
    color: #515151
}

#subcategories {
    border-top: 1px solid #ebebeb;
    padding: 15px 0 0px 0
}

#subcategories p.subcategory-heading {
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0
}

#subcategories ul {
    margin: 0 0 0 -20px
}

#subcategories ul li {
    float: left;
    width: 145px;
    margin: 0 0 13px 33px;
    text-align: center;
    height: 202px
}

#subcategories ul li .subcategory-image {
    padding: 0 0 8px 0
}

#subcategories ul li .subcategory-image a {
    display: block;
    padding: 9px;
    border: 1px solid #ebebeb
}

#subcategories ul li .subcategory-image a img {
    max-width: 100%;
    vertical-align: top
}

#subcategories ul li .subcategory-name {
    font: 600 18px/22px "Open Sans", sans-serif;
    color: #555454;
    text-transform: uppercase
}

#subcategories ul li .subcategory-name:hover {
    color: #515151
}

#subcategories ul li .cat_desc {
    display: none
}

#subcategories ul li:hover .subcategory-image a {
    border: 5px solid #333;
    padding: 5px
}
 

 

 

Can please someone suggest how I could make the subcategories visible on the categorie page (like in the attached image)?

 

Any point I'm not aware of in the code above or needs in other files?

 

What I want is the default Prestashop 1.6 subcategories list normal behavior :

i.e. when I click on the categories title/links on the menu to get the subcategories displaying on the center column (not just the products).
 

 

Many thanks for any help provided.

Edited August 29, 2017 by Abdillokra (see edit history)

[Abdillokra]

[sOLUTION] Miracle!!

 

I just found it (after several hours looking around...  ASK and you shall receive ):

 

It was the category.tpl following line :

 

  <!-- Subcategories --

 

That needed the closing '' > ''

 

like this :

 

<!-- Subcategories -- >

 

Need also to delete the opening and closing "<!-- -- > " of the {if isset($subcategories)} (or else the " --> " characters of the above appears on the category page)

Edited August 29, 2017 by Abdillokra (see edit history)

[Scully]

Pls add 'SOLVED' to the topic title. Thank you.