How to Make Parent Menu Selected When Child Menu Was Selected in Blockcategories Module of PrestaShop

This following modification will make the ability to automatically highlight or select the parent menu when the child menu was selected in blockcategories module of PrestShop. This modification applied to the original modification that created by Marghoob Suleman at the PrestaShop Discussion Forum: [module-modified] categories menu modified. You can see its final result demo in: e-fila.com. If you want to implement this modification, then do not forget to backup your original files.

Open your \modules\blockcategories\blockcategories.tpl file, and replace all of the contents of file with this following code:

{if $isCustomDhtml}
<script type="text/javascript" src="{$module_dir}ddsmoothmenu.js"></script>
<link href="{$module_dir}ddsmoothmenu.css" rel="stylesheet" type="text/css" media="all" />
{else}
<script type="text/javascript" src="{$js_dir}tools/treeManagement.js"></script>
{/if}
<!-- Block categories module -->
 
<div id="categories_block_left" class="block">
  <h4>{l s='Categories' mod='blockcategories'}</h4>
  {if $isCustomDhtml}
  <div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
      {foreach from=$blockCategTree.children item=child name=blockCategTree}
      {if $smarty.foreach.blockCategTree.last}
      {include file=$branche_tpl_path node=$child last='true'}
      {else}
      {include file=$branche_tpl_path node=$child}
      {/if}
      {/foreach}
    </ul>
  </div>
  {else}
  	<div class="block_content" style="margin:0;padding:0">
		<ul class="tree {if $isDhtml}dhtml{/if}" style="margin:0;padding:0">
		{foreach from=$blockCategTree.children item=child name=blockCategTree}
			{if $smarty.foreach.blockCategTree.last}
						{include file=$branche_tpl_path node=$child last='true'}
			{else}
						{include file=$branche_tpl_path node=$child}
			{/if}
		{/foreach}
		</ul>
	</div>	
  {/if}
 
</div>
<!-- /Block categories module -->

Open your \modules\blockcategories\category-tree-branch.tpl file, and then replace all of the contents of file with this following code:

<li style="margin:0;padding:0; " {if $last == 'true'}class="last"{/if}>
 
  <!-- Begin of modified by Masino Sinaga, August 16, 2009 -->	
	<a id="menu_{$node.children|@count}" style="padding:5px; padding-right:0;" href="{$node.link|escape:htmlall:'UTF-8'}"
	{if $node.id == $currentCategoryId} class="selected"{/if}{if $node.id == $currentParentId || $node.id == $currentRootId} class="previousselected"{/if}
	title="{$node.desc|escape:htmlall:'UTF-8'}">{$node.name|escape:htmlall:'UTF-8'}</a>
	<!-- End of modified by Masino Sinaga, August 16, 2009 -->
 
	{if $node.children|@count > 0}
 
		<!-- Begin of modified by Masino Sinaga, August 16, 2009 -->
		<ul {if $node.id == $currentCategoryId || $node.id == $currentParentId || $node.id == $currentRootId} class="selected"{/if}>
		<!-- End of modified by Masino Sinaga, August 16, 2009 -->
 
		{foreach from=$node.children item=child name=categoryTreeBranch}
			{if $smarty.foreach.categoryTreeBranch.last}
				{include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
			{else}
	        		{include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
			{/if}
		{/foreach}
		</ul>
	{/if}
</li>

Open your \modules\blockcategories\ddsmoothmenu.css file, and replace all of the content of file with this following code:

/*
modified for prestashop
marghoob suleman - marghoobsuleman.com
*/
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
height:auto;
display:inline-block;
 
}
 
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
 
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: block;
width:100%;
float: left;
}
 
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #E9E9E9; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-bottom: 1px dashed #c3c3c3;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #c3c3c3;
color: #374853;
text-decoration: none;
}
 
#smoothmenu1 li {
	padding: 0;
	list-style-position: outside;
	display:block;
}
 
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: block;
background: #FFAA55; /* #E9E9E9; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-bottom: 1px dashed #c3c3c3;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #c3c3c3;
color: #374853;
text-decoration: none;
}
 
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: #374853;
display:block;
}
 
.ddsmoothmenu ul li a:hover{
background: #FFAA55; /* #B9D2E0; /*background of menu items during onmouseover (hover state)*/
text-decoration:none;
display:block;
}
 
.ddsmoothmenu ul li a.previousselected{ 
	font-weight:bold;
	background-color:#FFAA55; /* #0093f0; */ 
}
 
.ddsmoothmenu ul li a.selected{ 
	font-weight:bold;
	background-color:#FF7F00; /* #0093f0; */ 
}
 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
 
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
 
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
 
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 178px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom:1px dashed #c3c3c3;
display:block;
}
 
/* ######### CSS classes applied to down and right arrow images  ######### */
 
.downarrowclass{
position: absolute;
top: 7px;
right: 7px;
}
 
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
 
/* ######### CSS for shadow added to sub menus  ######### */
 
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
 
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
 
/* end menu css */

Open your \modules\blockcategories\ddsmoothmenu.js file, and find this code:

12
13

//Specify full URL to down and right arrow images (23 is padding-right added to top level LIs with drop downs):
arrowimages: {down:['downarrowclass', 'modules/blockcategories/right.gif', 23], right:['rightarrowclass', 'modules/blockcategories/right.gif']},