Categories Dressing

[gjh42]

Zen Cart has a pair of classes for active categories, .category-subs-parent and .category-subs-selected, but they will only operate when the category displays as text. You can add the test for current category elsewhere and get a class you will be able to apply the hover bg image to.

Add this code

    //mark current category
    if ($box_categories_array[$i]['current']) {
      $new_style .= '-current';
    }
    // /mark current category 

as shown to get persistent hover on subcats as well as top cats

      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';
    }
    //mark current category
    if ($box_categories_array[$i]['current']) {
      $new_style .= '-current';
    }
    // /mark current category
    $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']); 

or as shown here to get persistent hover on top cats only

      case ($box_categories_array[$i]['top'] == 'true'):
        $new_style = 'category-top';
        //mark current category
        if ($box_categories_array[$i]['current']) {
          $new_style .= '-current';
        }
        // /mark current category
        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']); 

Add to your stylesheet for each category like this

a.catBg25:hover {
    background-image: url(../images/catbg25hover.gif);
    }
a.category-top-current.catBg25 {
    background-image: url(../images/catbg25hover.gif);
    }

Try this and let me know how it works.

[HTsean]

Glenn,

your code worked perfectly, and it all worked out the first try. Thank you!

I mainly needed just the TOPCAT to remain hover, just like how the category text behaves.

[maclancer]

Hi gjh42, I have a question for you, I am using your mod in my cetegories sidebox. I want to use your mod with ezpages links in the same sidebox but does not work, how I can add your mod using ezpages links? Thanks a lot!

[gjh42]

Are the ez-page links from a published mod, or just links you want to add to the categories box? What code are you using to add the links? What kind of order do you want the links to appear in, relative to the categories? And which Cat Dressing functions do you want to apply to the links?

[maclancer]

Are the ez-page links from a published mod, or just links you want to add to the categories box? What code are you using to add the links? What kind of order do you want the links to appear in, relative to the categories? And which Cat Dressing functions do you want to apply to the links?

Well I am using a mod that add the ezpages to the categories sidebox, to make it easy to understand I add the tpl_categories.php code, this mod is integrated with you dressing mod, I have basic knowledge in html but none in php, so you are the expert in this area:

<?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
 */
  $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'] != 'false' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 0)) {
      // skip if this is for the document box (==3) 
    } else {
      // categories dressing - add divider above specified cats
      if(in_array($current_path, explode(",",''))) { //replace numbers with your cat ids separated by commas
        $content .= '<hr class="catBoxDivider" />' . "\n";
      }
   // 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
    }
  }

// integrate ezpages
  $content  .= "\n" . '<ul style="margin: 0; padding: 0; list-style-type: none;">' . "\n";
  for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) { 
    $content .= '<li><a href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a></li>' . "\n" ;
  } // end FOR loop
  $content  .= '</ul>' . "\n";
 
//end integrate ezpages
// integrate ezpges TOC
 $content .=  "\n" . '<ul style="margin: 0; padding: 0; list-style-type: none;">' . "\n" ;
  for ($i=0; $i<sizeof($ez_pages_toc); $i++) {
    $content .= '<li>' . $ez_pages_toc[$i] . '</li>' . "\n" ;
  }
  $content .= '</ul>' . "\n" ;

// end integrate ezpages TOC
  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>';
?>

Thanks a lot!!!

[maclancer]

I want to add only the image that is on the left side of the links, here is my webpage: www.creativasales.com Thank you!

[gjh42]

Your view source is showing the ez-page <ul> list structures, but no list items. Do you have any that should currently be showing? If not, please add some so I can verify the effects. If you have some links that should be showing and are not, that would be up to your implementation of the ezp mod.

It looks as if it should be simple to add a class to the link code in tpl_categories.php; it would be simpler yet to delete the hard-coded styling in tpl_categories and style the <li> elements in your stylesheet.

// integrate ezpages
  $content  .= "\n" . '<ul style="margin: 0; padding: 0; list-style-type: none;">' . "\n"; 

becomes

// integrate ezpages
  $content  .= "\n" . '<ul>' . "\n"; 

Add to your stylesheet

#categories ul {
    margin: 0;
    padding: 0;
    list-style: disc inside url(../images/bullet1.gif);
    }

[maclancer]

Thanks a lot gjh42, that work perfectly Thank you for your time again!

[maclancer]

Sorry to bother you again gjh42, but I noted that in IE7 looks great but if I use firefox look like a mess, here is a screeshot:



Do you know how I can fix the space in here? I would appreciate it, Thank you!

[gjh42]

If you disable the <li> display and apply it to the link (the same way the categories work), it functions correctly on your site in Firefox. It should work the same in IE, because it is the same code as the other links use.

#categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
    } 
#categories ul li a {
    margin: 0;
    padding: 0;
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);
    }