The post Display products from subcategories in PrestaShop 1.6 appeared first on NemoPS.

Long time PrestaShop users have always been able to display subcategories in category pages, whatever theme they used. However, for some reason PrestaShop 1.7 doesn’t seem to have any subcategory showing on page with the classic (standard) theme, making it harder for users to navigate through the catalog, if the merchant chose not to use the side category block or layered navigation. Taking them back is fortunately easy enough, and can be done by almost just cloning the code from the 1.6 default-bootstrap template.
The files we need to edit are category.tpl and theme.css, so let’s get to it!

Adding the subcategories loop to PrestaShop 1.7’s category template

In the classic theme, let’s open up category.tpl, located in themes\classic\templates\catalog\listing, it should look like the following:

{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>
        <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}

What we want to do is append the subcategory loop inside the block, just before it closes, so after the div containing the category title. The $subgcategories variable is already assigned to the template, much like in PrestaShop 1.6, and it’s ready to be used:

<div id="subcategories">
  <p class="subcategory-heading">{l s='Subcategories'}</p>
  <ul class="clearfix">
  	{foreach from=$subcategories item=subcategory}
  	<li>{$subcategory.name}</li>
	{/foreach}
   </ul>
</div>

The code we just added is pretty much useless at this stage, as it just prints out each subcategory’s name, but let’s first see if it works. Save and refresh any category having children, and subcategories should pop up like this:

Nice! Let’s not make our effort useful by linking them to the proper pages

<div id="subcategories">
  <p class="subcategory-heading">{l s='Subcategories'}</p>
  <ul class="clearfix">
  	{foreach from=$subcategories item=subcategory}
  	<li>
  		<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>

Explanation: I copied and pasted the code from 1.6 for the category title, simply wrapping the name in an h5 tag, then an anchor pointing to the proper page. To get the url, we can still use the $link class, and its getCategoryLink method. I also left in the truncate modifier for the name, which cuts it to the length of 25 characters, and lastly escaped it.

At this point they are at least useful! But why don’t we go ahead and add the image as well? Let’s do it right before the h5:

<div id="subcategories">
  <p class="subcategory-heading">{l s='Subcategories'}</p>
  <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 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>

Explanation: once more, we are using the link class’s method to get the correct url pointing to the subcategory; then, we simply add an img tag, pointing directly to the category images folder, as each of them has an image named with the corresponding ID. Careful though! We have no way to check if the category has an image or not, and since the default method this theme uses is broken (heh.), you might as well get away without images.
At this point you should have something like this, depending on your images’ size:

It needs some styling, so let’s see what we can do with css!

Styling subcategories in PrestaShop 1.7

Open up theme.css, located in themes\classic\assets\css. At the very end, let’s append our css code:

.subcategory-heading {
  font-weight: bold;
}
#subcategories ul li {
  float: left;
  width: 25%;
  text-align: center;
}
#subcategories ul li img {
  margin-bottom: 10px;
}

I preferred staying on a simple styling here, and of course you will need to adapt the width depending on your category image size. Also, you might want to add media queries to make sure it displays well at smaller resolutions.
Save and refresh, we are done!

The post Adding subcategories to the category page in PrestaShop 1.7 appeared first on NemoPS.