Adding a link next to product options

[ktomas]

Part of the options of a jewelry site I'm making allow you to build your own pieces based on a bunch of options and criteria. Since not all of them will have images, and it's hard to tell what they are out of context, I want to have a link to a small pop-up that will host an explanation. Where would I need to add this link in the override system?

While the ideal scenario would be for each option to have its own pop-up, I think linking them all to 1 "all-encompassing" page will have to do.

(A) Where would I add the link in the markup?

(B) Is there a preferred way to create a small pop-up page?

There's an attachment in this thread that shows what I'm talking about

[ktomas]

How could I add a popup explanation next to my option names to explain my attributes?

See the "What's This?" in the attachment.

I simply want this to be a link to a small popup window that explains what the attributes are. Is this possible?

[niccol]

Well, in general a javascript function is used. In your case it could be called by an onclick event of the link you describe.

An example of a zen cart function is as follows:

function popupWindow(url) {
  window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=450,height=320,screenX=150,screenY=150,top=150,left=150')
}

If the javascript is confusing then have a quick look at:

http://www.pageresource.com/jscript/jwinopen.htm

which I think has quite a good explanation.

So, if you only want one general page that covers all the attributes then adding something similar in should not be too much of a drama, because you can hard code the url into the javascript. If you want to have a different pop up for each attribute then you are going to have to do a bit of coding so that the URL is correct for each attribute.

If you name your urls cleverly then this second part shouldn't be a headache either.

[ktomas]

Thanks, Niccol.

My biggest concern right now (before I even get to the javascript) is how to add the link next to the attributes. And it looks like I am going to need at least a few different popups, so how can I isolate the exact options I want the links next to in the HTML?

[niccol]

Sorry - where to put it....

It needs to go into tpl_module_attributes.php. Exactly where depends on where you want it on the page but below is one option:

<div class="wrapperAttribsOptions">
<h4 class="optionName back">
<?php echo $options_name[$i]; ?>
   Put it Here is an option </h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

Or outside the <h4> tags but you need to be aware that the class 'back' is being used here which is a float:left; So, you might need add a class 'back' to your link.

[niccol]

OK.

If you change the lump in the previous post to:

<div class="wrapperAttribsOptions">
<?php $nick='http://www.mydomain.com/'.$options_name[$i].'.php'; echo $nick; ?>
<?php $nextnick='http://google.com'; ?>

<h4 class="optionName back"><?php echo $options_name[$i]; ?>   
<a href="#" onClick="window.open('<?php echo $nextnick; ?>');return false">What's This</a> 
</h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

You will get some results. Not want you want yet because I do not know your domain and where you are going to put the new pages for the pop up.

The line that reads:

<?php $nick='http://www.mydomain.com/'.$options_name[$i].'.php'; echo $nick; ?>

Shows how you can build a url that is unique to the attribute in question. It is also outputing it to the page at the moment ( the echo bit of it ) just to check it works. And it will let you know what you need to name your new files that hold the popup information. It names this variable nick.

You should be able to adapt this to create a URL to suit your site.

The line that reads :

<?php $nextnick='http://google.com'; ?>

Creates another variable, nextnick, that has a URL for google. You won't need this line finally. It is just there to demonstrate the process.

The line that reads :

<a href="#" onClick="window.open('<?php echo $nextnick; ?>');return false">What's This</a>

Is the line that creates the new window. At the moment it is using the variable $nextnick but you will want to change this to use the variable $nick once you have made the urls to suit your site.

Also, you will probably want to add some extra details to it as shown in the link in my previous posts so that the pop-up doesn't happen in a normal window.

that should get you there with a bit of work. let me know how you get on.

(it is running as is on my test server. link is h t t p://www.nickcollie.co.uk/catalog/index.php?main_page=product_info&cPath=25&products_id=78 with the spaces taken out of the http

Nick

[niccol]

Oh, and you might want to make that:

onClick="javascript:window.open('<?php

to fit in with the way javascript is specified in the rest of the code. Really, there should be a statement at the top of the page that specifies the scripting language, I believe, but I am no javascript expert

No big worry it is simply an issue of validation for the HTML so if that does not concern you then don't stress. just how it should be....