How to Customize Category Tabs with Image Buttons?

[BlackOrchidCouture]

I basically want to customize the category tabs area right under my logo, I made image buttons to replace the text links. Is there a place/file to put my html? Would I have to have the Category Tabs ON/OFF turned to on or off (in Configuration/Layout Settings)? I'd like to do this customization in my template. I searched for how to do this in the forums and wiki, forgive me if I simply missed it.

Probably doesn't make a difference concerning my question, but in case, here's my site so far....

https://www.blackorchidcouture.com/catalog

[gjh42]

In /includes/modules/your_template/categories_tabs.php, find

  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab->fields['categories_name'] . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab->fields['categories_name'];
  }

  // create link to top level category
  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
  $categories_tab->MoveNext(); 

and replace with

  //image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif">';
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab_display;
  }

  // create link to top level category
  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
  $categories_tab->MoveNext(); 

Save your images as
/includes/templates/your_template/buttons/english/cat_tab##.gif
where ## is replaced by the category id that the image belongs to.
Replace english with the appropriate language if required. If your site is multilingual, this allows the tabs to reflect the current language.

This is not yet tested.

[gjh42]

P.S. - You should include an alt tag so the images can be read by search engines and sight-impaired users.

    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif">';

//should be

    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif alt="' . $categories_tab->fields['categories_name'] . '" />'; 

This is only one way to accomplish the image replacement goal; other methods may work as well.

[BlackOrchidCouture]

Save your images as
/includes/templates/your_template/buttons/english/cat_tab##.gif
where ## is replaced by the category id that the image belongs to.

This is not yet tested.

Thanks for responding. I did as you said, but so long as I had categories_tab.php in /includes/modules/(name of my template)/, it made my site suddenly have nothing in the main wrapper, it was just my header and logo and empty wrapper. When I removed the file, it went back to normal. I hadn't put the images in a buttons folder yet, but don't know if that would make a difference. As for naming the images, if it were Jewelry for instance, would I name it cat_tabJewelry.gif, or cat_tab_jewelry.gif? Also, if I do get this to work, can the button links be rollovers?

Seems like it would be easier (for me anyway) if there was a file to add html to get the effect I want, though I know most of Zen Cart is run mostly by php.

Thanks!

[gjh42]

You need to have the PHP to create the HTML; adding flat HTML to the files wouldn't get the result you want.

As I said, the code suggestion was not tested. Either there is a bug I didn't see, or you did something wrong when making the edit. What you describe is a symptom of a PHP syntax error, as in a tag missing or the like. What did you use to make the edit?

The images need to be named with the id number of the category; the name would not work. The format must be exactly as I showed to work.

Finally, if you want rollover functionality, you will need a different approach, either javascript or CSS.

  //image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE_IMAGES . 'pixel_trans.gif" alt="' . $categories_tab->fields['categories_name'] . '" />';  
    $new_style = 'category-' . $categories_tab->fields['categories_id']; //class for individual cat hover
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
    $new_style = 'category-top'; //class for non-hover cat
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $categories_tab_current = $categories_tab_display;
  } 

Then add to your stylesheet

category-## {background: url(../buttons/english/cat_tab##.gif) no-repeat;}
category-##:hover {background: url(../buttons/english/cat_tab##hover.gif) no-repeat;}

category-23 {background: url(../buttons/english/cat_tab23.gif) no-repeat;} /*example for category id 23*/
category-23:hover {background: url(../buttons/english/cat_tab23hover.gif) no-repeat;} /*example for category id 23 hover state*/

[BlackOrchidCouture]

Again, thank you for taking the time to help me with this. Ok, I understand now how to name my images with the category id, and have done that. As for the php code, I copied it, deleted exactly the part you said to delete in the categories_tags.php file, and pasted the new code. Should I not be copy/pasting? I tried it multiple times, making sure I was cutting out the exact code per your instructions, and each time it did the same thing, everything in the main wrapper wasn't showing. I then tried it replacing the deleted code with the rollover code you just gave me, and the same thing happened. Do I need to have any other files in that folder as well?

I have only a basic understanding of php, so don't know if I can figure out the part that isn't working.

Would it help if I posted here the whole file after I've changed it so you can see that I've done it correctly?

What do you think of the idea of getting my logo back in photoshop and extending the bottom a few inches, filling the bottom space with the image links, and splicing them, so they were just an extension of the logo? That way I wouldn't even be worried about dealing with the category tabs area. Think that would work?

[BlackOrchidCouture]

Here is the whole categories_tabs.php file once I've done the code swap:

<?php
/**
 * categories_tabs.php module
 *
 * @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: categories_tabs.php 3018 2006-02-12 21:04:04Z wilt $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$order_by = " order by c.sort_order, cd.categories_name ";

$categories_tab_query = "select c.categories_id, cd.categories_name from " .
TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
                          where c.categories_id=cd.categories_id and c.parent_id= '0' and cd.language_id='" . (int)$_SESSION['languages_id'] . "' and c.categories_status='1'" .
$order_by;
$categories_tab = $db->Execute($categories_tab_query);

$links_list = array();
while (!$categories_tab->EOF) {




//image replacement
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') {
    $categories_tab_display = '<img src="' . DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif">';
  }else{
    $categories_tab_display = $categories_tab->fields['categories_name'];
  }
  // currently selected category
  if ((int)$cPath == $categories_tab->fields['categories_id']) {
    $new_style = 'category-top';
    $categories_tab_current = '<span class="category-subs-selected">' . $categories_tab_display . '</span>';
  } else {
    $new_style = 'category-top';
    $categories_tab_current = $categories_tab_display;
  }

  // create link to top level category
  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
  $categories_tab->MoveNext();  

 
}

?>

If I save this file (in includes/modules/my_template) it makes the content disappear. Same thing if I use the code for the hover buttons instead.

One question about the css for the hover buttons, do I put the above css code in my main css page or the buttons css page?

I've been searching other ways to put image buttons in the category tabs area, but so far haven't found anything. Surely it's been done?

If it makes a difference, I'm using Zen Cart v1.3.9.

Thanks ahead of time for any further info on this!

[gjh42]

I don't have a functioning test site on my new computer yet, so I can't debug it myself. This is the corresponding code that works in Categories Dressing:

  //display image if exists for category name in current language - with title tag
  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . CAT_NAME_IMG_EXT)) {
    $cat_name_display = zen_image(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/catimg' . $current_path . CAT_NAME_IMG_EXT, '', '', '', 'title="' . $cat_name_display . '"'); 

Comparison shows that I missed the second closing ) in this line:

  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif') { 

It should be

  if (file_exists(DIR_WS_TEMPLATE . 'buttons/' . $_SESSION['language'] . '/cat_tab' . $categories_tab->fields['categories_id'] . '.gif')) { 

[BlackOrchidCouture]

You rock!

Check it out!

www.blackorchidcouture.com

I just need to make a few tweeks with sizing and spacing, but this is what I wanted!

A few quick questions and I'll be out of your hair. I had not wanted to have to have a button for every category I have listed in the left sidebox, hence the text "Band Shirts". Is there a way to block some categories out of the tabs? Also, I had wanted the stars to be spacers between the links but didn't know how to do this, so I incorporated the stars into the buttons, and once they have no space between them, it will look like the stars are evenly spaced between the links. Is there a better way to do this?

Thank you so much!

[gjh42]

Add a test inside the while loop to skip the category:

while (!$categories_tab->EOF) {

  if ($categories_tab->fields['categories_id'] != '23') { //skip cat

//existing code

} //skip
  $categories_tab->MoveNext(); 

Change 23 to your cat id.

The method you used for star spacers is the simplest for your situation. I wouldn't change it.