Want to hide upper level categories in ZenCart?

A simple categories sidebox mod to hide non-active upper branches in the category tree

On StarCycle.com The category tree is used for Make-Model-Year application/fitment browsing. The problem: by the time you’re into the year level of the tree, you may be displaying 100s of mid-level categories that will simply be superfluous to the user. The ideal solution would be to have the current branches of the tree shown, and hide the rest. The thought being: if a customer is shopping for parts for their bike, it’s unlikely they’ll want to jump around to different makes and models.

There is one consideration: this uses the cpath in the URL, so obviously only works if the cpath is displayed. Most re-write mods should give the option to leave it on. If you see something like ‘?cPath=123_456_789’ when browsing by category, you’re set! The implementation is pretty simple using CSS and adding a few classes to the HTML in the PHP script that builds the category display. The CSS is a quite simple couple of lines:

.drewsInactiveClass {
        display:none;
}
.category-subs-selected {
        color:red;
}

This simply hides the inactive class, and adds emphasis to the current branch. The second class isn’t really required, but does allow extra emphasis if you leave the specials, featured products, or other categories permanently displayed.

The categories sidebox edits happen in ‘tpl_categories.php’ in your template/sideboxes directory. This mod was done using the ‘better categories’ mod, but the principle remains the same in the standard categories sidebox. For love of your sanity, backup the original file first!

If you want a ‘Home’ level you’ll need to add this line to the beginning of the $content building:

$content .= '<div class="betterCategories"><a class="category-top" href="/"><span class="category-subs-parent">HOME</span></a></div>';

Add it directly after:

$content = "";
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";

Use the following code to determine the category level based on the cpath in the URL (it’s quick dirty code and can probably be greatly improved, but it works). This should all go in the for loop that builds the tree, but before any output to the $content variable:

unset($cpathnumar);
unset($curcpathar);
$tpcpathnum = explode('cPath=',$box_categories_array[$i]['path']);
//explode the cpath string into chunks, the last will be the string num

$cpathnum = $tpcpathnum[1];
//pass the cpath num to it's own var

$cpathnumar = explode('_',$tpcpathnum[1]);
//explode the current cpath into cats/subs

$curcpathar = explode('_',$_GET[cPath]);
//explode the current pages cpath into cats/subs

$thisparentcat = $cpathnumar[0];
$pageparentcat = $curcpathar[0];
$thisSecLevCat = $cpathnumar[1];
$pageSecLevCat = $curcpathar[1];
$thisThdLevCat = $cpathnumar[2];
$pageThdLevCat = $curcpathar[2];
$thisForLevCat = $cpathnumar[3];
$pageForLevCat = $curcpathar[3];
$thisFivLevCat = $cpathnumar[4];
$pageFivLevCat = $curcpathar[4];
$thiscatlevels = count($cpathnumar);
$pagecatlevels = count($curcpathar) + 1;

if ($_GET[cPath] == null) {             
        //set all current if it's not a cat page
        $drewsstylepointer = ' drewsCurrentClass';
        //note that this class isn't styled in the stylesheet, but could be if desired
} else {
        $drewsstylepointer = ' drewsInactiveClass';
        if($thisparentcat == $pageparentcat && ($thiscatlevels == 1 || $thiscatlevels == $pagecatlevels)) {
                //includes the parent categ ONLY!
                $drewsstylepointer = ' drewsCurrentClass';
       }
        if($thisSecLevCat == $pageSecLevCat && ($thiscatlevels == 2 || $thiscatlevels == $pagecatlevels)) {
                $drewsstylepointer = ' drewsCurrentClass';
        }
        if($thisThdLevCat == $pageThdLevCat && ($thiscatlevels == 3 || $thiscatlevels == $pagecatlevels)) {
                $drewsstylepointer = ' drewsCurrentClass';
        }
        if($thisForLevCat == $pageForLevCat && ($thiscatlevels == 4 || $thiscatlevels == $pagecatlevels)) {
                $drewsstylepointer = ' drewsCurrentClass';
        }
        if($thisFivLevCat == $pageFivLevCat && ($thiscatlevels == 5 || $thiscatlevels == $pagecatlevels)) {
                $drewsstylepointer = ' drewsCurrentClass';
        }
}

Now the $drewsstylepointer var will have the class needed to hide or show the branch as desired. The last thing to change; actually inserting the style. There should be a line that builds the div or anchor used to display the branch very similar to this:

$content .= '<div class="betterCategories"><a class="' . $new_style . '" href="' . zen_href_link ...

Simply concatenate the new style variable into the div (or anchor, whatever your sidebox uses):

$content .= '<div class="betterCategories' . $drewsstylepointer . '"><a class="' . $new_style . '" href="' . zen_href_link ...

That’s all it takes! This should now eliminate the extraneous category branches when browsing via application. For instance, when browsing for parts here: Suzuki -> DRZ400 -> 2003, the category sidebox won’t be filled with all the other makes, models, and years causing the page to stretch down to oblivion. Navigation up and down is easier, and all the categories are still there, only hidden. This also has the benefit not breaking the page for bots, text only, and other non-visual clients.

If anyone would like the modified files, please ask and I’ll post them or email them to you. Also, suggestions on improving this code or methodology are greatly appreciated.

6 thoughts on “Want to hide upper level categories in ZenCart?

    • A little off topic, but why not? I would suggest signing up for xmarks free bookmark sync service. After you’ve synced your bookmarks, they’ll be safe in the cloud. Once you’ve installed your browser of choice on your new computer, simply install the xmarks plugin, sign into your account, and sync your bookmarks. Piece of cake 🙂
      The other option would be to export your bookmarks as an html file, then save it to a thumb-drive or something similar. You can then import them back into firefox on the new computer. The downside with this compared to xmarks: it’s pretty specific to firefox, where as xmarks works across many, many browsers (even IE)

  1. Thank you for sharing excellent information. Your website is very cool. I’m impressed by the details that you’ve on this website. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for extra articles.

  2. I know this web site gives quality depending articles and additional data, is there any other web site which presents these things in quality?

Comments are closed.