Populating Multi-Level Category List for CSS Menu

[AngstyG]

I have a spiffy CSS/Jquery menu that's set up like...

<div>
<ul id="SPIFF"><li>A Main Category!
  <ul><li>A Sub Category!
    <ul><li>A Third Category!</li></ul>
  </li></ul>
</li></ul>
</div>

Meh, you get the idea. It's just the usual nested unordered list.

But I need to dynamically populate the categories and I have no idea where to start with that. I see there's a built in "Cool Menu", but it's DHTML, and BLECH. No thanks! I really REALLY want to use the menu I made, I just... dunno where to start.

Right now I'm kicking my feet around in main_page.tpl.php. Is this best? Or should I be including it?

Thoughts? Advice? Oh so very appreciated!

[pgmarshall]

Check out v2.5 is comes with a CSS SEO optimised categories infobox menu already done for you. You can style it to your heart's content using CSS.

Check out the Beta download ...

Regards,

[michael_s]

Or you could just install this into v2.0.25:
osCommerce Community Add-Ons

[AngstyG]

EEEEE, Thanks Michael! I'll give that add-on a try first and if I'm still lost, then I suppose it's upgrade city for me.

[AngstyG]

Okay, so I looked into this, and to be honest, it's going to be the biggest headache ever to reverse engineer it and extract only the category list (there's a lot of javascript which I don't need since I have my own, and also a whole site map thing).

I was wonder, Michael, if I could use your Categories InfoBox to unsorted list menu and CSS to get the structure?

I already have all the javascript and css for my menu. I just need to get the unordered list contents is all.

Thanks again for the help!

[michael_s]

Try it out and let us know, I have never used that mod before.

[AngstyG]

Yesss, got it!

I ended up playing around with catalog/includes/classes/category_tree.php, which as you probably know is what's used for the sitemap nested unordered list. Now, I did have to change the nesting format to suit my menu a bit. The original nest is like this:

<ul>
    <li>
    </li>
    <ul>
        <li>
        </li>
        <ul>
            <li>
            </li>
        </ul>
    </ul>
</ul>

I needed it like this:

<ul>
    <li>
        <ul>
            <li>
                <ul>
                    <li>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

So here's the code for that, in case anyone's looking.

 <?php
 class osC_CategoryTree {
   var $root_category_id = 0,
       $max_level = 0,
       $data = array(),
       $root_start_string = '',
       $root_end_string = '',
       $parent_start_string = '',
       $parent_end_string = '',
       $sub_end_string = '',
       $sub_group_end_string = '</ul></li>',
       $parent_group_start_string = '<ul id="menu" id="menu-primary-navigation">',
       $sub_group_start_string = '<ul>',
       $parent_group_end_string = '</ul>',
       $child_start_string = '<li>',
       $child_end_string = '</li>',
       $spacer_string = '',
       $spacer_multiplier = 1;

   function osC_CategoryTree($load_from_database = true) {
     global $languages_id;
         $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' order by c.parent_id, c.sort_order, cd.categories_name");
         $this->data = array();
         while ($categories = tep_db_fetch_array($categories_query)) {
           $this->data[$categories['parent_id']][$categories['categories_id']] = array('name' => $categories['categories_name'], 'count' => 0);
         }
   }

   function buildBranch($parent_id, $level = 0) {
         if ($level == 0) {
           $result = $this->parent_group_start_string;
        } else {
           $result = $this->sub_group_start_string;
         }

     if (isset($this->data[$parent_id])) {
       foreach ($this->data[$parent_id] as $category_id => $category) {
         $category_link = $category_id;
         

         
         $result .= $this->child_start_string;

         
         if (isset($this->data[$category_id])) {
           $result .= $this->parent_start_string;
         }

         if ($level == 0) {
           $result .= $this->root_start_string;
         }
         $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level) . '<a title="' . $level . '" href="' . tep_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
        if ($level == 0) {
           $result .= '<h6>' . $category['name'] . '</h6>';
         } else {
           $result .= $category['name'];
         }
         $result .= '</a>';

         if ($level == 0) {
           $result .= $this->root_end_string;
         }

         if (isset($this->data[$category_id])) {
           $result .= $this->parent_end_string;
         }

         if (isset($this->data[$category_id])) {
           $result .= $this->sub_end_string;
         } else {
           $result .= $this->child_end_string;
         }
         

         if (isset($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
           $result .= $this->buildBranch($category_id, $level+1);
         }
       }
     }

if ($level == 0) {
    $result .= $this->parent_group_end_string;
} else {
    $result .= $this->sub_group_end_string;
}


     return $result;
   }

   function buildTree() {
     return $this->buildBranch($this->root_category_id);
   }
 }
?>  

I just named this file category_tree_top.php, stuck it into catalog/includes/classes, and called it in the catalog/templates/fallback/main_page.tpl.php like so:

 <?php require DIR_WS_CLASSES . 'category_tree_top.php'; $osC_CategoryTree = new osC_CategoryTree; echo $osC_CategoryTree->buildTree(); ?>  

And that's all! It works super awesome.

Thanks for the help uguise!

[ridexbuilder]

Well done. Thanks for sharing - good community spirit.