Unleash the Full Potential of Your PrestaShop Store

Welcome to MyPresta.eu – Your reliable partner in the e-commerce world. Find innovative modules that will take your business to a new level.

Highlight selected category in block categories module

 

highlight selected category prestashop

 

Hello, today i want to show you how easily you can highlight selected category in default prestashop module: block categories. This module displays all available categories in your store. By default it is located in left hand side column. Selected category <li> element has got class="selected", take a look on module template file:

 

<li {if isset($last) && $last == 'true'}class="last"{/if}>
	<a href="{$node.link|escape:'htmlall':'UTF-8'}" {if isset($currentCategoryId) && $node.id == $currentCategoryId}class="selected"{/if}
		title="{$node.desc|strip_tags|trim|escape:'htmlall':'UTF-8'}">{$node.name|escape:'htmlall':'UTF-8'}</a>
	{if $node.children|@count > 0}
		<ul>
		{foreach from=$node.children item=child name=categoryTreeBranch}
			{if $smarty.foreach.categoryTreeBranch.last}
				{include file="$branche_tpl_path" node=$child last='true'}
			{else}
				{include file="$branche_tpl_path" node=$child last='false'}
			{/if}
		{/foreach}
		</ul>
	{/if}
</li>

 

What does it mean? It mean that you can add simple css definition into your global.css file. So, please open yout theme directory (/themes/YOUR_THEME/) and then open global.css file. Add somewhere (no matter where) this code:

#categories_block_left li a.selected {
background: orange;
}

Ofcourse instead background:orange; you can use other color or url to image like:

#categories_block_left li a.selected {
background: url('http://url.to.your.image.dot.com/image.jpg');
}

 

effect:

categories block prestashop selected li element

 

 

 

Zdjęcie autora: Milosz Myszczuk

Artykuł napisany przez Milosza Myszczuka, eksperta PrestaShop i oficjalnego moderatora społeczności PrestaShop. CEO i założyciel agencji interaktywnej VEKIA. Dowiedz się więcej.

If you like this article, support our work!

Comments