Nonstandard 2 category 3 subcategory navigation design

[dvasdekis]

Perhaps a picture would explain what I'm trying to achieve better than words will, but I'll try with both anyway.
http://files.headsonic.com/files/1/layout01.gif

On the main index of the site I want the two categories (Headphones and Microphones) displayed as images directly below the logo, and for the main page to be on the headphone category by default. When one of these two main categories is selected, the pink bracket appears next to it.

Below this, I'm looking to the these 3 subcategory boxes to appear, with each one displaying the complete selection from the catalog that accords to the particular criteria selected. For instance, if you hit $0-50, you would get every single model of headphone in the catalog that is between $0 and $50.

I'm happy to do this catalog arranging myself by hand for each product in the backend (putting each product into 3 subcategories perhaps, given that each product will have a price, type and brand attribute), but I have no idea how I would go about beginning to work with this.

Thanks in advance!

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

[gjh42]

I just tested the
case ('23' or '24'):
and it doesn't work as shown. You will need four case...break blocks, one for each subcat (unless I can work out the correct way of stating the "or").

[dvasdekis]

So far it's working amazingly well!! I was going to try holding off posting before I'd templated some of it in CSS, but so far, so very very good!

For those who aren't familiar with PHP, I'd like to try and explain how I figured out Glenn's code was working. What it does is it reads through the URL's that the categories mod produces, and every time it comes across a URL that is the same as the cPath URL listed in the case...break codes, it sticks in a bit of div code into the HTML.

With that div code, the CSS can pick up on it and puts all the categories following it into the table created by the div. Then, when it's time for the next subset of boxes to come along, a new case...break piece puts a new bit of div code into the HTML. This then lets you work with it again, with a new div layout.

So, basically what it's doing is it's saying that everything in the first subactegory under Headphones is in the price column. Then, it overrides it when it hits the first 'type' cpath, and says everything under this is in the 'type' column. Then, it overrides it again when it gets down to the 'brand' items.

Thank you Glenn! It would've taken months for me to figure that out on my own (If I had ever managed it at all)!