Overriding the Top Horizontal Menu Module

To make our modification scalable and have it preserve in future upgrades, of not only PrestaShop, but the module itself, we will create an override of it. Please notice overrides are only available for version 1.6.0.11 and newer. If you are using an older PrestaShop version, you will have to amend the core files directly.

Create a new folder named blocktopmenu inside override/modules. Within it, create a new file and name it blocktopmenu.php. Open it up in your favorite code editor and add some generic override code inside php tags:

class BlockTopMenuOverride extends BlockTopMenu
{

}

We want to override a method named generateCategoriesMenu. It’s a protected function so we can easily extend it. Make sure you copy and paste the original one from your module here, as mine might differ even slightly:

	protected function generateCategoriesMenu($categories, $is_children = 0)
	{
		$html = '';

		foreach ($categories as $key => $category)
		{
			if ($category['level_depth'] > 1)
			{
				$cat = new Category($category['id_category']);
				$link = Tools::HtmlEntitiesUTF8($cat->getLink());
			}
			else
				$link = $this->context->link->getPageLink('index');

			$html .= '<li'.(($this->page_name == 'category'
				&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
			$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

			if ($category['level_depth'] < 4 && isset($category['children']) && !empty($category['children']))
			{
				$html .= '<ul>';
				$html .= $this->generateCategoriesMenu($category['children'], 1);

				if ((int)$category['level_depth'] > 1 && !$is_children)
				{
					$files = scandir(_PS_CAT_IMG_DIR_);

					if (count($files) > 0)
					{
						$html .= '<li class="category-thumbnail">';

						foreach ($files as $file)
							if (preg_match('/^'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								$html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></div>';

						$html .= '</li>';
					}
				}

				$html .= '</ul>';
			}

			$html .= '</li>';
		}

		return $html;
	}

We are interested in the following line:

			$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

Which is the one responsible for displaying the link to each category. However, if we were to remove the anchor as it is, it would get rid of all the links, and we want to keep the ones inside mega menus. We need to add a condition that first checks we are dealing with our top level. How can we do it?
The most logical way would be to check the “level_depth” property of the current category. This might work, in case your top menu categories all belong to the same depth level.

However, we can use another, more reliable variable: $is_children. It’s passed to each iteration of the loop used to generate the category tree, and checks whether we are in the top level or not, so it’s ideal for our purpose. Knowing that, we can replace the previous line with some logic:

if ($is_children == 0)
	$html .= '<a>'.$category['name'].'</a>';
else
	$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

Please notice it needs an anchor wrapper in any case, to retain its style. Save the override, then reach the cache folder and get rid of class_index.php so that the override takes place. Depending on your configuration, you might as well need to go to Advanced Parameters, Performance, and clear cache.

The post Removing links from the top level in the PrestaShop top Menu appeared first on NemoPS.

Watch The Screencast

The post Enable Ajax and Instant search for the Prestashop Top Menu appeared first on NemoPS.

• Version used: Prestashop 1.5.3 (compatible with all 1.5 top menus)

Step 1 – Inspecting the Prestashop top menu and preparing files

First of all, let’s have a look at the top menu, and see what can be done to target the “current” class. Click on any top level category of your shop, and fire up your favorite debugging toolbar (I’ll use Chrome Developer Tools in this example)

The current element has the sfHoverForce class assigned

As you can see, when in a category, that very same link’s parent is given the class sfHoverForce. Easy enough to target, isn’t it?

Now, it’s bad practice to directly edit core files, therefore we will use an override for the stylesheet, and another one for the javascript. Go to the modules folder, then blocktopmenu, and copy the css/ folder. Reach your theme folder, open css/, and, if not already there, create a new subfolder called modules. Inside it, create a new folder named blocktopmenu, and finally paste the css folder inside this.

You might also want to copy the entire img/ folder of the module inside this one (not css/, the parent), so that you can see images.

For the javascript, go back to the original module’s folder, open js/ and copy superfish-modified.js. Again, in your theme’s folder, open js/, then modules/ (which should already be there, if not, create it), and create another folder named, useless to say, blocktopmenu. Inside it, create one last folder called js, and paste the superfish file inside it.

If you did it correctly, you should have the following structure:

• theme_name/css/modules/blocktopmenu/css/superfish-modified.css
• theme_name/css/modules/blocktopmenu/img/all image files…
• theme_name/js/modules/blocktopmenu/js/superfish-modified.js

If not, or if all this sounded like vodoo magic to you, have a look at the official Prestashop documentation about overriding a module’s default behavior.

Step 2 – Adding the current menu item’s style

Now that our files are properly setup, open up superfish-modified.css (not the original one, but the one you copied over in the theme’s folder). Please note that I’m using the default Prestashop template for this example. Let’s target our “current” class first. At the end of the file, add the following style:

.sf-menu > li.sfHoverForce > a{
	background-color: white;
	color: #000 !important;
	text-shadow: none;
}

Explanation: Just some ordinary css. I’m targeting the anchor tag(a) which is direct descendant of the shHoverForce-classed li, which is itself direct child of the topmost menu element. I’m doing this, and with descendant selectors, since I don’t want any other sub-link to have the “current” state’s white background, but only the top level ones. Of course, if you do want it, feel free to use a regular selector. Also note that I’m just using some ordinary styles for demonstration purposes; feel free to change the values as you like.

If we now reload the page, we will see something like this

The link to current page now shows as “active”

NOTE: the top menu block is bugged in 1.5.3.1 (with chrome at least). Therefore, when you’re in a category, not all subcategories will show up in the menu. Fixing it is beyond the scope of this tutorial, thus I will not cover it.

You will see we are currently targeting the actual category we are in. But what if we are in a subcategory, or other pages? Let’s look at the other pages first, and the class they have been assigned.

I created 2 more links in the top menu, one linked to a product (the Belkin Folio) and another one linked to a CMS page. By inspecting those links when in the respective pages, I can see they’ve been assigned the sfHover class. Weird. This is not consistent, Prestashop Team! … But let’s put complaints aside and deal with it. We could target that class, of course, but that’s also the name of the class assigned to an element when hovering on it with the mouse, and this is bad if we want to have two separate styles. We’ll need to add some javascript to handle this.

Step 3 – Target other pages and subcategories

First, open up superfish-modified.js (again, the override!). Locate the jQuery wrapper at about line 122 (Prestashop 1.5.3.1). You will see something like this:

jQuery(function(){
	jQuery('ul.sf-menu').superfish();
});	

Inside that wrapper, after the superfish() function call, add the following

	$('.sfHover').addClass('sfHoverForce'); // will only target current links, since it's fired upod page load

And this way, as written in the comment, we are appending our sfHoverForce class to the elements that already have .sfHover when the page loads (therefore, we don’t affect any further hover state). refresh the product or CMS page, and you’ll see it’s now properly targeted. Cool, but we’re not done yet. I added a subcategory to Accessories, and I can see Accessories itself is not set as “current” if I’m in that subcategory. We have to fix this, and it will be a bit more complex. In the very same javascript file, add the following code after that last one we just wrote:

	function recursiveCheck(element)
	{
		if (!element.length)
			return;
		var the_ul = element.parent(); // unordered list parent
		if (the_ul.hasClass('sf-menu'))
			element.addClass('sfHoverForce'); //means it is another list item, add the class
		else recursiveCheck(the_ul.parent());
	}
	recursiveCheck($('.sfHoverForce'));

Explanation: wait! Don’t run away! First we create a “recursive function”. This function grabs the current sub-link with the class sfHoverState as the only argument. First, it checks that there currently is at least one element with that class applied. If not, it breaks, otherwise we might end up in an infinite loop. It then creates a variable for its direct parent (the unordered list). If this parent is the top most menu element (with the class sf-menu) we add the sfHoverForce class to the current list item. If not, we call the very same function again, and this time the argument we pass is the parent ul’s parent, therefore another list item, one level higher than our first one. We go on with this until we reach the top level, and add the current state to our top level link. This will work with the many sub-category levels you can imagine. Lastly, we call the function by targeting the only link that currently has the sfHoverForce class as the page loads (alas, our subcategory in this case).

Finished result. This will work with all pages & subcategories

Reload the page in any subcategory, and you should have the links as you want!

The post Prestashop top menu: add ‘active’ state for current page appeared first on NemoPS.