How to highlight the current category in the header in OpenCart

If you use categories in the header in OpenCart as navigation, it helps with usability to highlight the parent, or top-level category of the page your user is on. Here’s how to list categories and highlight the parent category without any edits to the source code.

Following on from my previous posts about listing categories in the header and listing categories and sub-categories in the header in OpenCart, I thought I’d try to work out how to highlight the top-level category, just to finish the job I’d started.

It turned out to be reasonably easy.

If you are on a category page, or on a product page reached via a category, and you run $this->request->get['path'] it outputs the category path that you see in the URL. For example, if you are on a page with a URL like this:
then $this->request->get['path'] will output “25_28″.

All we need to do is then get the first number from that string, which will give us the category ID of the top level category. I’m not a PHP programmer so there’s probably a much better way of doing this, but the method I’ve used works. I ‘explode’ the output, using “_” as the delimiter. This means if you explode 25_28 using “_” you will get an array with key zero (the first key) having a value of 25 and key one (the second key) having a value of 28. What we want to use is the first one, key zero, which is stored at $the_array[0].

We can now easily highlight the top-level category. As we list the categories using <li>, when we come across the one with the top-level ID we list it using <li id=”current-cat”> and then give #current-cat a style in the stylesheet, e.g:
#current-cat {background-color: #cccccc;}

Job done!

Below is the code for listing top-level categories and highlighting the one your user is in. If you want to list subcategories too, see my other post on listing subcategories mentioned above.

$top_cat_id = '';
if (isset($this->request->get['path'])) {
$path = $this->request->get['path'];
$cat_array = explode ("_", $path);
$top_cat_id = $cat_array[0];
$results = $this->model_catalog_category->getCategories();
if ($results) {$output = '<ul>';}
foreach ($results as $result) {
$new_path = $result['category_id'];
$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;
$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);
if ($new_path == $top_cat_id) {
$output .= '<li id="current-cat"><a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['name'].'</a>';
} else {
$output .= '<li><a href="'.str_replace('&', '&amp;', $rewritten).'">'.$result['name'].'</a>';
$output .= '</li>';
if ($results) {$output .= '</ul>';}
echo $output;

This entry was posted in OpenCart Mods. Bookmark the permalink.

4 Responses to How to highlight the current category in the header in OpenCart

  1. Mark says:

    Thanks! What if I want to get the path of a specific category…not the category of the page I am currently on? How do you:

    $path = $this->request->getPATH['category_id'];

  2. Craig says:

    Hi Mark, sorry about the late reply, I was on holiday. I’m not quite sure what you mean. get['path'], as detailed above, outputs the path of categories e.g. 25_28. The top level category is 25, the next level category is 28. Could you give me an example of what you are trying to do and I’ll see if I can work out how to do it. There’s almost always a way.

  3. Alistair says:

    Hi Craig,

    I brutalised your code some to make a 3rd level. Here it is…

  4. Craig says:

    Hi Alistair, that’s cool. Have been meaning to post some of this stuff on the forums myself but just never seem to have the time. Just got a shop up and running over a month ago and since then I’ve been installing SSL certificates and going crazy when the order alert emails seemed to stop for no reason. Will have a look at your code when I get a chance but I’m sure it’s great, and not brutal at all.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>