# 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}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.prestashop-project.org/1-4-documentation/english-documentation/designer-guide/implementing-layered-navigation-in-a-theme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.