Add a pop-up information box to describe a product option

[Randy]

his is for the 4.0 branch of X-Cart. What it does is add a linked icon (or text) next to the product option menu on the product detail page. Clicking that will open a pop-up window to display more information about that option, similar to the little question mark next to the CVV option on checkout. Tested in 4.0.18, not sure about older versions.

First, create a new folder in your files/ directory called options. Make it writable.

Open up skin1/modules/Product_Options/customer_options.tpl and find this line of code:

<SELECT id="po{$v.classid}" name="{$poname}"{if $disable} disabled{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}>
{foreach from=$v.options item=o}
<OPTION value="{$o.optionid}"{if $o.selected eq 'Y'} selected{/if}>{$o.option_name}{if $v.is_modifier eq 'Y' && $o.price_modifier ne 0} ({if $o.modifier_type ne '%'}{include file="currency.tpl" value=$o.price_modifier display_sign=1}{else}{$o.price_modifier}%{/if}){/if}</OPTION>
{/foreach}
</SELECT>

Just after it, add this:

{if $v.classtext eq 'Option Name'}
<a href="#" onClick="window.open('files/options/option-name.html','','scrollbars=no,resizable=no,width=300,height=400,menubar=no,toolbar=no');return false;" target="_blank"><img src="{$ImagesDir}/question.gif" border="0" style="vertical-align: middle;" alt="Click here for more info" /></a>{/if}

Replace the following pieces with your information:

- Option Name - this is the name of the option such as select color, select size, etc. as it appears on the product detail screen next to the option drop-down. It is case sensitive, so make sure you type it exactly as it appears.

- option-name.html - replace this with the html file you want to include in the pop-up, or use an image (i.e. imagename.jpg). Be sure to upload the .html or .jpg file to the files/options directory you created

- width= , height= - these the the width/height of the pop-up window. Adjust accordingly.

- alt= - this is the text that will show up when the customer mouses over the question mark image (in Internet Explorer at least).

- question.gif - this is the default x-cart question mark image. I always create my own to go with the style, so adjust this accordingly as well.

The code above will add the image/link to the option specified only. To add it to additional options, use {elseif} statements like this:

{if $v.classtext eq 'Option Name'}
<a href="#" onClick="window.open('files/options/option-name.html','','scrollbars=no,resizable=no,width=300,height=400,menubar=no,toolbar=no');return false;" target="_blank"><img src="{$ImagesDir}/question.gif" border="0" style="vertical-align: middle;" alt="Click here for more info" /></a>

{elseif $v.classtext eq 'Option Name2'}
<a href="#" onClick="window.open('files/options/option-name2.html','','scrollbars=no,resizable=no,width=300,height=400,menubar=no,toolbar=no');return false;" target="_blank"><img src="{$ImagesDir}/question.gif" border="0" style="vertical-align: middle;" alt="Click here for more info" /></a>
{/if}

Now this can get really clunky if you have a million options to add a link to, but it works well if you only have a few universal options. It will NOT work if you have a different image/html page to link to for each individual product, such as if you have different color charts for each product.

If you want to link to a unique image/html page for each product, you can use this:

{if $v.classtext eq 'Option Name'}
<a href="#" onClick="window.open('files/options/{$product.productid}.html','','scrollbars=no,resizable=no,width=300,height=400,menubar=no,toolbar=no');return false;" target="_blank"><img src="{$ImagesDir}/question.gif" border="0" style="vertical-align: middle;" alt="Click here for more info" /></a>{/if}

So if you are veiwing the details for a product with ID # 8, clicking on the link next to the 'Option Name' option will link you to files/options/8.html.

Make sense? Post here with any questions and I'll answer them. Enjoy!