overLIB - HowTo?

[dscott1966]

I wrote my own module to do this. It turns out Zen Cart had nothing like what I needed. My script is quite short/ concise, although unfortunately it added a significant amount of overhead since zen cart doesn't store image sizes.

I'm looking for something like this can you share how you did it. I have been trying but just can't do it?

[Dasha]

Absolutely - i have no problem helping you with this at all.


For anyone else that is interested in having the tooltip - this is for those that are using the module Two Column Product Attribute Display. The code will still work but be slightly varied for those that arent using this.

If you aren't using the Two Column Product Attribute Display, go to:
http://www.zen-cart.com/forum/showth...345#post617345
It would be less confusing.

Onward...

STEP 0: BACKUP! BACKUP! BACKUP! (*i would do this always and forever before you ever touch anything in your store!)

Step 1:
Go here and install The Two Column Layout: http://www.zen-cart.com/forum/showthread.php?t=83814

Step 2:
Find Line 22 - 58 on tpl_modules_attributes.php:

<?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 ='';

}

?>

And replace it with:

<?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">';
        if ($options_comment[$i] != '') {

            $output .=  "<a href=\"javascript:void(0)\" onMouseOver=\"Tip('$options_comment[$i]');\" onMouseOut=\"UnTip();\"><img src=\"../images/bt_help.gif\" border=\"0\" alt=\"tooltip\" align=\"top\" /></a>&nbsp;" . $options_name[$i];
        } else {
            $output .=  $options_name[$i];
        }
        
        $output .= '</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 ='';

}

?>

Notice there is an image in there. The image is called: ../images/bt_help.gif - please be sure to create and place it in your template folder under images. You can change the image name to whatever you want but if you dont name it 'bt_help.gif' be sure to change it on line 32.

Step 3:
Save your new tpl_modules_attributes.php in your current template folder - not the default folder. (unless using the default template of course).

Step 4:
Now I had tried getting the regular OverLIB to work with zen cart and couldn't get any of the ones I had downloaded to work right. THIS ONE however worked great- all of my java properties were FINALLY being read by zen cart. You can download it here: http://www.walterzorn.com/tooltip/tooltip_e.htm

Step 5:
Go to: includes/templates/YOUR_TEMPLATE/jscript/ and add the 3 files to your server that you downloaded from Step 4.

Step 6:
Go to: includes/templates/YOUR_TEMPLATE/common/tpl_footer.php and add this line to the very end of the file (After the last "?>"close php tag ):

<script type="text/javascript" src="../jscript/wz_tooltip.js"></script> 

Just for informational purposes, I could only get mine to work by inputting a hard link - which would be instead of src="../jscript/wz_tooltip.js" I ended up putting src="http://www.yourdomain.com/includes/templates/YOUR_TEMPLATE/jscript/wz_tooltip.js"
(obviously replacing YOUR_TEMPLATE with the actual name of your template...same with www.yourdomain.com

Be sure that if you are going to include the other two .js files that come with the wz_tooltip that they go AFTER the code i just gave you in step 6. If you put them before that the module will not function properly.

Step 7:
Test your module by going to your admin and then going to "Option Name Manager". Under each option name when you click to edit you will see an area for comments. Add what you want the tooltip to say here. You can use HTML tags.

Keep in mind that comment space is originally limiting you to 64 characters. If you go to your SQL manager (in my case its phpMyAdmin) and find the table called "products_options" click on that. A new screen should load and give you other tables one of them being products_options_comment. You will notice by default this is set to varchar(64). This is where you would change it to however many characters you want to be able to type. In my case i changed it to 2000.

Also keep in mind that until you add a comment under your option Name Manager, nothing is going to show up. That's the beauty of this module! It only shows a tooltip when you add a comment! WONDERFUL! :)

That's it! Your tooltip should be working now!!

As far as questions go, I'm not the greatest php coder in the world i'm more of a crafty cut and paster that uses logic to screw around and figure things out when they dont work. I can try to answer questions but other than what I explained above am not sure how much more helpful I can be. HAPPY CODING!