[Contribution] Category Box as Nested Unordered List v1.0

[Bonez]

Hi,

 

I hope that someone can help a newbie.

 

I'm using STS 4.5.8, and would like categories as an unordered list so that I can use CSS to style it. The whole layout uses CSS rather than tables.

 

I've followed the instructions, but it simply isn't working. I have obviously overlooked something very important (and probably obvious). Do I need to put a call into my HTML where I want the UL to appear?

 

Help !

[Guest]

Is it possible to display only the subcategories without the top categories??

 

What do i have to change??

 

Did anyone ever figure this out? I'm trying to do this, but I haven't made it happen yet.

 

I just want the subcategories to show as I have only 2 top level categories that aren't selected off of the standard menu.

[zozzoozzz]

Thanks for your great ul_categories contribution , I installed it on my OSC store , and want to make a new css style , I found a very useful CSS style for my store ,but I am not be able to covert this style to mine. this css style codes is :

<style type="text/css">

#info {height:500px;}

 

#menu {margin-top:100px;}

#menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(bottom.gif) no-repeat bottom left;}

#menu dt {margin:0; padding: 10px; font-size: 1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(top.gif) no-repeat top left;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; border-bottom:1px solid #fff; background: #47a;}

#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px;

background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;

}

#gallery a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}

 

ol li {font-size:11px;}

 

</style>

 

 

</head>

 

 

<div id="info">

 

<h2>A Definition List Menu</h2>

 

<div id="menu">

<dl id="gallery">

<dt>Art Gallery</dt>

<dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>

<dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>

<dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>

<dd><a href="#" title="William Turner">William Turner</a></dd>

<dd><a href="#" title="John Constable">John Constable</a></dd>

<dd><a href="#" title="Claude Monet">Claude Monet</a></dd>

</dl>

</div>

 

 

</div> <!-- end of info -->

 

 

 

and have a demo here:

http://www.cssplay.co.uk/menus/definition.html

 

Is possible to set my css code like this? could u give me some suggestion to do that?

 

 

thanks u a lot in advance.

 

Kind Regards

 

JUN

[zozzoozzz]

Thanks for your great ul_categories contribution , I installed it on my OSC store , and want to make a new css style , I found a very useful CSS style for my store ,but I am not be able to covert this style to mine. this css style codes is :

<style type="text/css">

#info {height:500px;}

 

#menu {margin-top:100px;}

#menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(bottom.gif) no-repeat bottom left;}

#menu dt {margin:0; padding: 10px; font-size: 1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(top.gif) no-repeat top left;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; border-bottom:1px solid #fff; background: #47a;}

#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px;

background: #47a url(arrow.gif) no-repeat 10px 10px; width:125px;

}

#gallery a:hover {background: #258 url(arrowr.gif) no-repeat 11px 10px; color:#9cf;}

 

ol li {font-size:11px;}

 

</style>

 

 

</head>

 

 

<div id="info">

 

<h2>A Definition List Menu</h2>

 

<div id="menu">

<dl id="gallery">

<dt>Art Gallery</dt>

<dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>

<dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>

<dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>

<dd><a href="#" title="William Turner">William Turner</a></dd>

<dd><a href="#" title="John Constable">John Constable</a></dd>

<dd><a href="#" title="Claude Monet">Claude Monet</a></dd>

</dl>

</div>

 

 

</div> <!-- end of info -->

 

 

 

and have a demo here:

http://www.cssplay.co.uk/menus/definition.html

 

Is possible to set my css code like this? could u give me some suggestion to do that?

 

 

thanks u a lot in advance.

 

Kind Regards

 

JUN

[silv3r007]

Hi there,

 

Ive installed this but it appears to crash IE everytime I use it.

[drofe1]

This is to report that the latest downloadable closing tags fix (Closing Tags Fix 2) is still not completely solving the problem. There is still an issue with missing closing tags when $show_full_tree is set to false and a category with sub-categories has been selected. The siblings of the selected category don't have closing /li> tags.

 

What's missing is another piece of logic that adds closing tags to the unselected siblings in the case where $show_full_tree is set to false.

 

I can see what needs fixing but I don't have the coding skills to fix it.

[casemaker]

This contrib is exactly what I have been looking for. However, as a newbie, it isn't quite as simple as mentioned.

After adding it to the boxes, I now have 2 Categories, the new one, and the original.

Any suggestions as to how I hide the original one?

[birdrockdesigns]

This contrib is exactly what I have been looking for. However, as a newbie, it isn't quite as simple as mentioned.

After adding it to the boxes, I now have 2 Categories, the new one, and the original.

Any suggestions as to how I hide the original one?

 

Look for the code in the file includes/column_left.php

 

it should look something like this:

 

include(DIR_WS_BOXES . 'categories.php');

 

All you need to do is comment out that line with two slashes like this:

 

// include(DIR_WS_BOXES . 'categories.php');

 

Worked for me. Basically, you're removing the request to show the original category box.

[Eakdafreak]

STS users, try to open includes/modules/sts_column_left.php

and around line 21 change:

include(DIR_WS_BOXES . 'categories.php');

to

include(DIR_WS_BOXES . 'ul_categories.php');

 

Use latest ul_categories.php (from ul_categories closing tags fix2)

 

Gr.

[kaczart]

Thank u for really great contributions. I decided to prepare two diffrent stylesheets because of MS IE browser. Also I found a bug with arrow image in classes - daddy class shoud be in "li" attribute instead of "ahref" - I think so. I added new version 1.1.3 with screenshot. I'm a hobbyst not a programmer, so forgive me all mistakes - please, but it should work. Sorry for my bad english too.

 

greetings!

[Guest]

Hi, I want to remove the sub-categories from my menu, but haven't been able to find out how to do it. I've tried commenting out various bits and pieces but nothing seems to work. Can anyone give me any pointers?

[CGhoST]

Where do i put the following code please:

 

4. add beetween tags <head></head> different stylesheets for IE etc.

 

<?php

if (ae_detect_ie())

{

echo '<link rel="stylesheet" type="text/css" href="stylesheet_cat_ie.css">';

}

else {

echo '<link rel="stylesheet" type="text/css" href="stylesheet_cat.css">';

}

?>

[Guest]

Where do i put the following code please:

 

4. add beetween tags <head></head> different stylesheets for IE etc.

 

<?php

if (ae_detect_ie())

{

echo '<link rel="stylesheet" type="text/css" href="stylesheet_cat_ie.css">';

}

else {

echo '<link rel="stylesheet" type="text/css" href="stylesheet_cat.css">';

}

?>

 

Someone please answer this as im in the same position. Cant belive this has not been asked before or is the readme a new file and a mistake has crept in.

There is no mention of which file to add that code to . It reads as if you suposed to add it to the same file as the previous instruction but that file does not have any <head> tags so it cant be that one.

Sitting here waiting for an answer as i cant finish untill i get this info.

[CGhoST]

Someone please answer this as im in the same position. Cant belive this has not been asked before or is the readme a new file and a mistake has crept in.

There is no mention of which file to add that code to . It reads as if you suposed to add it to the same file as the previous instruction but that file does not have any <head> tags so it cant be that one.

Sitting here waiting for an answer as i cant finish untill i get this info.

 

I am also very surprised no one asked this question but after many hrs and hrs and days and giving up on this contribution and coming back to it i have finally figured it out. For you and others that are still interested in this un-supported contribution then point 4 needs to be added to every file which is in the root directory of oscommerce. In default oscommerce all files inside /catalog/ need to have point 4 added just above the </head>.

Edited July 24, 2010 by CGhoST

[Guest]

I am also very surprised no one asked this question but after many hrs and hrs and days and giving up on this contribution and coming back to it i have finally figured it out. For you and others that are still interested in this un-supported contribution then point 4 needs to be added to every file which is in the root directory of oscommerce. In default oscommerce all files inside /catalog/ need to have point 4 added just above the </head>.

 

ALL files in the root? you must be joking, must be 50 files. Can't think of a better reason not to use this contrib and find another.

Any sugestions? need a flyout menu urgent.

[Denz]

fasterstill.... Just use a global replace in an html editor.

 

 

I have a different problem... my subcategories are linking to the wrong place... instead of being index.php?cPath=1_6 it is going to index.php?cPath=6

 

Can anyone help me fix this?

 

Thanks

Denz

[Tabula_Rasa]

I'm interested in modifying this contribution to list only the subcategories and subcategories of one single parent (without listing the parent). The reason is that the three root categories of the site are listed horizontally at the top. In the left hand column, the "ul_category" box would have the sub- and sub-sub categories for that one parent category.

 

My thought was to establish $parent_cat_id = $cPath_array[0]... but, where to insert this in the code, I can't seem to figure out.

 

For help in answering this, I've included the code, here:

 

<?php
/*
 $Id: ul_categories.php,v 1.00 2006/04/30 01:13:58 nate_02631 Exp $

       Outputs the store category list as a proper unordered list, opening up
       possibilities to use CSS to style as drop-down/flyout, collapsable or 
       other menu types.

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2006 Nate Welch http://www.natewelch.com

 Released under the GNU General Public License
*/

// BEGIN Configuration options

 // Set to false to display the unordered list only. Set to true to display in
       // a regular box. The former is useful for better integrating the menu with your layout.
       $show_ulcats_as_box = false;

       // Indicates whether or not to render your entire category list or just the root categories
       // and the currently selected submenu tree. Rendering the full list is useful for dynamic menu
       // generation where you want the user to have instant access to all categories. The other option
       // is the default oSC behaviour, when the subcats aren't available until the parent is clicked. 
       $show_full_tree = true; 

       // This is the CSS *ID* you want to assign to the UL (unordered list) containing
       // your category menu. Used in conjuction with the CSS list you create for the menu.
       // This value cannot be blank.
       $idname_for_menu = 'subcat';

       // This is the *CLASSNAME* you want to tag a LI to indicate the selected category.
       // The currently selected category (and its parents, if any) will be tagged with
       // this class. Modify your stylesheet as appropriate. Leave blank or set to false to not assign a class. 
       $classname_for_selected = 'subcat_selected';

       // This is the *CLASSNAME* you want to tag a LI to indicate a category has subcategores.
       // Modify your stylesheet to draw an indicator to show the users that subcategories are
       // available. Leave blank or set to false to not assign a class.        
       $classname_for_parent = 'subcat_parent';
       $classname_for_child = 'subcat_child';
       $classname_for_no_children = 'subcat_no_children';      

       // This is the HTML that you would like to appear before your categories menu if *not*
       // displaying in a standard "box". This is useful for reconciling tables or clearing
       // floats, depending on your layout needs.      
       $before_nobox_html = '<span class="subcat_heading">Subcategories</span><br /><div class="subcat">';

       // This is the HTML that you would like to appear after your categories menu if *not*
       // displaying in a standard "box". This is useful for reconciling tables or clearing
       // floats, depending on your layout needs.      
 $after_nobox_html = '';       


// END Configuration options

// Global Variables
$GLOBALS['this_level'] = 0;
$GLOBALS['last_parent_id'] = 0;

// If Top of store then do nothing:

if (sizeof($cPath_array) == 0 ) {
       return '';
}

// Initialize HTML and info_box class if displaying inside a box
if ($show_ulcats_as_box) {
   echo '<tr><td>';
   $info_box_contents = array();
   $info_box_contents[] = array('text' => 'Sub Categories');
   new infoBoxHeading($info_box_contents, true, false);                                        
}

// Generate a bulleted list (uses configuration options above)
$categories_string = tep_make_cat_ullist();


// Output list inside a box if specified, otherwise just output unordered list
if ($show_ulcats_as_box) {
   $info_box_contents = array();
   $info_box_contents[] = array('text' => $categories_string);
   new infoBox($info_box_contents);
               echo '</td></tr>';      
} else {
               echo $before_nobox_html;        
   echo $categories_string;
               echo $after_nobox_html;
}


// Create the root unordered list
function tep_make_cat_ullist($rootcatid = 0, $maxlevel = 0){

   global $idname_for_menu, $cPath_array, $show_full_tree, $languages_id;

   // Modify category query if not fetching all categories (limit to root cats and selected subcat tree)

               if (!$show_full_tree) {
                 $parent_query = '';
//        $parent_query = 'AND (c.parent_id = "0"';     

                               if (isset($cPath_array)) {

                                   $cPath_array_temp = $cPath_array;

                                   foreach($cPath_array_temp AS $key => $value) {
                                       if ($parent_query == '') {
                                                       $parent_query = 'AND (c.parent_id = "' . $value . '"';
                                               } else {
                                                   $parent_query       .= ' OR c.parent_id = "'.$value.'"';
                                               }
                                       }
                                               unset($cPath_array_temp);
                               }       

                               $parent_query .= ')';                           
               } else {
       $parent_query   = '';   
               }

               $result = 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 .'" '.$parent_query.' order by sort_order, cd.categories_name');

               while ($row = tep_db_fetch_array($result)) {                            
       $table[$row['parent_id']][$row['categories_id']] = $row['categories_name'];
   }

//    $output .= '<div id="'.$idname_for_menu.'">';

       $rootcatid = $cPath_array[0];

//      echo $rootcatid;

   $output .= tep_make_cat_ulbranch($rootcatid, $table, 0, $maxlevel);

               // Close off nested lists
   for ($nest = 0; $nest <= $GLOBALS['this_level']; $nest++) {
       $output .= '</div>';            
               }

       $output .= '';                                   
   return $output;
}

// Create the branches of the unordered list
function tep_make_cat_ulbranch($parcat, $table, $level, $maxlevel) {

   global $cPath_array, $classname_for_selected, $classname_for_parent;

   $list = $table[$parcat];
       $this_class = 'subcat_parent';  

   while(list($key,$val) = each($list)){

       if ($GLOBALS['this_level'] != $level) {

                       if ($GLOBALS['this_level'] < $level) {
                                       $output .= "\n".'<div id="subcat_nest_' . $GLOBALS['last_parent_id'] .'" class="subcat_nest_div">';
                                               $this_class = 'subcat_child';
                                   } else {
               for ($nest = 1; $nest <= ($GLOBALS['this_level'] - $level); $nest++) {
                   $output .= '</div>'."\n";
                                       $this_class = 'subcat_parent';
                           }
                                               }                       

                       $GLOBALS['this_level'] = $level;
       }

//        if (isset($cPath_array) && in_array($key, $cPath_array) && $classname_for_selected) {
//            $this_class = $classname_for_selected;
//        } else {
//            $this_class = 'subcat_no_children';               
//              }


       if (!$level) {
//                                  unset($GLOBALS['cPath_set']);
//                                              $GLOBALS['cPath_set'][0] = $key;
           $cPath_new = 'cPath=' . $key;

       } else {
                                               $GLOBALS['cPath_set'][$level] = $key;                                                                           
           $cPath_new = 'cPath=' . implode("_", array_slice($GLOBALS['cPath_set'], 0, ($level+1)));
       }

           if (tep_has_category_subcategories($key) && $classname_for_parent) {
           $this_class = $classname_for_parent;
                       $GLOBALS['last_parent_id'] = $key;
                   }                           

       $output .= '<span class="'.$this_class .'">';

       $output .= '<a href="' . tep_href_link(FILENAME_DEFAULT, $cPath_new) . '"' . $this_parent_class ./*$this_cat_class . */'>'.$val;                

       if (SHOW_COUNTS == 'true') {
           $products_in_category = tep_count_products_in_category($key);
           if ($products_in_category > 0) {
               $output .= ' (' . $products_in_category . ')';
           }
       }

       $output .= '</a>';      

               $div_id = 'subcat_nest_' . $key;
               $img_id = 'subcat_nest_img_' . $key;

               if (tep_has_category_subcategories($key)) {
                       $output .= '<img src="/images/icon_plus.gif" style="line-height: 18px; position: absolute; right: 0px; top: 3px;" id="' . $img_id .'" onclick="javascript: show_subnav_div(\'' . $div_id . '\', \'' . $img_id . '\');"></span>';
               }

       if (!tep_has_category_subcategories($key)) {
           $output .= '</span><br />'."\n";    
       }                                                

       if ((isset($table[$key])) AND (($maxlevel > $level + 1) OR ($maxlevel == '0'))) {
           $output .= tep_make_cat_ulbranch($key,$table,$level + 1,$maxlevel);
       }

               } // End while loop

   return $output;
}       

?>

[Tabula_Rasa]

HA! The reason I've been on the osCommerce forums for so long, but only posted 30-something posts is because there aren't many answers, here. :) Is there ANYONE that can help me untangle this box? I need to do the subcategories of only ONE parent category without showing the parent.

 

The winner gets a rewrite of osCommerce for FREE that kills all tables as soon as I'm done with this project: Tableless, XHTML/CSS osCommerce. We have the only stable copy that does NOT use templates.

 

I'll POST the rewrite of the contribution as a new contribution and credit you.

 

Please.

 

For some reason, I cant get my mind around this contribution.

 

Sean Rice

http://rasadesign.com

seanrice@rasadesign.com

[arrows]

Hi Regarding the closing tag issue.

 

I belive i have found an answer.

My list validates and looks good so i guess all tags are closed properly.

 

My menu has not been closing <li> when a category with subcats is not selected.

 

Here is the code that closes li tags if the category does not have subcats

 

if (!tep_has_category_subcategories($key)) {

$output .= '</li>'."\n";

}

add this to the bottom

 

elseif($_GET['cPath'] != $key)

{$output .= '</li>'."\n"; }

 

 

This basically says if the category is not selected close the tag.

 

If anyone finds a fault please let me know.

[brants]

Hello,

 

I'm having trouble installing "[Contribution] Category Box as Nested Unordered List". I have copied across the ul_categories.php file into it's correct location and included all of the other code mentioned in the readme file. However, when I view the page, i receive the following errors

Notice: Undefined variable: output in /home/saltash/public_html/store/includes/boxes/ul_categories.php on line 116

Notice: Undefined variable: output in /home/saltash/public_html/store/includes/boxes/ul_categories.php on line 178

Notice: Undefined variable: output in /home/saltash/public_html/store/includes/boxes/ul_categories.php on line 141

Notice: Undefined variable: output in /home/saltash/public_html/store/includes/boxes/ul_categories.php on line 141

Notice: Undefined variable: output in /home/saltash/public_html/store/includes/boxes/ul_categories.php on line 141

Fatal error: Class 'infoBoxKategorie' not found in /home/saltash/public_html/store/includes/boxes/ul_categories.php on line 75

Has anyone else received the same errors or know what might be causing them?

 

Many thanks,

 

James

Edited November 25, 2010 by brants

[BazeMartinovski]

Im trying to add external link from subcategory, but without success. Can anyone help me out with this one, i have no idea how to apply this:

    if ( $tree[$counter]['path'] == '123_32' ) 
     $categories_string .= 'http://www.external_site.com" target="_blank">';
   else
     $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

 

into ul_categories.php. I assume that the file uses different strings but since i'm not a developer i can't do it. The original thread is here:http://www.oscommerce.com/forums/topic/355260-sub-category-link-to-an-external-site

 

any help is appreciated.

 

cheers

[♥DAVID3733]

Hi

 

Used this contibution on my site (Category Box as Nested Unordered List v1.1.3 )and it does just what it says on the Tin, I would love to continue to use it but it has slowed my site down considerably, i took it off and speed up again, tried reinstalling it but its the same.

 

I have over 300/400 cats/sub cats and assume this is the problem, has anyone had the same problem and if so got a work around

 

Thank you for any imput

 

Kind Regards

 

David

[mcbsolutions]

Hi,

 

I'm using the OSC-CSS add on, and trying to implement some of Yahoo's YUI modules, etc. I'd like to get a YUI3 menu working with my store such as this one.

 

http://yuilibrary.com/yui/docs/node-menunav/menunav-leftnav.html

 

Anyone done this yet with YUI3? I'd be thankful for someone to help me out on getting this my categories menu talking to this. Thanks!!

 

Steve

[roadog]

Does anyone know how to display two of these menus at the same time? I tried creating two files and renaming queries, variables, ids & classes. But that didn't seem to work.

Help is appreciated

Stephanie

 

I have the same problem. I would like to have two menus on my STS template. I have spent hours trying to do this, but with no success. Can someone please help?