Adding a link next to product options

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

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?

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.

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?

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.

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

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

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

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">  What's This?</a></span></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

Well done! That seems to (almost) work! :clap:

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

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

OK, I found the problem...I just don't know how to fix it.

It's not a space that breaks up the URL, it's actually padding from a label class. For some reason, the dropdowns have a <label> tag around them that the radio buttons do not.

I haven't changed the markup of the dropdowns at all, but I did modify the CSS to allow the inputs to appear underneath the option names. This is what I did:

.wrapperAttribsOptions .back {float: none;}

Turning it off doesn't seem to fix anything, but I just wanted to give you all the info. Any ideas?

RIGHT:

<div class="wrapperAttribsOptions">
http://www.sweetjujubead.com/Band Style.php
<div class="attributeDivider"/>
<h4 class="optionName back">
Band Style
<span class="infoLink">
<a onclick="javascript:popupInfoWindow('http://www.sweetjujubead.com/Band Style.php', 'PopupTester1', 'scrollbars=yes,width=500px,height=300px');return false" href="#">  What's This?</a>
</span>
</h4>
<div class="back"> </div>
<br class="clearBoth"/>
</div>

WRONG:

<div class="wrapperAttribsOptions">
http://www.sweetjujubead.com/
<label class="attribsSelect" for="attrib-11">Pearl Color</label>
.php
<div class="attributeDivider"/>
<h4 class="optionName back">
<label class="attribsSelect" for="attrib-11">Pearl Color</label>
<span class="infoLink">
<a for="attrib-11" attribsselect="" onclick="javascript:popupInfoWindow('http://www.sweetjujubead.com/<label class=" href="#">Pearl Color.php', 'PopupTester1', 'scrollbars=yes,width=500px,height=300px');return false">  What's This?</a>
</span>
</h4>
<div class="back">
</div>
<br class="clearBoth"/>
</div>

WOW! That is funky :blink:

Let me have a look at it.

Hers's a question. You have multiple attributes and not all all displayed for all products? Is that correct?

You have multiple attributes and not all all displayed for all products? Is that correct?

Correct.

OK. A bit of php to strip the label out. I have gone for the first three letters of the attribute rather than the whole name. It is easier :smile: My code looks like:

<div class="wrapperAttribsOptions">
<?php $test=substr($options_name[$i],1,2) ; ?>
<?php $stripped_option_identifier =  substr($options_name[$i],0,3) ?>
<?php if ($test == 'la') {$stripped_option_identifier = substr($options_name[$i],44,3);}?>
<?php $nick='http://www.mydomain.com/'.$stripped_option_identifier.'.php'; echo $nick;?>

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

I am sure that you can adapt that to work with your code. Basically it sets a variable $test to equal the second and third letter of the variable $options_name. So, if the label is included in the variable option_name then the variable test will be 'la'. (obviously if you have any attributes whose second and third letters are 'la' then this is going to mess up )

Then it sets a variable called stripped_option_identifier to equal the first three letters of the option name. Then it adjust this for the problem cases to be the 44, 45 and 46th letters of the string.

Crazy but true.

You can see it at work on that same page.

have fun...

Oh, and a final issue might be if you have more than 9 attributes - then the numbers 44, 45 and 46 might not work and we'll have to adjust them.

I guess you could just use 45 46 and 47 to be safe. The URLs would not be so meaningful but it would work.

We could use a more complex way of stripping down the urls but if this works then that is fine....

It worked! Check it out.

Just a sight problem I can see. Since the names of my info page URLs are now the 3 characters at the end of the echo statement, what happens when they yield the same 3 characters for more than one attribute? For instance the Roundelle/Squaredelle Frames and Roundelle/Squaredelle Colors both end in .com/<Ro.php. I could probably combine these two if this is the only instance, but it may happen in other cases that we haven't thought of yet. Also, is the "<" going to cause an issue with any browsers being in the file name? I haven't studied the laws of HTML do's and don'ts for a while lol.

I really really appreciate you helping me with this. Unfortunately without knowing php myself, I'm pretty lost without gracious people like yourself. And to answer your prior comment, yes I was able to get the categories nav to look pretty much how I wanted it (again, in large part thanks to your help). It's slowly coming together!

Well the fact that you have '<' in the string is a problem. That was what I meant about having more than 9 attributes!

We use the 44, 45 and 46th letter of the string. The string is something like:

<label class="attribsSelect" for="attrib-10">Crystal Color</label>

if it is attrib-5 then those numbers are right and if it is attrib-10 those numbers are wrong.

I'll rewrite the php to get around this.

How, did I know that some of your attributes would have the same first three letters? Leave this with me and I'll see what I can do.

In meetings all day today so it will be later on....

OK this is better code:

<div class="wrapperAttribsOptions">

<?php $new2= strip_tags($options_name[$i]); echo $new2.'<br>';?>
<?php $new3=str_replace(' ', '', $new2);echo $new3.'<br>';?>
<?php $new4=strtolower($new3);echo $new4.'<br>';?> 
<?php $nick='http://www.mydomain.com/'.$new4.'.php'; echo $nick;?>
<h4 class="optionName back"><?php echo $options_name[$i]; ?>   
<a href="#" onClick="javascript:window.open('<?php echo $nick; ?>');return false">What's This</a> 
</h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

It takes out the tags.
It takes out the spaces
It makes everything lower case

:clap:

I didn't know about the PHP function strip_tags() before so thanks for making me learn something new :smile:

This should do it I think. Again it is visible on my test server. In your version you will obviously want to get rid of the echo parts of each statement. There only there to show us what is happening. Same page as before....

Oh, and finally, you probably also need to strip the slashes out of the names in your case.

<div class="wrapperAttribsOptions">

<?php $new2= strip_tags($options_name[$i]); echo $new2.'<br>';?>
<?php $new3=str_replace(' ', '', $new2);echo $new3.'<br>';?>
<?php $new4=strtolower($new3);echo $new4.'<br>';?> 
<?php $new5=str_replace('/', '', $new4);echo $new5.'<br>';?>
<?php $nick='http://www.mydomain.com/'.$new5.'.php'; echo $nick;?>
<h4 class="optionName back"><?php echo $options_name[$i]; ?>   
<a href="#" onClick="javascript:window.open('<?php echo $nick; ?>');return false">What's This</a> 
</h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

Haven't tested that bit but it should work. You could amalgamate some of the steps but I thought it would be easier to understand like this.

This is PERFECT. The best part is I somewhat understand it -- you're a great teacher! I'm glad you learned something new in the process!

Don't go too far -- it's crunch time on this site, and I'm sure I'm going to have a good amount of questions when i start duplicating some of my products and work on the "Ready to Wear" section. Again, a million thanks for your help!