how to make categories sidebox of my own style?

Hello

I really want to make categories sidebox of my own style. For example, I sell special roses online. I want to put all related categories such as"feather roses", "crystal roses", "sheer roses" together.

And then below these 3 categories, I want to add a color line and then add other categories with some similarities such as "red roses", "purple roses","blue roses".

Then below these 3 categories, I want to add another color line and then add other categoreis such as "below $1", "from $1-$50". from "$50-$100".

The current template mixes everything together and difficult for customers to navigate. Any good idea on how to fix it?

Lina

I have been wanting to do a similar thing for some time, so I took your request as an opportunity to try it.
This is what I found - really quite simple to do, after you wade through the logic... There is a horizontal rule between categories and all products etc., so take from that and use a test (following the example in comments in the file) to insert it above the category you want to be at the top of the new section.

In /includes/templates/your_template/sideboxes/tpl_categories.php around line 33:```php
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 .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

add
```php
    //lay a separator between collections and types - gjh42 20070222
    if ($box_categories_array[$i]['path'] == 'cPath=81') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
```(Change the cPath= to your category id.)
 to get
```php
     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 {
	  //lay a separator between collections and types - gjh42 20070222
    if ($box_categories_array[$i]['path'] == 'cPath=81') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

This divider will be identical to the one between categories and all products. If you want it different, call the id catBoxDivider2 or something, and add that to the stylesheet.

PS - You can add more of these in the same spot, with different cat id's as required. The best way is to add like this```php
if ($box_categories_array[$i]['path'] == ( 'cPath=81' or 'cPath=92'))

Note: for inserting separators in multiple locations, this is the code that will work:

     
if(in_array(str_replace("cPath=","",$box_categories_array[$i]['path']), explode(",",'3,21,21_57'))) {
  $content .= '<hr class="catBoxDivider" />' . "\n";
} 
``` where the numbers are the category id's (cPaths) separated by commas.

Hello, gjh42:

I tried with single catogory, and it works very well. Thank you very much!!

Just have a small question about your multi-location, explode(",",'3,21,21_57'))) , are these number for category numbers? What is "," for?

Thank you again for your very valuable suggestions!!

"where the numbers are the category id's (cPaths) separated by commas."

Find the cPath (shown in the address bar) of each category that you want a divider above, and put it in the list. The "," tells the PHP function "explode" to read a comma as a marker between units of information.

I got it!

Thank you very much for your detailed help! :-):D

As a follow up, I wanted the same thing, but already had the "main section" of categories done, it was the add-ons I wasn't sure how many or what order etc.

I needed to add a line at the end of the current categories.

Find the file per above poster's instruction, then around line 51 find:

      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 .= '<br />' . "\n";
    }
  }

and change to:

      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 .= '<br />' . "\n";
      
      if ($box_categories_array[$i]['path'] == 'cPath=26') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
      }
      
    }
  }

where 26 is changed to YOUR last cat.

There is (or should be) already a <hr> displayed at the beginning of the all/featured/new section:

  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";
    }
```I think I remember seeing the switch for this in admin, but can't locate it now, and a search on SHOW_CATEGORIES_SEPARATOR_LINK finds only this mention in the code; no define or switch.

The switch is in Configuration > Layout Settings > Categories Separator between links Status. This puts a line between the categories and the all/new/featured links.

Hey gjh42,

Thank you for being helpful. I see I wasn't clear in my post.

For people that will come later, with little php experience and wonder what the heck I was on about.

This is the "default" way that Zen shows off the category box:

main cat 1
main cat 2
main cat 3
cat full of linked items x
cat full of linked items y
cat full of linked items ya
cat full of linked items yb
cat full of linked items z
etc

new
all
etc

gjh42's way of putting a line above the category in question is perfectly OK, if you know for sure what the category id will be of the first cat in question.

At the time I wrote my above post, I didn't know what the "cat full of linked items x" would be (I had just jumped into making the cats, with out thinking about it too hard). Of course, now that I've actually gone through my list of items, I know full well what ID # is attached to that. :lookaroun

main cat 1
main cat 2
main cat 3
------------------- <--- thats the one I was trying to make in the first place
cat full of linked items 1

cat full of linked items 2
cat full of linked items 2a
cat full of linked items 2b

cat full of linked items 3
etc

new
all
etc

I was just trying to present an 'upside down' way of getting (almost) the same result. :bigups:

@edit: I see now that my code will blow an HR into the upper cat once the sub-cats are exposed. gah.

I think that's why I added the <hr> above the relevant cat originally - because if the cat had subcats, the <hr> would come between them.

If you know that is not going to happen, then it could work perfectly well to put the <hr> below the cat.

There are many ways to customize this area, and one or more combinations that will work for almost everything...

What should I do if I want to add a divider between each category, and not just specific categories?

Using the code above without the "if" test to filter it, will place the divider above every category and subcategory in the list.

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 {
      //divider above every cat or subcat
   
      $content .= '<hr class="catBoxDivider" />' . "\n";
  
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';  

To avoid a divider above the first cat in the list, use this:

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 {
      //divider above every cat or subcat except the first
    if ($box_categories_array[$i]['path'] != 'cPath=1') {
      $content .= '<hr class="catBoxDivider" />' . "\n";
    }
      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';  
```Set 'cPath=x' to the id of the first category in your list.

Thanks for your help!