Highlight Header Navigation Images

[ExactlyHow]

I have created a header menu based on the links in the first-level catagory navigation links. Does anybody know specifically how to use the $current_category_id variable to highlight the catagory for that cPath? Just changing the cell background-color is sufficient.

 

Here's the simple html used to create the menu, which resides in the header.php include. The catagories are static and will stay the same.

 

<table align="center" width="1000" height="133">
 <tr align="center">
   <td class="topMenu1" onClick="parent.location='../index.php?cPath=23'">
       <img src="../images/Menu/MenuLiving002.bmp" width="130" height="100" border="0" alt="Living Room" />
       <br /><div class="topMenuText">Living Room</td>
   <td class="topMenu1" onClick="parent.location='../index.php?cPath=21'">
       <img src="../images/Menu/MenuDiningS.jpg" width="130" height="100" border="0" alt="Dining Room" />
       <br /><div class="topMenuText">Dining Room</div></td>
   <td class="topMenu1" onClick="parent.location='../index.php?cPath=22'">
       <img src="../images/Menu/MenuBedS.jpg" width="130" height="100" border="0" alt="Bedroom" />
       <br /><div class="topMenuText">Bedroom</td>
   <td class="topMenu1" onClick="parent.location='../index.php?cPath=28'">
       <img src="../images/Menu/MenuYouth001.bmp" width="130" height="100" border="0" alt="Youth" />
       <br /><div class="topMenuText">Youth</td>
   <td class="topMenu1" onClick="parent.location='../index.php?cPath=86'">
       <img src="../images/Menu/MenuRugs002.bmp" width="130" height="100" border="0" alt="Entryways" />
       <br /><div class="topMenuText">Entryways</td>
   <td class="topMenu1" onClick="parent.location='../index.php?cPath=85'">
       <img src="../images/Menu/MenuOffice002.bmp" width="130" height="100" border="0" alt="Home Office" />
       <br /><div class="topMenuText">Home Office</td>
   <td class="topMenu1" onClick="parent.location='../index.php?cPath=87'">
       <img src="../images/Menu/MenuAccents002.bmp" width="130" height="100" border="0" alt="Home Accents" />
       <br /><div class="topMenuText">Home Accents</td>
 </tr>
</table>

 

Thanks in advance!!!!

[photofxplus]

Something like:

<td class="topMenu1" <?php echo $current_category_id == 23 ? 'bgcolor="#0000FF"' : ''; ?> onClick="parent.location='../index.php?cPath=23'"> <img src="../images/Menu/MenuLiving002.bmp" width="130" height="100" border="0" alt="Living Room" /> <br /><div class="topMenuText">Living Room</td>

[ExactlyHow]

Thanks photofxplus,

 

Using your suggestion, I rewrote to the following code using a conditional to call stylesheet classes with the background colors changed. This worked great on the first layer, but you lose the call when you go into the subcategories.

 

<td class="topMenu1" onClick="parent.location='../index.php?cPath=23'">
       <img src="../images/Menu/MenuLiving002.jpg" width="130" height="100" border="0" alt="Living Room" />
       <?php if ($current_category_id == 23) {echo "<div class='topMenuSelected'>";} else {echo "<div class='topMenuText'>";} ?>
       Living Room</div></td>

 

I echo'd the $current_category_id to see what was happening, and see that the category id is unique for each sub-category, which renders this method not useful for keeping the top-level category menu high-lighted. I noticed that the url does show the hierarchy: index.php?cPath=23_88 (and so on down the layers). I'm new at php, and was thinking maybe there's a way to look at the url and stuff the last integers after the last preceding underscore that follow the first top-level integers following the equal sign into a variable to == the $current_category_id on the menu link. In other words, give that menu category a unique name that reflects the top-level $category (23 in this case), look at the first and last numbers in the url cPath, match the first numbers to the top-level category but call the last numbers as the category id. That make sense?

 

Any ideas?

 

Thanks again!

EH

[photofxplus]

You could do that in catalog/includes/application_top around line 458:

if (tep_not_null($cPath)) {

$cPath_array = tep_parse_category_path($cPath);

$cPath = implode('_', $cPath_array);

$current_category_id = $cPath_array[(sizeof($cPath_array)-1)];

} else {

$current_category_id = 0;

}

 

This part sets the current_cat_id.. the current category id is set by retrieving the last element of the cPath_array: sizeof($cPath_array)-1)

 

To retrieve the parent cat_id use the same array but retrieve the first element. Then set your own value and look for it in the category box instead of the $current_category_id,

such as add to the above:

 

if (tep_not_null($cPath)) {

$cPath_array = tep_parse_category_path($cPath);

$cPath = implode('_', $cPath_array);

$current_category_id = $cPath_array[(sizeof($cPath_array)-1)];

$my_category_id = $cPath_array[0];

 

You can retrieve any of these values to highlight any category using a loop through this array.

 

While (list( $value) = each($cPath_array)) {

if ( $value == category_id)

{ do this }

}

[photofxplus]

You could do that in catalog/includes/application_top around line 458:

if (tep_not_null($cPath)) {

$cPath_array = tep_parse_category_path($cPath);

$cPath = implode('_', $cPath_array);

$current_category_id = $cPath_array[(sizeof($cPath_array)-1)];

} else {

$current_category_id = 0;

}

 

I just looked at that again - rather than edit the application_top page -- to avoid this and since that array should still exist with the call for column_left you should be able to use the same array on column_left..

So you should be able to use the value returned with the variable:

$cPath_array[0] - rather than - $current_category_id on your column_left page..