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?