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....

[ktomas]

This is *incredibly* helpful, thank you!

Obviously, there's still some work to be done, however. Check out where I am currently HERE.

The first (glaring) issue is that it seems to only be working with the radio buttons. As you can see, the dropdown menus display a very funky string that includes too much info, and does not direct you to the correct page (try Crystal Color). I can't find anywhere in the tpl_modules_attributes.php that distinguishes what kind of input it is, so I'm at a loss there. Any ideas?

Also, if you don't mind, take a look at my javascript. I modified it slightly from yours using a pre-built similar function from Dreamweaver. It seems to be working (at least on the radio buttons), but I'm not sure if it's best practice.

Here's my full modified code:

<script type="text/javascript">
<!--
function popupInfoWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
<div class="wrapperAttribsOptions">
<?php $nick='http://www.sweetjujubead.com/'.$options_name[$i].'.php'; echo $nick; ?>
<?php $nextnick='http://google.com'; ?>

<div class="attributeDivider"></div>
<h4 class="optionName back"><?php echo $options_name[$i]; ?><span class="infoLink"><a href="#" onClick="popupInfoWindow('<?php echo $nick; ?>', 'PopupTester1', 'scrollbars=yes,width=500px,height=300px');return false">&nbsp;&nbsp;What's This?</a></span></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

[niccol]

Well done! That seems to (almost) work!

Yes, the way you have done it with a function is absolutely fine. It's the way Zen Cart does it and the way I thought I was going to do it. Then I realised that the function was just one line so I put it straight in - slap dash!

Both work, so no worries. You're way may be 'better practice' because you can re-use the function if you want. But that's unlikely. It works so I wouldn't change it.

You can get rid of the $nextnick now and the google statement Oh and well done for putting a span in there. It will be great for styling. I was going to do it but didn't want to confuse the issue.

OK. So the problem....

Looks to me like it is a problem with the single and double quotes. But as I said I make no claim to be a javascript god!

First thing i would try is change the onclick to

onClick="javascript:popupInfoWindow

and see what that does. Then start fiddling with single and double quotes. It's weird that it only happens on certain attributes.

My next best guess. It looks to me like there is a space between http://www.sweetjujubead.com/ and the next letter of the URL in the cases that are not working. In the cases that are working there does not seem to be a space. The space would break the code just where it seems to be breaking so this is a real possibility. I guess none of your attribute names have a space at the start? If not then we need to see where the space is coming from.

I am getting more sure that this gap is the issue. When I highlight the link in firefox the links that work are highlighted as one element. The links that do not work are highlighted as three separate elements.

I would check your attribute names first off for spaces both before and after

[niccol]

I see that you have your category links over-lined! I thought I remembered the site