Coding css changes into 2 category 3 subcategory tpl_categories.php

[dvasdekis]

As seen in THIS thread, I've managed to get quite a nifty 2 category 3 subcategory sidebox going, thanks to the marvellous gjh (who I hope works for the zen team, because that's where the donation is going! ). All the information about that work can be found in THIS thread. For perusal, the site in its current form is HERE.

I essentially need to do two things. Firstly, I need to implement some CSS styling to turn my current Categories - Tabs menu from THIS (links to the site, a standard setup categories-tabs header) currently, into THIS. I've been told that I can accomplish this using CSS alone, but I'm at a loss on how to achieve it. I know a small amount of CSS but not enough to get the job done. I would, of course, love to learn. I've experimented but to no avail on this topic.

As an aside that really isn't relevant for it to work, but hopefully as a piece of information that someone finds and puts to good use, the way I want the category-tabs header would work for these two categories, Headphones and Microphones, would be for the category to be a dark shade with the pink brackets next to it when the category is selected, and for the other category to be a lighter colour (I'm hoping to do all this through images in the current font). Then, when you hover over the other category, it turns dark as well. A consequence of this would be that troublesome flicker you see when you hover over most images on the Internet, but I found a neat trick to make the hover image pre-load in CSS:

a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }

The second aspect of the site that I'd like to get working is the main subcategory part. Basically what we managed to achieve in the last thread is to get some div tables happening. The relevant bit of PHP code in my tpl_categories.php is here:

  $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) {  
// 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';
    }
    $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
    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 {
      // categories dressing - add divider above specified cats
      if(in_array($current_path, explode(",",'3,22,21_56'))) { //replace numbers with your cat ids separated by commas
        $content .= '<hr class="catBoxDivider" />' . "\n";
      }
      // 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 ('1_12'): //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 ('2_30'): //replace numbers with your desired cPaths
        $content .= '</div><div id="catMType" />' . "\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 ('1_16'): //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;
          case ('2_34'): //replace numbers with your desired cPaths
        $content .= '</div><div id="catMBrand" />' . "\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;
          } 

So, basically what we've got is 5 different div id's, which, using CSS alone, we need to convert into a layout that looks like the 3 boxes at the bottom of THIS page. I've got 5 instead of 3, as the Types and Brands will be different for the Microphone category. (Perhaps this is unnecessary, I'm not sure).

I can explain how this works, but a pretty good rundown is HERE.

So, point me in the right direction, gods of zen!

[gjh42]

Before proceeding with this, we need to know how you intend the overall page layout and flow to work. Do you want single column, no sideboxes, with all nav in header & footer? Do you want the whole three boxes to display at the top of every page, products or not?

The categories sidebox code will likely have to be called from another file, either tpl_main_page.php or tpl_header.php.

If you want the type and brand boxes to look/act similar for headphones and microphones, you only need a single id for type and brand. The headings can look different - give each its own "catBoxHeading#" if you want.

You will want to add

$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>':'Price</span>' . $disp_block_head) . "\n"; 

just below the
$content .= '<div id="catPrice">';//bof price box
line, for the price heading.

[dvasdekis]

As for how it's to work, sorry for not making it clearer first up. I'd like the Headphones and Microphones to be a permenant fixture at the top of the page. However, the 3 subcategory boxes would ideally disappear when you've clicked on a subcategory of product. I think people can work out how to hit 'back' or 'headphones' when they want to go back to the 3 boxes with the subcategories.

Secondly, I don't want any sideboxes on either side, Amazon-style, with both the product listings and the product details displayed along the entire width of the screen, below 'headphones, microphones'. Eventually when I learn some more PHP I might fiddle with the way that products are displayed in a list when you click a subcategory, but that's for later.

I hope I've answered everything. Thanks again!

[gjh42]

Do you want the subcat boxes on the home page? That would mean either headphones or microphones subcats open - one or the other, not both. Or do you want a lead-in image/phrase/etc. on home page, with customers selecting h or m to begin the process? In that case, a test for $current_page_base == 'index' and ($cPath == 1 or $cPath == 2) would allow the subcat boxes to display while not displaying the grid of subcat image/titles. It looks like the file to edit will be tpl_index_categories.php, and the 'index' test will not be needed here. It is a complex file and it will take some examining to determine what parts can safely be bypassed and where box display code should go.

If you would like products displayed in a grid instead of a vertical list, get the Column Layout Grid mod in Downloads.

[dvasdekis]

Do you want the subcat boxes on the home page? That would mean either headphones or microphones subcats open - one or the other, not both. Or do you want a lead-in image/phrase/etc. on home page, with customers selecting h or m to begin the process? In that case, a test for $current_page_base == 'index' and ($cPath == 1 or $cPath == 2) would allow the subcat boxes to display while not displaying the grid of subcat image/titles. It looks like the file to edit will be tpl_index_categories.php, and the 'index' test will not be needed here. It is a complex file and it will take some examining to determine what parts can safely be bypassed and where box display code should go.

If you would like products displayed in a grid instead of a vertical list, get the Column Layout Grid mod in Downloads.

Nope. I'm quite happy for Headphones to be open on the index. They're by far my dominant seller, after all, and I want to minimise the clicks that people need to buy anything, hence this layout.

I found that admin setting where I can set the front page to a cartain category so either I can just make the index redirect to the Headphones category, or I could integrate it in the index file. Making it a simple redirect would be fine for now, is what I'm thinking.

[dvasdekis]

I found that admin setting where I can set the front page to a cartain category so either I can just make the index redirect to the Headphones category, or I could integrate it in the index file. Making it a simple redirect would be fine for now, is what I'm thinking.

On further inspection this does not work as planned.

[gjh42]

I think the approach that will work is to insert code in tpl_index_categories.php to require the categories sidebox output and bypass all the rest of the regular output.

This snippet from /includes/modules/column_left.php pulls the next box from the list:

require(DIR_WS_MODULES . 'sideboxes/' . $column_left_display->fields['layout_box_name']);

We already know which one we want, so we can change this to

require(DIR_WS_MODULES . 'sideboxes/categories.php');

This then uses the zen_category_tree() function to build the categories tree and calls tpl_categories.php to format the output. I'm not sure if another file needs to be called to actually display the output on the page, or if that is already implicit.

In /includes/templates/your_template/templates/tpl_index_categories.php, find at the top

* @version $Id: tpl_index_categories.php 4678 2006-10-05 21:02:50Z ajeh $
 */
?>
<div class="centerColumn" id="indexCategories">
<?php if ($show_welcome == true) { ?>
<h1 id="indexCategoriesHeading"><?php echo HEADING_TITLE; ?></h1>

and change to

* @version $Id: tpl_index_categories.php 4678 2006-10-05 21:02:50Z ajeh $
 */
?>
<div class="centerColumn" id="indexCategories">
<?php if ($cPath == '1' or $cPath == '2') { //show 3 subcat boxes
  require(DIR_WS_MODULES . 'sideboxes/categories.php');
} else { //standard output ?>
<?php if ($show_welcome == true) { ?>
<h1 id="indexCategoriesHeading"><?php echo HEADING_TITLE; ?></h1>

At the end of the file, find

<?php
  $show_display_category->MoveNext();
} // !EOF
?>
</div>

and change to

<?php
  $show_display_category->MoveNext();
} // !EOF
} //show 3 subcat boxes - standard output
?>
</div>

I have not tested this myself, so if it doesn't work right, post what you did and details of the results (& a jpg screenshot if possible). If some output comes through in the center column to start with, I will be happy. We can take it from there.
Actually, I hope someone with more experience here can take over, as I am getting down to the wire on preparations for a major trip and shouldn't be spending much more time here for a few weeks.

[dvasdekis]

Below are the result's of Glenn's post.


When the top bar is clicked, the subcategories display in the middle! Good times and happy days!
However, when we set the global status of the left sidebox column to 0, we get...

Looking good! But then, clicking on Headphones, we get...

Of course, I assume we can just go Display: none in CSS to fix this, and that it is to be expected.

The site, with the column turned on, is available at http://test.headsonic.com.

Thanks again Glenn! Every second of help you've given me is very, very appreciated! Best of luck on your trip!

[dvasdekis]

Great Success! I managed to work enough display: none; clauses into CSS to eradicate the left column on the index page, but have the categories appear when Headphones or Microphones is clicked. I'm going to try and fumble my way through the CSS now, and hopefully lay it out in a way that will let me put some images in soon.

[dvasdekis]

Now, I've gotten it to a stage where all it is is a list of subcategory links within divs in vertical order, but so far my forays into CSS div creation have produced nothing like what I'm trying to achieve. For instance, inputting all the paddings as I've got them in my PSD file just gives me an oddly-shaped grey rectangle, with the links to the right side of it.

Is there a good place to start anywhere?