Categories Dressing

[maclancer]

You are amazing, that fixed the problem, thank you so much!!!

[gsdcypher]

I want to add non-linked text to my categories menu to group links together under a specific heading. For example:

non-linked text heading
link
link
link

non-linked text heading
link
link
link
etc., etc.

I added the code from the readme file to my tpl_categories and stylesheet but I don't see how or where to add the text heading or group my links...

and the links are spaced too far apart...

view here: http://www.allk-9.com/test/

 
<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
 */
  $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 {
   
      // categories dressing - add (divider and) heading above a cat
      $disp_block_head = '';
      //$disp_block_head = '<br />';  // for heading not block uncomment this line
      switch (str_replace("cPath=","",$box_categories_array[$i]['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;
      }  
   
      $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";
    }
  }
  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      // display limits
//      $display_limit = zen_get_products_new_timelimit();
      $display_limit = zen_get_new_date_range();
      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = 1 " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div>';
?>

and added this to the bottom of my style sheet:

 
/* begin categories dressing to add a non-linked heading in a specific place in the categories menu */
.catBoxHeading1 { 
    font-family: 'times new roman', serif;
    font-weight: bold;
    font-size: 1.4em;
    color: #335511; 
    background-color: #ff66ff;
    /*background-image: url(../images/catheadbg1.gif); */ /*uncomment to use background image with or without coded text*/
    /*height: 23px; */ /*uncomment to use background image without coded text*/
    display: block;
    padding: 0.3em 0.4em;
    margin-top: 2px;
    margin-bottom: 2px;
    } 
/* end categories dressing to add a non-linked heading in a specific place in the categories menu */

help please. thanks!

[gsdcypher]

follow up...

how do i edit the tpl_categories file that comes with the mod to only show a non-linking heading text and a line under that and then the links? right now there are some samples showing that i need to get rid of.

Heading Text
link
link
link...

thanks.

 
 
<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
 * Modified for Categories Dressing v2.1  by Glenn Herbert (gjh42)  2008-01-01
 */
  $disp_block = '';
  //$disp_block = '<br />'; //if not using display: block; in stylesheet, uncomment  this line
  $disp_block_head = '';
  //$disp_block_head = '<br />';  // for headings not block uncomment this line
  $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';
    }
 $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(",",'111,53,1'))) { //replace numbers with your cat ids separated by commas
      // $content .= '<hr class="catBoxDivider" />' . "\n";
      // }
      // categories dressing - add (divider and) heading above a cat
   switch ($current_path) {
   case '111': //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>':'Dog Agility</span>' . $disp_block_head) . "\n"; 
   break;
      }
         // categories dressing - add (divider and) heading above a cat
   switch ($current_path) {
   case '53': //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>':'Clothing</span>' . $disp_block_head) . "\n"; 
   break;
      }  
   // categories dressing - category name mods
      $cat_name_display = $box_categories_array[$i]['name'];
   $cat_img_bg = '';
   // categories dressing - display image if exists for category name
      if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif'); 
   // categories dressing - display background image if exists for category name 
   } elseif (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg' . $current_path . '.gif')) {
        $cat_name_display = '';
        $cat_img_bg = ' catBg' . $current_path;
      } else {
     $cat_img_bg = '-text';//append to main classname
   }
      $content .= '<a class="' . $new_style . $cat_img_bg . '" 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">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
        } else {
          $content .= '<span class="category-subs-selected">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
        }
      } else {
        $content .= '<span class="category-not-selected">' . $cat_name_display . ($disp_block == '<br />'?'</span>':'');
      } // category name mods
      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= ($disp_block == '<br />'?'</a>':''); // categories dressing - adjust link end 
      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 .= ($disp_block == ''?'</span></a>':'') . $disp_block . "\n"; // categories dressing - adjust link end 
      // categories dressing - add subtext below a cat
   switch ($current_path) {
   case '23': //replace number with your desired cPath
        $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n"; 
   break;
   } // subtext
    }
  }
  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      // display limits
//      $display_limit = zen_get_products_new_timelimit();
      $display_limit = zen_get_new_date_range();
      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = 1 " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div>';
?>

[gsdcypher]

my categories still show the cat 3 sample image for one of the category links... how do i remove that???

also right now i have colored block with non-linking text in the block for the heading. how do i make that text a clickable link for comparison?

thanks.

[gjh42]

Most if not all of the example headings, images and subtext have instructions in the readme and/or in tpl_categories.php itself for disabling them.
For images, delete the example images from /includes/templates/your_template/images/ and they will no longer be called for. If you can't find the instructions for a particular item, ask again.

If you are wanting to make a non-linked heading linked, that is not what this mod does. What do you want it to link to?

[gsdcypher]

Hi Glenn,

Well... I kinda sorta got it doing what I want it to do.
http://www.allk-9.com/test/

How do I make the blue blocks wider (100% width of the column)?

How do I get rid of the "Link Heading" block above All Products?

My main problem is how to make the navigation easy to use... Now it seems the categories menu is too long...

Thanks.

[gjh42]

The blue blocks like Link Heading, right?
You can add negative left & right margins to the heading:

.catBoxHeading1 { 
	font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
	font-weight: bold;
    font-size: 1.0em;
    color: #ffffff; 
    background-color: #417A96;
    display: block;
    padding: 0.3em 0.4em;
/* replace 4 lines with 1 shorthand line
    margin-top: 3px;
    margin-right: -5px;
    margin-bottom: 3px;
    margin-left: -10px; 
*/
    margin: 3px -5px 3px -10px;
    }

To remove the link heading example, find this in tpl_categories.php

    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 

and comment it out according to the note

    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link 

[HTsean]

Hello Glenn,

I am having a bit of a problem with the category dividers.

I've added category dividers but noticed the space between the dividers were a little too far apart so I've added this code into my stylesheet:

hr.catBoxDivider { 
    padding: 0em;
    margin-top: .2em;
    margin-bottom: .2em;
    } 

I think the padding didn't do anything, but the margins fixed the divider spacing in Firefox.. but in Internet Explorer, nothing seems to budge the spacing around the dividers. Any suggestions?

[gjh42]

What is your base hr styling? Does it look like this?

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9a9a9a;
	}

[HTsean]

Yes, my base HR styling is just like that.