Zen Cart Multi Level Category Slide Out Menu

This hack is now available as a downloadable plugin from the Zen Cart site. Please visit this link to download it.

The plugin uses separate files of its own and doesn’t need any of the existing files to be updated.

The Zen Cart Category Menu shows only the sub categories of the currently selected category. Also the way it is shown is not visually great at all. With big category names and a few levels it gets uglier.

The solution can be a slide out menu. As the sub categories slide out, they will make their own room and not look ugly.

For this two modification needs to be made to the existing Zen Cart system.

1. Call all categories and subcategories in a single page
2. Make them slide out

Lets see the steps for the first requirement

1. Open the file includes\functions\functions_categories.php
2. Add the following function

////// Get ul li
function zen_get_categories_ul_li($categories_ul_li = '', $parent_id = '0', $cpath = '') {
global $db;

$categories_query = "select c.categories_id, cd.categories_name, c.categories_status
                     from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
					 where " . $zc_status . "
					 parent_id = '" . (int)$parent_id . "'
					 and c.categories_status = TRUE
					 and c.categories_id = cd.categories_id
					 and cd.language_id = '" . (int)$_SESSION['languages_id'] . "'
					 order by sort_order, cd.categories_name";
					 
$categories = $db->Execute($categories_query);
$categories_ul_li .= "
    "; while (!$categories->EOF) { $dpath = $cpath.$categories->fields['categories_id']; $categories_ul_li .= "
  • ".$categories->fields['categories_name'].''; if ($categories->fields['categories_id'] != $parent_id) { if(zen_has_category_subcategories($categories->fields['categories_id'])){ $categories_ul_li = zen_get_categories_ul_li($categories_ul_li, $categories->fields['categories_id'], $dpath.= "_"); } $categories_ul_li .= "
  • "; $categories->MoveNext(); } $categories_ul_li .= "
"; return $categories_ul_li; }

3. Open the file includes\templates\{your_template_name}\sideboxes\tpl_categories.php
4. Comment out the entire loop –
for ($i=0;$i<sizeof($box_categories_array);$i++) { ….. }
5. After that add the following lines

$content .= '';

This would show the entire category / sub category using ul , li

Now for getting the slide out effect I have done the following

1. Download the slide out menu from DHTML Goodies – http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-slide-out-menu/dhtmlgoodies-slide-out-menu.html
2. Use the slide out menu new version which supports multi level.

That’s it 😀

9 comments

  1. Hi

    Great code, thanks
    You have a problem with the link on line 16 (you are linking to blogger instead of the site).

    I tried:
    $categories_ul_li .= "<LI><a href='index.php?main_page=index&cPath=".$dpath."'>".$categories->fields['categories_name'].'</A>';

    and it worked.

  2. I repeat Nicos que. :

    The slide out menu, files that i have downloaded, where i have to put them?

    plz help someone….i need it as soon as possible

  3. I like your slide out menu and will implement it in my store.

    Suggestion for functions/functions_categories.php to show only enabled catagories:

    $categories_query = "select c.categories_id, cd.categories_name, c.categories_status
    from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
    where " . $zc_status . "
    parent_id = '" . (int)$parent_id . "'
    //// display only categories which are enabled in admin
    and c.categories_status = TRUE
    ////
    and c.categories_id = cd.categories_id
    and cd.language_id = '" . (int)$_SESSION['languages_id'] . "'
    order by sort_order, cd.categories_name";

    Thanks for a fine contribution.

  4. @Ruth
    Yes after posting the code blogger did some mistakes 🙂 Have corrected that. Also Blogger have mishandled a few quotes. I will try to post a link where from the code can be downloaded. Till then please correct the quotes.

    @Nicos @Robin

    You need to put the js and css folders from the downloaded zip inside the template folder you are using. After that include the css and js files in html_header.php file found inside common folder of your template

    That should do. Hope it helped

    @cristalweb

    Thanks for the suggestion 🙂 Have updated it.

Leave a comment

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