Zen Cart Multi Level Category Slide Out Menu

Share

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 😀

This entry was posted in PHP, Recurssion, Zen Cart and tagged , , . Bookmark the permalink.
 

16 Responses to Zen Cart Multi Level Category Slide Out Menu

  1. Reynold Hugh says:

    Excellent Job!
    Zen Cart Templates

  2. Ruth says:

    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.

  3. Nicos says:

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

  4. Indli says:

    Your blog is cool. To gain more visitors to your blog submit your posts at indli.com

  5. Robin says:

    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

  6. cristalweb says:

    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.

  7. Sumit Surai says:

    @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.

  8. Adam Haworth says:

    Great addon will definitely use this in my store.

  9. Simone says:

    Hello,
    I’ve installed this on ZenCart 1.3.9h but the Categories are not displayed. WHY?
    Please let me know.

  10. Nilo says:

    my zencart store working with all business theme , when i try to change the category menu to flyout style, i get error .

    any ideas?


  11. i m using this code but main categories are hidden means it’ visibility not changing at runtime. How to solve this problem?

  12. Sumit Surai says:

    This solution now comes as a plugin. So please use that plugin rather than trying to change files manually for smoother implementation. If there are still any problem post the issue along with the URL.

  13. Jay says:

    I have successfully installed this mod on zencart 1.5.1 and all seems to be working well however I only want it to “slide out” up to 3 sub categories for instance “main category>subcat1>subcat2” however it will go out as many sub categories as I have, (sometimes as many as 6 or 7) is there a way to fix this?

    • Sumit Surai says:

      Hi Jay,

      To restrict the slide out feature to 3 levels you need to change the code a bit. In the recursive function where the categories / sub categories are generated a check for 3 levels needs to be added.

      But, the problem is, if you restrict the slide out to only 3 levels, how will the users ever access the next levels?

  14. annika says:

    Hi there – what a great plugin, thank you for sharing that! We have Zencart 1.3.9h – do you think I could install your latest version, which is for Zen 1.5.1, or should I install the first version (1.0 for 1.3.9). Many thanks!

    • Sumit Surai says:

      Hello Annika,

      Please first use the latest version. I created it for latest ZenCart but didn’t test it on 1.3.9h – so it can also be backward compatible.

      If the latest version throws error please use the older version compatible with v1.3.9

Leave a Reply

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

*