X-Cart forums - Add a pop-up information box to describe a product option

Page 1 of 2

Show 40 posts from this thread on one page

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Add a pop-up information box to describe a product option (https://forum.x-cart.com/showthread.php?t=24417)

balinor

08-28-2006 10:21 AM

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

This 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:

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:

Code:

{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:

Code:

{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:

Code:

{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!

mike@tatechnology.net

08-28-2006 11:43 AM

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

balinor is the man!

Good work and did exactly what I needed!

carpeperdiem

09-14-2006 04:14 AM

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

Just to report, this mod works in 4.1.3 -- very nice. Very useful. A zillion possible uses.

Thanks for contributing this, Padraic.

Jeremy

Warwick

11-13-2006 01:55 PM

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

Hi Balinor, a great mod! Any change of getting it international/multi language?

dillion

12-28-2006 07:44 PM

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

Hi Balinor,

I have installed this code on my site and it works great (version 4.1.4). The only thing I have noticed is that when I have "custom text field" choosen for the option group type the icon will not appear next to the drop down box. Is there an easy fix for this?

Thanks!

Warwick

03-29-2007 12:15 AM

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

Does this work with 'product variant' for the product group on 4.1.3?
I don't see anything appearing :(

balinor

03-29-2007 03:31 AM

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

Sorry, can't help with 4.1 :(

Shadow

03-29-2007 08:17 AM

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

Warwick
It works great for me with 4.1.5
Not sure if this is the problem you are having but I have had that happen when I had the wrong option name.

{if $v.classtext eq 'Option Name'}

"Option name" needs to be what you use in the "Option Text" field in the product variant
and NOT group name this may be your problem.

Not an expert but hope that helps ya

Warwick

03-29-2007 09:14 AM

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

Thanks Shadow and balinor, so what you're basically saying is that when the group's name is for example 'Size' and you have 'Small, 'Medium' and 'Large', I should put 'Small' in the 'Option Name' place, I tried that but it doesn't work and if this would work; what about the others; medium and large?

EDIT: somehow I suddenly got it working not ... don't ask me why :)

Working with 4.1.3!

ITVV	06-20-2007 07:51 AM

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

Hi Balinor,

Just to report that your mod is working great in 4.1.7. :D

Many thanks for sharing this info with us all.

It was just what I needed.

Kind regards

Nick

liquid

06-26-2007 12:22 PM

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

just tried to apply this mod to a store I am working on and it doesn't seem to work with the 'Custom text field' group type but works with the other types.

is there an information pop up mod that will? the version I am working with is 4.1.8

thanks :)

balinor

06-26-2007 12:27 PM

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

This is set to work for select fields by default, but you can easily add the same code next to the text field.

liquid

06-27-2007 10:56 AM

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

Oh I see, thanks Balinor I have it working now.

samz724

06-28-2007 08:09 AM

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

hey, I have the question icon displaying next to the option and clicking on it pops up a new window, but I get the following message:

"The requested URL /files/options/test.html was not found on this server"

I created the folder and placed the corresponding HTML file in it, but it won't work!?

Any ideas? thanks

balinor

06-28-2007 08:25 AM

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

Make sure the spelling is exact. Options and options are two different things.

samz724

06-28-2007 08:31 AM

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

Yea it's good. I've been going through making sure everything is correct.. but cannot seem to make sense of why it doesn't work? :(

aop	10-02-2007 02:46 PM

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

HI;
anybody has this mod working on a web site that I can see ?
Thanks !!

balinor

10-02-2007 03:19 PM

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

As I mentioned above, it works just like the question mark next to the CVV field on the checkout screen.

harveyev

12-23-2007 05:11 PM

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

BCSE has a nice glossary mod that does a hover with additional info for any words you define (kinda like a wiki link). I was really tempted to get this but decided to wait...sounds similar functionally but without having to make all the extra html pages and such. Just thought I'd throw that out there.

http://www.bcsengineering.com/store/customer/product.php?productid=78&cat=0&page=1

MattBF

12-26-2007 12:46 PM

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

Quote:

Originally Posted by balinor

This is set to work for select fields by default, but you can easily add the same code next to the text field.

Hi balinor,

How exactly do you do this? For example, on my custom text field: {elseif $v.classtext eq 'Your URL (web address):'} does not work.

What do I need to change on there? I'm assuming classtext eq, but I dont know what to change it to

Thanks

wendy.email

04-06-2008 07:00 PM

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

Thanks for the mod!! I have been searching for this for very long time!!!

It's working for ver4.1.9 too.

thanks again.

lindseyabrandon

07-08-2008 05:17 PM

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

This is awesome, thank you. I wish I would have discovered it a couple of weeks ago!

I got it to work, but when you click on the link I am getting this error message:
Forbidden

You don't have permission to access /store/files/options/mailing-service.jpg on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/1.3.41 Server at www.linvites.com Port 443

mike@tatechnology.net

07-11-2008 05:33 AM

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

Quote:

Originally Posted by lindseyabrandon

Check your file permissions for that file (if linux, use the chmod command).

imexhouse

07-12-2008 07:16 PM

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

You may have to create an .htaccess file and put in it:

Quote:

Allow from all

and upload it to your files/options directory.

lindseyabrandon

07-14-2008 03:28 AM

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

It did end up having to do with the htaccess file. Thanks for your help, it is now working.

Lindsey

jkirkpatrick

09-09-2008 03:51 PM

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

This looks like EXACTLY what I have been searching for.

Is there a limit to how much text you can include in the popup window? Can it popup a window that has images in it?

For example I want to have a link on my jewelry website beside the "Choose Chain Style" that pops up a window showing little pictures of the 8 different chain styles available. Can that be done with this mod?

Thanks in advance for any answers!

All the Best,
Jennifer

balinor

09-09-2008 05:58 PM

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

It's an html file, so it can be whatever you want :)

el	12-10-2008 07:26 AM

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

Quote:

Originally Posted by balinor

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:

Code:

{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}

Code:

{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}

Code:

{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}

This is exactly what I need but it seems to work only on "Price modifier" and not on a "Custom text field".

Is it possible to make it work on the Custom text field?

balinor

12-10-2008 07:31 AM

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

Yea, you need to add the code next to the text field code instead of the select code.

el	12-10-2008 07:33 AM

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

Quote:

Originally Posted by balinor

This is set to work for select fields by default, but you can easily add the same code next to the text field.

Oops!! Didn't read this post before posting my previous question.

How or where do I put the code next to the Custom text box?

el	12-10-2008 08:34 AM

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

Quote:

Originally Posted by el

Oops!! Didn't read this post before posting my previous question.

How or where do I put the code next to the Custom text box?

Thanks! I found it!

This is great!!

iry	05-12-2009 09:45 AM

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

1 Attachment(s)

Thanks so much, I got this working for my 4.2 xcart.
Balinor, can you please tell me how is it possible to put this question mark to the left of the options box, please see my screenshot attatched.
Irene

xcart@seonow.us

09-22-2009 12:48 PM

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

Hello, I made a mod that allows unlimited number of "learn more" pop ups!

This exclusive mod is made available only from SEONow.us. This mod allows X-Cart store owners to finally have pop up details for product options. You know, what is that option for? This module allows to have each option have a pop-up explanation of what the option is. A MUST HAVE for x-cart store owners!

Mod allows X-Cart to have:

http://www.seonow.us/images/arrow1.jpg Unlimited number of "Learn More" pop-ups!
http://www.seonow.us/images/arrow1.jpg WYSIWYG editor to make pop-ups look great!
http://www.seonow.us/images/arrow1.jpg Sophisticate your X-cart store!
http://www.seonow.us/images/arrow1.jpg Works with X-cart v 4.1.x and 4.2.x

See it here >> X-Cart Product Options Help Mod

xcart@seonow.us

09-22-2009 12:50 PM

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

w3designstudios

12-22-2009 12:27 PM

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

Is there any way to use the content from a static page that is created within X-Cart in the pop-up? I figured I could make the pop-up simply be the static page that is created in X-Cart, but instead would like just the content of that page.

Any ideas?

JWait

12-31-2009 06:10 AM

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

Quote:

Originally Posted by w3designstudios

Looking at the original code and instructions...

Quote:

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

Code:

{if $v.classtext eq 'Option Name'} <a href="#" onClick="window.open('files/options/{$product.productid}.html','','scrollbars=no,resiz able=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.

.. it shouldn't be too difficult. Just copy the html code from where the static page is created in x-cart, paste it into a good text editor, name it accordingly (i.e. 8.html), and upload it to the files/options/ directory. If you try to link the popup to the static page directly you may end up having your entire site in the popup window (I haven't checked this, but it seems like that is what would happen).

xcart@seonow.us

01-02-2010 03:00 PM

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

Quote:

Originally Posted by JWait

Looking at the original code and instructions...

.. it shouldn't be too difficult. Just copy the html code from where the static page is created in x-cart, paste it into a good text editor, name it accordingly (i.e. 8.html), and upload it to the files/options/ directory. If you try to link the popup to the static page directly you may end up having your entire site in the popup window (I haven't checked this, but it seems like that is what would happen).

This would not allow for selecting WHICH pages to pop up so they would all pop up. To make it so you could choose you would need a mod. Let me know how it goes and if I can help.

FCA	09-11-2010 03:33 AM

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

I want to display an image that is unique to the specific price modifier selected in the drop-down menu. I presented this code to my developer who claims that it is not written to offer that option. Is anyone aware of code that offers the option that I have described?

Dan.roh

09-12-2010 03:01 AM

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

1 Attachment(s)

Quote:

Originally Posted by xcart@seonow.us

Great Mod! I would be interested if you can release a version that allows you to have a "learn more" link or whatever I wish to call it on category pages and manufacturer pages or on any pages on my site for that matter.

For example: if you click on a category from your category list on storefront or sub categories it must allow you to put a popup there to allow you to tell your customers a bit more about the products / services that can be found on that page. Would be even greater if the popup can be picked up as part of the SEO for that page.

This would be a great space saver as it would allow you to say so much more without having to keep it sweet and short.

Below is an example image of a manufacturer page, have a popup there and you can provide a whole page of info in the popup instead of just bit of info as you can see. But it will all be pointless if the info inside the popup does not form part of the SEO for that page.

robertswww

09-13-2010 04:34 AM

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

Quote:

Originally Posted by FCA

You might just want to try using Product Variants, as each variant can have its own image.

See the section, "Managing Product Variants" on this page of the online reference manual:
http://help.qtmsoft.com/index.php?title=X-Cart:Product_Options

Robert

All times are GMT -8. The time now is 05:08 PM.

Page 1 of 2

Show 40 posts from this thread on one page