Nonstandard 2 category 3 subcategory navigation design

[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.