Help nesting products under categories in side bar

Hello, I've been trying to nest the products below categories on the sidebar with UL tags. It appears to continue to add UL tags to each product vs having it add the UL tags before and after all the products to nest them under the cat, and it's not what I want... Here is a snapshot of how it looks like. Notice how it says BEGINEND. I'm using BEGIN as an example for UL and END as an example for /UL

I need BEGIN and END to nest for example, the two red items in the list so it would be a sub-list basically. I am terrible at php, so I tried my best.

<?php

  $content = "";
    $content .= '<ul>' . "\n";

  for ($i=0;$i<sizeof($box_categories_array);$i++) {
	 
	 //set selected style ($box_categories_array[$i]['current'] does not work)	
	
	 $div_class='';
	 if ($products_id){
	 
		 if (($products_id)&&($box_categories_array[$i]['products_id']==$products_id)){
			 $div_class='category-subs-selected';
		 }
	 }else{
		 if(($current_category_id!=0)&&($box_categories_array[$i]['category_id']==$current_category_id)){
			 $div_class='category-subs-selected';
		 }
	 }	 	 	
	
	// set top style
	if ($box_categories_array[$i]['top'] == 'true'){	
		$a_class = 'category-top';
	}elseif($box_categories_array[$i]['has_sub_cat']){
		$a_class = 'category-subs';
	}else{
		$a_class='category-products';
	}
	 // link to cat or prod
	if ($box_categories_array[$i]['is_product'] == true){
		$link = zen_href_link(FILENAME_PRODUCT_INFO, $box_categories_array[$i]['path']);
	}else{
		$link = zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']);
	}	
	
	




	
	if($box_categories_array[$i]['is_product'] == true){
		$content .= "BEGIN";
	}
	
	
	//indent
	if($box_categories_array[$i]['is_product'] == true){
		$indent = str_repeat($box_categories_array[$i]['level']+1); 
	}else{
		$indent = str_repeat($box_categories_array[$i]['level']); 
	}
	
	
	
	if($box_categories_array[$i]['is_product'] == true){
		$content .= "END";
	}
	





	
	//cat sub seperator
	if (($box_categories_array[$i]['level'] == 0)&&($box_categories_array[$i]['is_product'] == false)){
		$separator = '';
	}else{
	}
	// count
	$count='';
	if (SHOW_COUNTS == 'true') {
		if($box_categories_array[$i]['is_product'] != true){
			$count = CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX ;
		}
	}
	//add content
	
	$content .= '<li>'. 
	$indent.$separator.'<a class="'. $a_class .'" href="'. $link .'">'. $box_categories_array[$i]['name'] . '</a>';
	$content .= '</li>';
	
	
	
  }

  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
	
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
	$content .= "BEGIN EXTRA LINKS";
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= '1' limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />';
      }
    }
	
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      switch (true) {
        case (SHOW_NEW_PRODUCTS_LIMIT == '0'):
          $display_limit = '';
          break;
        case (SHOW_NEW_PRODUCTS_LIMIT == '1'):
          $display_limit = " and date_format(p.products_date_added, '%Y%m') >= date_format(now(), '%Y%m')";
          break;
        case (SHOW_NEW_PRODUCTS_LIMIT == '30'):
          $display_limit = ' and TO_DAYS(NOW()) - TO_DAYS(p.products_date_added) <= 30';
          break;
        case (SHOW_NEW_PRODUCTS_LIMIT == '60'):
          $display_limit = ' and TO_DAYS(NOW()) - TO_DAYS(p.products_date_added) <= 60';
          break;
        case (SHOW_NEW_PRODUCTS_LIMIT == '90'):
          $display_limit = ' and TO_DAYS(NOW()) - TO_DAYS(p.products_date_added) <= 90';
          break;
        case (SHOW_NEW_PRODUCTS_LIMIT == '120'):
          $display_limit = ' and TO_DAYS(NOW()) - TO_DAYS(p.products_date_added) <= 120';
          break;
      }

      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = '1' " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />';
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= '1' limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />';
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>';
    }
  }
    $content .= '</ul>';

?>

You already have <ul> tags where they belong, just before and after the for loop. Where you have BEGIN and END, you want to put '<li>' and '</li>' to make each product a list item (not a new list).

The products already have <li></li>

I want to make sure they are nested with <ul></ul> tags. So in essence it looks like this:

<ul>
<li>Product Category 1</li>
<li>Product Category 2

<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>

</li>

<li>Product Category 3</li>
<li>Product Category 4</li>

</ul>

Nested.

OK, I just looked at your BEGIN and END... Tags there will do you no good of any kind.

What you need to do is build code that will determine when the category nesting level changes, and insert <ul> or </ul> tags as appropriate. I started working on this for Categories Dressing, but shelved it because it could not really provide an advantage as long as people use IE6, which will not allow :hover to affect anything that is not an <a> tag.

You can get the current category depth by counting the number of underscores _ in $box_categories_id[$i][path]. Comparing that to the previous number and calculating how many of what to insert should not be that difficult. It also needs an exit calculation, to know how many </ul> to insert if the last item is a subcat.

Hey gjh42,

Thanks for your prompt responses. The problem is, I'm not that talented with PHP, is there anyway you could help me out to solve this problem, I will pay you if need it be? This is very important for me to be done. Thanks.

You have the "indent" statement formulated incorrectly:

$indent = str_repeat($box_categories_array[$i]['level']+1);

should be:

$indent = str_repeat(CATEGORIES_SUBCATEGORIES_INDENT,$box_categories_array[$i]['level']+1);

I have the ul nesting code worked out, but not yet tested, for a standard tpl_categories.php.

However, you are using a mod that not only significantly reworks the coding of the list section, but uses information not available to the standard version. I think it would actually make calculating the nesting easier, but I'm reluctant to use it without knowing something about it, and it would make the code dependent on your mod version.

Accounting for the products in the nesting will require the use of some of the non-standard info, but it will be impossible for me to test that part.

I'll post the nesting code additions once I get them typed in.

This is a standard tpl_categories.php modified to use <ul> lists for all categories and links.

Tested and works correctly, though some stylesheet changes are needed for good appearance.```php

<?php /** * Side Box Template * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $ gjh42 2007-12-21 - limit subcats, ul code */ $content = ""; $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n"; //ul code setup $ul_now = 0; $end_ul_now = 0; $prev_cat_depth = 0; $content .= '<ul>'; // /ul code setup for ($i=0;$i<sizeof($box_categories_array);$i++) { $cat_depth = substr_count($box_categories_array[$i]['path'],'_');//ul code if ($cat_depth > $prev_cat_depth) { //$ul_now = $cat_depth - $prev_cat_depth;//probably unnecessary $content .= '<ul>';//should only ever be 1 ul here } elseif ($cat_depth < $prev_cat_depth) { $end_ul_now = $prev_cat_depth - $cat_depth; $content .= ($end_ul_now != 0)?str_repeat('</ul>',$end_ul_now):''; } $prev_cat_depth = $cat_depth;// /ul code switch(true) { // to make a specific category stand out define a new class in the stylesheet example: A.category-holiday // uncomment the select below and set the cPath=3 to the cPath= your_categories_id // many variations of this can be done // case ($box_categories_array[$i]['path'] == 'cPath=3'): // $new_style = 'category-holiday'; // break; case ($box_categories_array[$i]['top'] == 'true'): $new_style = 'category-top'; break; case ($box_categories_array[$i]['has_sub_cat']): $new_style = 'category-subs'; break; default: $new_style = 'category-products'; } // subcat limit test 20071220 if (substr_count($box_categories_array[$i]['path'],'_') > 1 or zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) { if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) { // skip if this is for the document box (==3) } else { $content .= /*ul code*/'<li><a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">'; if ($box_categories_array[$i]['current']) { if ($box_categories_array[$i]['has_sub_cat']) { $content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>'; } else { $content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>'; } } else { $content .= $box_categories_array[$i]['name']; } if ($box_categories_array[$i]['has_sub_cat']) { $content .= CATEGORIES_SEPARATOR; } $content .= '</a>'; if (SHOW_COUNTS == 'true') { if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) { $content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX; } } $content .= /*ul code*/'</li>' . "\n"; } } $content .= str_repeat('</ul>',$cat_depth+1);//ul code if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') { // display a separator between categories and links if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') { $content .= '<hr id="catBoxDivider" />' . "\n"; } $content .= /*ul code*/'<ul>'; if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') { $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1"); if ($show_this->RecordCount() > 0) { $content .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . /*ul code*/'</li>' . "\n"; } } if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') { // display limits // $display_limit = zen_get_products_new_timelimit(); $display_limit = zen_get_new_date_range(); $show_this = $db->Execute("select p.products_id from " . TABLE_PRODUCTS . " p where p.products_status = 1 " . $display_limit . " limit 1"); if ($show_this->RecordCount() > 0) { $content .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . /*ul code*/'</li>' . "\n"; } } if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') { $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1"); if ($show_this->RecordCount() > 0) { $content .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . /*ul code*/'</li>' . "\n"; } } if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') { $content .= /*ul code*/'<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . /*ul code*/'</li>' . "\n"; } $content .= /*ul code*/'</ul>'; } $content .= '</div>'; ?>

As a bonus, it also contains the line (commented out) to limit Expanded Category List display to just top and first level subcats.

Some adapting work will be needed to integrate this with your expanded/products version of the file.

Glenn,

May I make one suggestion to your code so IE 6 (and maybe earlier) works "better"?

File: tpl_categories.php

line 73: $content .= '</li'. "\n".'>' ;/ul code/

This fixes the big gaps you get in IE that other browsers handle correctly.

This in effect makes the unordered list appear to be one line.

-Chadd

Thanks for that. Since I only use IE when I have to, I didn't even realize there was a problem there. I'll check it out.

I have made some improvements to the code, and when I settle on the best methods I'll repost the file. I don't think it warrants a mod in Downloads. I have code for it that would allow switching between ul display and the stock display with one constant or variable change, but not sure there is enough benefit to that to warrant the extra complexity. I'll probably streamline it for just ul display.

Glenn,

Yep, I rarely use IE so I often forget to check it!

A couple of notes... check out this site for some interesting CSS design layouts:

http://webhost.bridgew.edu/etribou/layouts/

And a sample of his code in use:

http://chicagophoto.net/sandra/

Also, have you compared performance of <UL> vs <SPAN>?? I tried your code last night because I am trying to fix a IE bug in my categories and it seemed the the <UL> version was a bit slower on load. I hadn't come across this before, but then I didn't have a categories list this large:

http://chicagophoto.net/zen138/

I am having problems with IE not displaying the top two <li> or <spans> correctly. I've spent hours on it already! I know it has to be a IE box model problem but it evades me.

I want to style the listing so it has a nice button look, but don't know why this is happening.

Here are some browsercam outputs showing the problem:

http://www.chicagophoto.net/browsercam/

IE 7 works but 6.0 and 5.5 don't render correctly. I don't care to worry about 5.5, but it should work in 6.0.

Ideas?

All I know about IE layout is from reading and from occasionally fixing my own site's layout. It sounds pretty gloomy for not being hobbled by IE any time in the foreseeable future.

Seeing the behavior live in IE6 confirmed my first thought. The amount of wipeout varies with how quickly you scroll the area up & down off the screen.
I found the same bug with an early version of Categories Dressing, and found it necessary to edit the tpl_categories code to eliminate the <br /> between categories instead of using the elegant negative margin.

Have you looked at Categories Dressing? It is set up to allow ul-like behavior, and as far as I know works correctly in IE6. It does not have automatic ul nesting, but for the style you want on that site the indent can be achieved perfectly with the standard ZC subcategories indent admin setting.

Yes, I did try Categories Dressing with the same result. I am beginning to think it has to do with the border-top and border-bottom and how the padding and margins are interacting. Here is the CSS.

<quote> A.category-top { display: block; padding: 3px 0px 3px 10px; color: #000000; text-decoration: none; text-transform:none; font-size:11px; font-weight:normal; margin: 0 0 0 0; border-top:1px solid #f3f3f3; border-bottom:1px solid #c6c6c6; }

a.category-top:hover {
color: white; /* text color */
background-color:#a09172;
}
</quote>

Gonna have to go digging for the IE box fixes ... <sigh> ... I seem to remember that you needed to adjust margin and padding specifically for ie 5.5 and 6.0...

I'll let you know if I figure it out!

Glenn,

Well, I seem to have a better grasp of the issues at hand.

But first, I trimmed out all the fluff from tpl_categories.php to JUST produce the menu. Using simple <a> tags does seem to render faster than the <ul> meathod.

To get rid of the problem I was having (at least 99% of it) I needed to specify a width to the <a> tag. Once I did that, it behaved better. Still not 100% correct.

I later discovered that there seems to be some conflicting css under my hood that might be causing this. But I'll have to attack that another time.

I tried to use your <ul> meathod, but it did the same thing. So I know it is a box model issues. Tried to implement the Ruthsarian rMenu, but that will take a lot more effort to translate over. It DID seem to work correctly, and Prof. Ruthsarian has every hack under the sun addressed!