Implementing layered navigation in a theme

The Layered Navigation module appeared in PrestaShop 1.4, and provides shop visitors with a quick way to filter products based on specific criteria.

Unfortunately, it only works for theme which implement it – for instance, older themes have little chance to be able to display it properly. Likewise, your own theme might not yet be able to display it.

Two theme features need to be updated in order to support this navigation style:

• The product quantity in the category, depending on the selected filters. For instance, "There are X products in the category".

• The category title (h1 tag), in order to avoid duplicated content in search engine, and thus improve SEO. For instance, when applying the "blue" filter to the "iPod" category, the category will be "iPods - Blue". Careful: the title is not updated using JavaScript but on page load. If you need to check the category titles, you need to disable JavaScript before using the layered navigation.

All these changes are to be applied to the category.tpl file.

L'intégration de ces fonctionnalités se fait en modifiant un seul template "category.tpl".

First, add the $categoryNameComplement value after the category name:

{$category->name|escape:'htmlall':'UTF-8'}

...becomes...

{$category->name|escape:'htmlall':'UTF-8'} {$categoryNameComplement|escape:'htmlall':'UTF-8'}

Then, remove the part the displays the number of products, and put it in a new category-count.tpl template file. For instance, with PrestaShop's default theme:

<h1>
	{strip}
	{$category->name|escape:'htmlall':'UTF-8'} {$categoryNameComplement|escape:'htmlall':'UTF-8'}
	<span class="category-product-count">
		{if $category->id == 1 OR $nb_products == 0}{l s='There are no products.'}
		{else}
			{if $nb_products == 1}{l s='There is'}{else}{l s='There are'}{/if}
			{$nb_products}
			{if $nb_products == 1}{l s='product.'}{else}{l s='products.'}{/if}
		{/if}
	</span>
	{/strip}
</h1>

...becomes...

<h1>
	{strip}
	{$category->name|escape:'htmlall':'UTF-8'} {$categoryNameComplement|escape:'htmlall':'UTF-8'}
	<span class="category-product-count">
		{include file="$tpl_dir./category-count.tpl"}
	</span>
	{/strip}
</h1>

The new category-count.tpl file contains the lines that were removed from category.tpl

{if $category->id == 1 OR $nb_products == 0}{l s='There are no products.'}
{else}
	{if $nb_products == 1}{l s='There is'}{else}{l s='There are'}{/if}
	{$nb_products}
	{if $nb_products == 1}{l s='product.'}{else}{l s='products.'}{/if}
{/if}