Adding Hovering Tips to Attributes

[GearStudios]

Hope this is the right place to add this for the community.

I have been working on a site that will eventually have many attributes. The problem that I had was how to keep it clean. The site is still under construction. But I thought that I would share what I had done.

Here is a version on a mockup site: Link

There is this great script by Eric Bosrup for creating hovering text boxes from links. Highly customizable. His website is Here. I have included the file below for you.

Make sure and back up the files that you will be modifing. Don't forget to utilize the overide feature in Zen-Cart. You are doing this on your own and I am not responsible for any complications. Just wanted to say that up front. If you have a problem I will try to help.

Here are the steps:

1. load the js on your server. I just put mine in the store folder. Here is the file: File
2. load the images for the graphics on your server. I created an images folder in the root of my server and put the three images there. Here are the images
3. add this to the bottom of mytemplate/common/tpl_footer.php

<script  type="text/javascript" src="../store/overlib.js"></script>

Here is a description of what I did.

I utilitzed the options comment field in the attributes option name. That means that your comments will appear twice, once above the attribute and within the graphic box. You can remove the one above the attributes. I have that shown below in my examples.

If you don't have a comment it won't add the hovering tip to the attribute. The attribute will look normal.

At some point I may add an extra comment field so I can use both independantly with an attribute. But for my needs this will work.

4.On line 25 in mytemplate/template/tpl_modules_attributes.php I removed this

<?php echo $options_comment[$i]; ?>

This will prevent the comments appearing in two places.

Next I modified line 30 from this:

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>

To this:

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php
	if ($options_comment[$i] != '') 
{echo "<a href=\"#\" onmouseover=\"return overlib('$options_comment[$i]', TEXTCOLOR, '#ffffff', WIDTH, 250, HEIGHT, 120, BACKGROUND, '../images/greenbox.gif', PADX, 60, 20, PADY, 20, 20);\" onmouseout=\"return nd();\" ><img src=\"../images/tooltip.png\" border=\"0\" alt=\"tooltip\"/></a>&nbsp;" . $options_name[$i];} 
	else {echo "<img src=\"../images/spacer.gif\" width=\"16px\">" . $options_name[$i];}

?></h4>

Don't forget to add this to the bottom of the mytemplate/common/tpl_footer.php if you didn't do it in step 3:

<script  type="text/javascript" src="../store/overlib.js"></script>

Hope all this makes sense.

Would love to see your site if you add this.

[swguy]

Nice. I haven't downloaded the newest Dojo, but this is better than the Dojo 0.3. Thanks for sharing.

Scott

[clane777]

I am using on my site! Under Gift Collections. It does appear differently from IE to Mozilla but functions great! Thanks!

[Phil020782]

fantastic mod, just 1 little annoyance that I was wondering if someone could help me with:

when the tooltip appears it displays over the top of text boxs fine but it goes behind dropdown boxes making the tooltip partially hidden, is there any way to make it appear infront of dropdowns just like it does with text box.

Thanks
Phil

[Phil020782]

Never mind I found a way around this problem by editing the javascript file to make the tooltip appear to the left of the mouse rather than the right. So dropdown attributes don't get in its way anymore.

[Dasha]

Hey there -
I was able to get this to work with the original tpl_modules_attributes.php but I have a modified version that has tabbed browsing in it and splits the content into two columns. I can't seem to get it to work while keeping it in two columns instead of one long one. I tried putting the page back to the state where there were no columns and it worked great but sadly we are in need of the column system. Any help/advice would be greatly appreciated!

Here is the code I am struggling with:



<?php
/**
* Module Template
*
* Template used to render attribute display/input fields
*
* @package templateSystem
* @copyright Copyright 2003-2005 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_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
*/
?>
<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

<?php
for($i=0;$i<sizeof($options_name);$i++) {
?>
<?php
if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
$output .= '<h3 class="attributesComments">'.$options_comment[$i].'</h3>';
}

$output .= '
<div class="wrapperAttribsOptions">
<h4 class="optionName back">'.$options_name[$i].':</h4>
<br class="clearBoth" />
<div class="back">' . $options_menu[$i].'</div>
<br class="clearBoth" />
</div>';

if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') {
$output .= '<div class="ProductInfoComments">'.$options_comment[$i].'</div>';
}

if ($options_attributes_image[$i] != '') {
$output .= $options_attributes_image[$i];
}

$output .= '<br class="clearBoth" />';

if ($i%2) {
if($i==0){
$left_col .= $output;
} else {
$right_col .= $output;
}
} else {
$left_col .= $output;
}
$output ='';

}

?>
<table background="../../13914/images/tab_bg.jpg" style="background-position:left bottom;" width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td align="left" width="50%" style="background:url(http://www.planet3press.com/includes...ges/tab_bg.jpg) bottom center no-repeat; padding-left:50px; padding-right:20px;"><?php echo $left_col; ?></td>
<td align="left" width="50%" style="background:url(http://www.planet3press.com/includes...ges/tab_bg.jpg) bottom center no-repeat; vertical-align:top; text-align:left;"><?php echo $right_col; ?></td>
</tr>
</table>


<?php
if ($show_onetime_charges_description == 'true') {
?>
<div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
<?php } ?>


<?php
if ($show_attributes_qty_prices_description == 'true') {
?>
<div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascriptopupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
<?php } ?>
</div>

[Dasha]

I've added the overlib to my tpl_modules_attributes.php page - for some reason none of the overlib properties from the js file are working correct? It basically will allow me to add an image bg but as far as customizing width, height, color elsewhere nothing is working. Anyone know a reason this would be? I have uploading 5 different versions of an overlib file - all work fine if i put them on a regular html page but adding them to my php file deep in the site it doesnt work right. here is a link to what i'm referring to: http://www.planet3press.com/business...ess-cards.p.92

roll over the ? next to the word Quantity or Ink - open safari vs firefox - literally no formatting is sticking. help please!

[dontknowwhatimdoing]

I've added the overlib to my tpl_modules_attributes.php page - for some reason none of the overlib properties from the js file are working correct? It basically will allow me to add an image bg but as far as customizing width, height, color elsewhere nothing is working. Anyone know a reason this would be? I have uploading 5 different versions of an overlib file - all work fine if i put them on a regular html page but adding them to my php file deep in the site it doesnt work right. here is a link to what i'm referring to: http://www.planet3press.com/business...ess-cards.p.92

roll over the ? next to the word Quantity or Ink - open safari vs firefox - literally no formatting is sticking. help please!

Start out with a very simple dummy testpage.

I actually couldn't get overlib to work following the official documentation exactly --the way I got it to work was by copying one of the actual pages that had the overlib function I needed (it turns out he had made some slight changes/ or did things slightly different than the documentation).

I would have to go back & research what I did to give more details--I think the most simple & concise way to say it is, just look at a page where your function is already working, and cut out everything but the working function--that will tell you a lot.

I then got that example page working on a dummy test page. Once I was clear on how that functioned, integrating it into zen cart was fairly simple.

I hope that helps.

[Dasha]

Thanks for responding!
I have already tried to get it to work on my dummy page on the same server and it works fine:
http://planet3press.com/bubble.php

problem is when I try to add it to any page that uses php - it doesnt seem to show me my visual properties. It is actually working in the sense of being a popup - but any formatting i give it doesnt work at all. I've added it to the header page, the menu page, page2,3,4 as well as my attributes page etc - doesn't show any of my visual properties. Any idea why?

[Dasha]

wow okay i'm so excited i figured it out! You were right - there was a problem with the overlib function i was using so i downloaded a different one and it works great!!! thanks for you help! :)