Nonstandard 2 category 3 subcategory navigation design

[gjh42]

Interesting challenge.
You might start with the categories-tabs menu for headphones and microphones - that would require only styling to look and function as you want.

THe three submenus could be done a few ways.
There have been instructions posted for using the documents menu as a second categories menu, and you may be able to tweak the manufacturers sidebox to look and function like the others.

You could have one big categories menu and use some divs worked into tpl_categories.php to get it separated into sections and arranged horizontally.

Or you could clone the categories box twice and have three separate boxes, each showing the desired portion of the whole set.

The code for discriminating among the categories to be displayed is worked out in the Parent Categories Separated in Three Sideboxes thread, as are some clues for cloning the sideboxes.

[dvasdekis]

Alright then. Looks like I'll be needing to learn PHP.

[gjh42]

The second method would probably be simplest overall.
The first and third will require the discrimination code applied and maintained, and the third will require several new files to be copied and modified.

The second will require only the standard admin settings to arrange the order of cats, and some relatively simple PHP in tpl_categories.php to add the <div id="price">, </div><div id="type">, </div><div id="brand"> and </div> tags in the appropriate places. The rest is styling in your stylesheet.

[dvasdekis]

Alright. I take it that this is the relevant part of the tpl_categories.php code:

*/

  $content = "";

  

  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";

  for ($i=0;$i<sizeof($box_categories_array);$i++) {

    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';

      }

     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']) . '">';



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

    }

  } 

I take it that I would do much as the commented section at the top says, and go through category by category and make a new style for each subcategory within price, type and brand, linking it all to new styles in the main stylesheet in each case?

Thankyou very very much!

[dvasdekis]

With a bit more thinking, I think I've figured out what you're saying I should do.

You're saying that I should order the subcategories in the boxes all just in one giant list under my main headphone category in the admin, and specify the appearance order so that they're sequentially going through from top to bottom of the left column, then top to bottom of the middle, then top to bottom of the right. Then, I would add a new <div> bit at the end of each column?

I'm still just not sure on where I would add the <div> bit in this tpl PHP file. Should I be defining every single subcategory using that commented method?

[dvasdekis]

Gjh, shouldn't your categories dressing mod make the work easier on some of this? It looks like it should, particularly with the
"- You can add dividers and/or non-linked headings in any desired locations.
- You can add images to these headings." part.

Also, if any future generations are looking at this thread, my work in progress site is at http://test.headsonic.com

[gjh42]

You certainly could use Cat Dressing to style your boxes, but it wouldn't actually have anything to do with the basic task of getting three boxes, except for an example of how to decide when to insert the <div> bits. Looking at your proposed layout graphic, you could appropriately use the heading/image function, so I will proceed on that basis.

This snippet can be modified to do what you need:

      // categories dressing - add (divider and) heading above a cat
      $disp_block_head = '';
      //$disp_block_head = '<br />';  // for heading not block uncomment this line
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        //$content .= '<hr class="catBoxDivider" />' . "\n";  // to add divider uncomment this line
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n"; 
      break;
      } 

First, the rationale: you will want the price/type/brand subcats under their respective top cats, headphones or microphones, so only the relevant set of subcats shows. All those subcats should be equally located under the top cat, not separated under price/type/brand subcats, and you should give them the correct sort order in admin when you create them (use 10, 20, 30 instead of 1, 2, 3 so you can easily insert others later without disturbing the original numbers).

When you select a top cat, the subcats for it should appear in the boxes. The top cats themselves should never display in the boxes. There is code for that in another thread, which I can dig out later. Actually, for this case, it may be even simpler - use the stylesheet to specify
#categories a.category-top { display: none;}
and don't worry about eliminating them from the output.

Start by opening the first div above the category loop, and then inside the loop, test for the occurrence of the subcat you want at the top of each section. When that comes around, insert the </div><div id="xxx"> for the section above the actual subcat name. Below the loop, close the last div.

Using the Cat Dressing version of tpl_categories.php, find this near the top:

  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) { 

Add
$content .= '<div id="catPrice">';//bof price box
to get this

  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  $content .= '<div id="catPrice">';//bof price box
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) { 

Find this:

      // categories dressing - add (divider and) heading above a cat
      $disp_block_head = '';
      //$disp_block_head = '<br />';  // for heading not block uncomment this line
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        //$content .= '<hr class="catBoxDivider" />' . "\n";  // to add divider uncomment this line
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n"; 
      break;
      } 

Duplicate the case...break; block and add this

$content .= '</div><div id="catType" />' . "\n";

and this

$content .= '</div><div id="catBrand" />' . "\n";
to get this:

      // categories dressing - add (divider and) heading above a cat
      $disp_block_head = '';
      //$disp_block_head = '<br />';  // for heading not block uncomment this line
      switch ($current_path) {
      case ('23' or '24'): //replace numbers with your desired cPaths
        $content .= '</div><div id="catType" />' . "\n";
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n"; 
      break;
      case ('33' or '34'): //replace numbers with your desired cPaths
        $content .= '</div><div id="catBrand" />' . "\n";
        $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n"; 
      break;
      } 

I haven't tested the
case ('23' or '24'):
so am not sure it will function as intended; if it does not, you will need to duplicate each of those case...break blocks and use a single number in each.

Replace 23 and 24 with the subcat cPaths at the top of the "type" sections in headphones and microphones, and the same for 33 and 34.

Finally, find

  $content .= '</div>';
?> 

at the very end of the file, and add to it to get:

  $content .= '</div>/*eof brand box*/</div>';
?> 

Styling to arrange the boxes is a whole other post, which will have to wait until later, as will the whole subject of general page layout.