Sunday, June 2, 2013

Adding a seperate Category Dropdown for the CSS MegaMenu for Zen cart

So you have installed the excellent CSS Mega Menu module from Picaflor Azul available in the zencart add-ons repostory, and you want to either limit the "Shop" dropdown to one category tree, or you want an additional seperate dropdown for a specific category, well here is how I did it.

The Usual Warning
As usual backup everything before you start, this doesn't touch the database (well it reads from it), so everything goes pear shaped you can fix it by replacing with the original files.

Step 1)

Find you category ID number for the category you with to display
The easiest way to do this is to hover over the category and the category number will appear in the link at the bottom of your page, in this case it is category 1379.

Step 2)

Now if you are wanting to limit the existing "Shop" dropdown to a specific category tree,  do the following step and then you are finished, if you want to make a separate dropdown for a category go straight to Step 3
Ok so you just want to limit the existing dropdown to one Category tree
Navigate to

includes/classes/categories_ul_generator.php

Around line 83, you will find the following function

function buildTree($submenu=false)
{
return $this->buildBranch($this->root_category_id, '', $submenu);
}

Edit it so it looks like this, adding in the correct category id for the your site

function buildTreebb($submenu=false)
{
$root_category_id = 1379;
return $this->buildBranch($this->root_category_id, '', $submenu);
}
Save your changes, upload the file

Next we will change the name of the dropdown so it doesn't say "Shop"
Navigate to

includes/templates/YOUR_TEMPLATE/common/tpl_mega_menu.php

around line 46 you will have the following line

<li class="categories-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_CATEGORIES; ?></a><!-- bof cateories -->

Now we can do flash things and pull the category name from the database etc, but its a damn site faster to just type in the name of the category, like so

<li class="categories-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop">Jenni Bowlin</a><!-- bof cateories -->
Save your changes, upload the file

Go to your website and test the dropdown (you may need to refresh the page first) and it should work fine

You are finished you don't need to read any further.

Step 3)


So here we are creating a seperate dropdown and leaving the "Shop " alone

First we navigate to this folder

 includes/classes/

Now we make a copy of the following file

categories_ul_generator.php

We will call it in this exercise

 categories_ul_generator_bb.php

Now we open the copy we have just made


includes/classes/categories_ul_generator_bb.php

 Around line 24, you will find the following line

  class zen_categories_ul_generator {
var $root_category_id = 0,

Change it to

  class zen_categories_ul_bb_generator {
var $root_category_id = 1379,



 Around line 39, you will find the following line

  function zen_categories_ul_generator($load_from_database = true) 

Change it to

  function zen_categories_ul_bb_generator($load_from_database = true)





Around line 83, you will find the following function

function buildTree($submenu=false)
{
return $this->buildBranch($this->root_category_id, '', $submenu);
}

Edit it so it looks like this, adding in the correct category id for the your site, and changing the name of the function to buildTreebb

function buildTreebb($submenu=false)
{
$root_category_id = 1379;
return $this->buildBranch($this->root_category_id, '', $submenu);
}
Save your changes, upload the file

The next step is to make the dropdown appear on your menu bar

Navigate to

includes/templates/YOUR_TEMPLATE/common/tpl_mega_menu.php

What we are going to do is copy the entire section of code that displays the "Shop" dropdown
in the file above, this should be lines 45 - 69 inclusive so thats all this code

<li class="categories-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_CATEGORIES; ?></a><!-- bof cateories -->

<div class="dropdown_1column">
<div class="col_1 firstcolumn">
<div class="levels">
<?php

// load the UL-generator class and produce the menu list dynamically from there
require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
$zen_CategoriesUL = new zen_categories_ul_generator;
$menulist = $zen_CategoriesUL->buildTree(true);
$menulist = str_replace('"level4"','"level5"',$menulist);
$menulist = str_replace('"level3"','"level4"',$menulist);
$menulist = str_replace('"level2"','"level3"',$menulist);
$menulist = str_replace('"level1"','"level2"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="submenu">',$menulist);
$menulist = str_replace("</li>\n</ul>\n</li>\n</ul>\n","</li>\n</ul>\n",$menulist);
echo $menulist;
?>
</div>
</div>
</div>
</li><!-- eof categories -->

And then we paste it directly underneath so paste it in at about line 70 just above the manufacturers section

Now in you freshly pasted code you need to find the following so we can change the name of the dropdown

<li class="categories-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop"><?php echo HEADER_TITLE_CATEGORIES; ?></a><!-- bof cateories -->

Now we can do flash things and pull the category name from the database etc, but its a damn site faster to just type in the name of the category, like so

<li class="categories-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop">Jenni Bowlin</a><!-- bof cateories -->

Next we need to make the dropdown use our copied dropdown class so find this bit

require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
$zen_CategoriesUL = new zen_categories_ul_generator;
$menulist = $zen_CategoriesUL->buildTree(true);

and replace with this; note all 3 lines have changes, if you don't change them all you page will drop dead directly after the menu title

  require_once (DIR_WS_CLASSES . 'categories_ul_generator_bb.php');
$zen_CategoriesUL = new zen_categories_ul_bb_generator;
$menulist = $zen_CategoriesUL->buildTreebb(true);

Now save and upload the file, then go to your site and test it, you may need to refresh the page

Now you should have a dropdown menu next to the existing "shop" menu
Good Luck

4 comments:

Anonymous said...

thank you! that helped me out :)

Lee P said...

Thanks for this - very useful. I also replaced with a direct link to my subcategory, otherwise it just links to the index page.

Marcus Pierce said...

Thank you so much. That would have taken me an eternity to figure out.

5f3d0d0c-9d21-11e4-a00a-d7c097d97483 said...

NIGEL!!! I shoulda known you would have this tutorial!!!