Reformatting categories box

[tempe1109]

Hello-

I want to reformat my categories box. I'm not a super strong php programmer but from what I see, the includes/boxes/categories.php generates output like this:

<a href="http://recreatewithsports.com/hardware-c-1.html"><b>Hardware</b>-></a> (6)<br>

  <a href="http://recreatewithsports.com/cdrom-drives-c-1_17.html">CDROM Drives</a><br>

  <a href="http://recreatewithsports.com/graphics-cards-c-1_4.html">Graphics Cards</a> (2)<br>

  <a href="http://recreatewithsports.com/keyboards-c-1_8.html">Keyboards</a> (1)<br>

  <a href="http://recreatewithsports.com/memory-c-1_16.html">Memory</a><br>

  <a href="http://recreatewithsports.com/mice-c-1_9.html"><b>Mice</b></a> (2)<br>

  <a href="http://recreatewithsports.com/monitors-c-1_6.html">Monitors</a><br>

  <a href="http://recreatewithsports.com/printers-c-1_5.html">Printers</a> (1)<br>

  <a href="http://recreatewithsports.com/speakers-c-1_7.html">Speakers</a><br>

<a href="http://recreatewithsports.com/software-c-2.html">Software-></a> (4)<br>

<a href="http://recreatewithsports.com/movies-c-3.html">DVD Movies-></a> (17)<br>

 

using the function tep_show_category on line 13 of includes/boxes/categories.php

 

My question is, where is the code that helps it determine when not to put the    in front of the <a href ?

The reason I ask, is that in my reformatting, I want the indented subcategory lines to have a different color background than the category lines and so I need to be able to see where to put that.

 

Thanks so much for the help!

[Terminum]

for ($i=0; $i<$tree[$counter]['level']; $i++) {
     $categories_string .= "  ";
   }

 

 

It checks the level of the category and adds the spaces as appropriate.

 

I've added two snippets of code to assign classes to selected (opened) categories and sub categories:

 

//$checkLevel = strpos($categories_string, "  ");
if ($tree[$counter]['parent'] != 0) {
  $categories_string .= ' subCategory';
}

 

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '<span class="activeCategory">';
   }

 

 

You can then add styles to their children using the descendant symbol (>) in css.

 

In context, my php looks like this:

 

 

function tep_show_category($counter) {
   global $tree, $categories_string, $cPath_array;

   for ($i=0; $i<$tree[$counter]['level']; $i++) {
     $categories_string .= "  ";
   }

   $categories_string .= '<a href="';

   if ($tree[$counter]['parent'] == 0) {
     $cPath_new = 'cPath=' . $counter;
   } else {
     $cPath_new = 'cPath=' . $tree[$counter]['path'];
   }

   $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '" class="aCategory';


//$checkLevel = strpos($categories_string, "  ");
if ($tree[$counter]['parent'] != 0) {
  $categories_string .= ' subCategory';
}

$categories_string .= '">';

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '<span class="activeCategory">';
   }

// display category name
   $categories_string .= $tree[$counter]['name'];

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '</span>';
   }

/*
   if (tep_has_category_subcategories($counter)) {
     $categories_string .= '->';
   }
*/

   $categories_string .= '</a>';

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

   $categories_string .= '<br>';

   if ($tree[$counter]['next_id'] != false) {
     tep_show_category($tree[$counter]['next_id']);
   }
 }
?>

[tempe1109]

Thanks for the quick and thorough response. It might take me a bit to digest but will really help my productivity today!

[Terminum]

Ok, just let me know if you have any questions about it.

[tempe1109]

I'm afraid I do :-{

 

I'm going through your tep_show_category function and seeing how you modified. It seems you took away the indent, took away the bold, and added the css styling, etc.

 

But if I look back at the original code (which I think by understanding it will help me since I can modify in small chunks), I'm not seeing where in the code it generates the hrefs with no    (the category level). My first category string entry looks like this

 

for ($i=0; $i<$tree[$counter]['level']; $i++) {

$categories_string .= "  ";

 

whereas the one you quoted has the empty " ".

 

I also have to brush up on descendant symbol (>) in css. I have had troubles with things always picking up parent css.

 

Thanks!

[tempe1109]

ooooppps...

 

Is $categories_string .= " "; the same as $categories_string .= "  "; in php? The first one just looked like empty set to me.

 

So, by checking level each time it loops through, the code detects whether to put the indent there for subs and not there for categories?

 

If that is the case, now I am just down to modify the category string to show the html and css. I will read up on descendant symbol in css.

 

Thanks

[tempe1109]

I'm struggling with the CSS. Could you show a CSS example for aCategory and subCategory using the > symbol?

[tempe1109]

The design I was hoping to achieve looks partially like this (one category is exploded to show the sub-categories):

 

<div id="sidebar">

<div id="sub-nav">

<ul>

<li><a class="blue" href="#">About NMA</a></li>

 

<ul>

<li><a href="#">NMA History</a></li>

<li><a href="#">Mission</a></li>

<li><a href="#">Management Team</a></li>

<li><a href="#">Competitive Strengths</a></li>

<li><a href="#">Distinctions and Awards</a></li>

</ul>

 

<li><a class="blue" href="#">Meeting Your Service Needs</a></li>

<li><a class="blue" href="#">Success Stories</a></li>

<li><a class="blue" href="#">Press and News</a></li>

<li><a class="blue" href="#">Get Started with NMA</a></li>

</ul>

</div>

</div>

 

with the current CSS as:

#sidebar { width: 228px; height: auto; float: left; }

#sub-nav { width: 228px; height: auto; }

#sub-nav ul { list-style: none; }

#sub-nav ul a.blue { display: block; background: #00457c; margin: 10px 0 0 0; padding: 8px 10px; font: normal 12px Arial, Helvetica, sans-serif; text-transform: uppercase; color: #FFF; }

 

#sub-nav ul ul { background: #cad3e5; padding: 15px; line-height: 24px; }

#sub-nav ul ul a { font: normal 12px Arial, Helvetica, sans-serif; color: #000; }

#sub-nav ul ul a:hover { text-decoration: underline; }

 

I can see I need to do away with the nested <ul> for the subcategories. Is this type of design do-able with the php and child selector css that you described above?

 

Thanks!

[Terminum]

Sorry, was away for the weekend.

 

 

In my example, class="activeCategory" would be the one that they have expanded to see it's subcategories, which will be given class="subCategory"

 

So you'll really only need to use the decedent selector (>) if you have subcategories with additional subcategories below them. But it looks like you only have a two-level hierarchy?

 

Do you need your category box links to appear different than links in other boxes? If not, add desired styles to the .boxText class (or ".boxtext a{blue styles here}" for links only).

 

If you do want the links to be different from other boxes, you'll need to go into the categories.php and add a div around the list (outside of the php tag). So look for the categories comment and make it look something like this:

 

<!-- categories //-->
<div class="categoriesBoxList">
         <tr>
           <td>
<?php

 

Then make sure to close the div after the php tag.

 

?>
           </td>
         </tr>
</div>

 

Then you can apply styles using .categoriesBoxList a{blue styles for categories only here} to stlye all of the links blue, or whatever. Then use .activeCategory to style how you want to make the selected category appear, and .subcategory for how the subcategories should appear. Let me know if that doesn't make sense.

[npn2531]

Hello-

I want to reformat my categories box. I'm not a super strong php programmer but from what I see, the includes/boxes/categories.php generates output like this:

<a href="http://recreatewithsports.com/hardware-c-1.html"><b>Hardware</b>-></a> (6)<br>

  <a href="http://recreatewithsports.com/cdrom-drives-c-1_17.html">CDROM Drives</a><br>

  <a href="http://recreatewithsports.com/graphics-cards-c-1_4.html">Graphics Cards</a> (2)<br>

  <a href="http://recreatewithsports.com/keyboards-c-1_8.html">Keyboards</a> (1)<br>

  <a href="http://recreatewithsports.com/memory-c-1_16.html">Memory</a><br>

  <a href="http://recreatewithsports.com/mice-c-1_9.html"><b>Mice</b></a> (2)<br>

  <a href="http://recreatewithsports.com/monitors-c-1_6.html">Monitors</a><br>

  <a href="http://recreatewithsports.com/printers-c-1_5.html">Printers</a> (1)<br>

  <a href="http://recreatewithsports.com/speakers-c-1_7.html">Speakers</a><br>

<a href="http://recreatewithsports.com/software-c-2.html">Software-></a> (4)<br>

<a href="http://recreatewithsports.com/movies-c-3.html">DVD Movies-></a> (17)<br>

 

using the function tep_show_category on line 13 of includes/boxes/categories.php

 

My question is, where is the code that helps it determine when not to put the    in front of the <a href ?

The reason I ask, is that in my reformatting, I want the indented subcategory lines to have a different color background than the category lines and so I need to be able to see where to put that.

 

Thanks so much for the help!

 

This contribution bypasses the whole problem neatly:

 

http://addons.oscommerce.com/info/6378

[Terminum]

Cool contribution, thanks for posting it.

 

Karen, note that that with this contribution you'll still need to add the activeCategory span tag like I previously mentioned (if you want to give the selected category any special styles other than bold). Also remember to close the span, that could be another thing that was causing you problems earlier.

[tempe1109]

On the previous questions, yes this is only 2 level menu heirarchy and yes, I would like the subcategory links to be different than the category links that aren't active. Plus within the sub, I would like the active link to be highlighted. So,when you use class="aCategory subCategory" , can subCategory have it's own independent css such that it doesn't adopt the aCategory's properties? In other words, if I want a light blue background behind the subcategory links and a darker blue background behind the main category links that aren't expanded, can I do that with css without doing the nested ul like I had before?

 

Thanks,

Karen

[Terminum]

Unless you have modified the categories box in some other way, I think only the currently selected category will display its subcategories.

 

But it looks like I did something else in that code which I forgot to explain (I forgot that I even did it). I give ALL categories and subcategories the class="aCategory". This was another way for me to style the category links differently from the links in other boxes. Only the selected category gets the activeCategory span tag previously mentioned.

 

So you're essentially looking at three styles:

 

.aCategory {regular category background}

 

.activeCategory{dark blue selected category background}

 

.subCategory{light blue background}

 

 

 

I think that should work. Since you are using background differentiation though, you might want to use a div instead of the span that I use for activeCategory. The span will probably end after the text ends in most browsers, but you can set the div to width:100%. Just remember to set the padding and margin of the div to 0px so the size doesn't look different from the other links.