Attribute Selection and JavaScript

[Get Em Fast]

I'm having a bit of a problem here, and was hoping one of you JavaScript genius' could help me out here.


On a products page, the user must select a font to be used from a dropdown. The dropdown (attribute ID 49) is set to "5 year Old" font (option value 336) by default. I need this to display "5yrold.jpg"....which I can do by adding the img src in the comments. Now, say the user selects the last font on the list....Wedding Text BT (option value 385), in which the image needs to change appropriately to "wed_txt.jpg" upon selection so the user can see the font they're getting.

I also have a link for them to view all fonts all at once, using JavaScript (although I can't get the image to come up full size in the new window.....it's small with a magnifying glass. Maybe somebody could tell me how to fix this, as well?), but I really need to get this done, if somebody could show me what I'm missing here and how to translate this into Zen-Cart terms, I would be VERY grateful.

The code I was told I could use (from the WebDeveloper formu) looks like this:

<SELECT id="fontSel" onChange="changePicture(this.value);">

Which I'm not sure where to put.......

And:

function changePicture(pValue)
{
    var vSelection = "5yrold.jpg";
    switch(pValue)
    {
        case "385": vSelection = "wed_txt.jpg";
        break;
        case ...
        //add all images here
    }
    document.getElementById("imagethathastochange").src = vSelection;
}

I'm not absolutely sure where to put this, either, but though it would be something that should be added to "html_header.php"......would that be correct?

I was also told that the "imagethathastochange" is the ID of the image I want to use.......does that mean the image NAME, or what?


I've tried this code seems like a thousand different ways to no avail. But, of course, I am totally JavaScript illiterate, and was guessing at most of this.

If it helps any, my font's images are in images/attributes/fonts.

I swear I'm going to learn JavaScript one of these days.......it's so frustrating wanting to do something that's probably soooo simple for someone that knows JavaScript.

Thanks,
Robert

[niccol]

The function can go in all kinds of places. When I am actually working on javascript I quite often have it in the page itself enclosed in <script> tags so that it is all in one page. However, probably the best place to put it is in its own file. If you want to load it for product_info only then it goes in modules/pages/jscript_myscript.js. 'myscript' can be whatever you want.

The php/html bit of the code:

<SELECT id="fontSel" onChange="changePicture(this.value);">

needs to be built into the creation of the select list. THis is built in modules/attributes.php. It is a bit convoluted in there due to the fact that it works though every possible configuration of attributes. At first glance (but I'd need to check) your looking around line 608 for something like:

                  $options_menu[] = zen_draw_pull_down_menu('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_array, $selected_attribute, 'id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '"') . "\n";

You can slot the onchange event in before the id something like

                  $options_menu[] = zen_draw_pull_down_menu('id[' . $products_options_names->fields['products_options_id'] . ']', $products_options_array, $selected_attribute, ' onChange="changePicture(this.value);" id="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '"') . "\n";

onBut I may have got the wrong place in attributes.php for your configuration and also becasue it is late at night and I am not checking

Finally, the ID that is being refered to is the ID of the image that you are going to change. So, the original default image needs to have an ID. Something like:

<img src="whatever" alt="whatever" id="this_is_the_id"/>

Then the javascript will find that image by its id and replace it with the new image. That's what getElementById does.

I hope that helps. If you are still confused then post again.

[Get Em Fast]

niccol,

Thanks so much for the reply and I WILL try this. But at this time it sort of got put on the "back burner". When it's time to go back to it, I'll be sure to let you know how it goes.

[Get Em Fast]

Nick,

Yep.....still confused. Instead of trying this any further on a clients site, I wen to my test site for this. This is what I done:

Created 6 images, named as follows:
Font1.jpg
Font2.jpg
Font3.jpg
Font4.jpg
Font5.jpg
Font6.jpg


and uploaded them to the main images directory.

Created an option named: Select Font. Id for that is 21.

In the comment section of this option, I inserted:

<img src="images/Font1.jpg" alt="select" id="img1"/>

I then, created 6 option values for this option name:
font 1
font 2
font 3
font 4
font 5
font 5

Those have ID's of 69, 70, 71, 72, 73, 74. Kind of strange, though.........if I go into the attributes controller, it tells me the ID's are 1153, 1154, 1155, 1156, 1157.


Then I went to modules/attributes.php, found the line of code you showed me to change.....copied it, overwrote the original line of code with yours.

I then went to includes/modules/pages/product_info/ and opened up the jscript_main.php and inserted:

<script language="javascript" type="text/javascript"><!--
<SELECT id="img1" onChange="changePicture(this.value);">
function changePicture(pValue)
{
    var vSelection = "images/Font1.jpg";
    switch(pValue)
    {
        case "img6": vSelection = "images/Font6.jpg";
        break;
        case ...
        <img src="images/Font2.jpg" alt="font selection" id="img2"/>
        <img src="images/Font3.jpg" alt="font selection" id="img3"/>
        <img src="images/Font4.jpg" alt="font selection" id="img4"/>
        <img src="images/Font5.jpg" alt="font selection" id="img5"/>
    }
    document.getElementById("imagethathastochange").src = vSelection;
}
//--></script>

I've got my dropdown, and I've got my image of Font 1 (Font1.jpg), but that's all..........

So how many times did I mess up, here?


Ohhhhh, I've got to learn javascript! There's just so many thing I want to do with Zen-Cart and javascript..............

[niccol]

OK.

First, thanks for picking up a typo I made :-) I think I wrote 'pages/jscript_myscript.js' when it should have been 'pages/product_info/jscript_myscript.js' . I warned you that ti was late at night when I was writing that !

Secondly, I am confused about exactly what you are trying to do so a page URL would help a lot.

Thirdly the numbers in that attribute controller are showing not the option value number but a number that is related to the option value and product combination. Each one of these combinations has its own number so that things that are individual to that combination can be ascribed to that combination.

Forthly, this bit of code '<SELECT id="img1" onChange="changePicture(this.value);">' is html and should not be in a javascript script. It will break the javascript entirely.

Hope that gets you started.

Nick

[Get Em Fast]

Forthly, this bit of code '<SELECT id="img1" onChange="changePicture(this.value);">' is html and should not be in a javascript script. It will break the javascript entirely.
Nick

O.k.....See, I knew that....at least I though I did, but it broke the whole page if I put it in ANY html or php page. I tried it in several different pages, the first one being html_header.php.

This is a site I use for testing only, so I'll pm you the url of the page I'm trying to get this to work on.

Thanks,
Robert

[niccol]

OK. The javascript needs work to begin with:

What you have at the moment is:

<script language="javascript" type="text/javascript"><!--
function changePicture(pValue)
{
    var vSelection = "images/Font1.jpg";
    switch(pValue)
    {
        case "img6": vSelection = "images/Font6.jpg";
        break;
        case ...
        <img src="images/Font2.jpg" alt="font selection" id="img2"/>
        <img src="images/Font3.jpg" alt="font selection" id="img3"/>
        <img src="images/Font4.jpg" alt="font selection" id="img4"/>
        <img src="images/Font5.jpg" alt="font selection" id="img5"/>
    }
    document.getElementById("imagethathastochange").src = vSelection;
}
//--></script>

Fisrtly, the switch. You need to repeat the format of the first entry like this:

<script language="javascript" type="text/javascript"><!--
function changePicture(pValue)
{
    var vSelection = "images/Font1.jpg";
    switch(pValue)
    {
        case "img6": vSelection = "images/Font6.jpg";
        break;
        case "img5": vSelection = "images/Font5.jpg";
        break;
        case "img4": vSelection = "images/Font4.jpg";
        break;

    }
    document.getElementById("imagethathastochange").src = vSelection;
}
//--></script>

You need to repeat that format for all the elements. Then you should probably have a default in case something goes titsy. Like this:

<script language="javascript" type="text/javascript"><!--
function changePicture(pValue)
{
    var vSelection = "images/Font1.jpg";
    switch(pValue)
    {
        case "img6": vSelection = "images/Font6.jpg";
        break;
        case "img5": vSelection = "images/Font5.jpg";
        break;
        case "img4": vSelection = "images/Font4.jpg";
        break;
        default:vSelection = "images/Font6.jpg";


    }
    document.getElementById("imagethathastochange").src = vSelection;
}
//--></script>

Choose whatever one you want to be the default.

Then you need to tell the script which element it is trying to change. In you case change this line:

    document.getElementById("imagethathastochange").src = vSelection;

to:

    document.getElementById("img1").src = vSelection;

I notice that you have jQuery running already so there is probably a sexier way of doing this but let's get it working first.

Off to lunch now!

[Get Em Fast]

Nick.............I got it! Thank you SO much! I had to change a couple of things, but it's working like a charm.

This is the actual code that works:

<script language="javascript" type="text/javascript"><!--
function changePicture(pValue)
{
    var vSelection = "images/Font1.jpg";
    switch(pValue)
    {
        case "74": vSelection = "images/Font6.jpg";
        break;
        case "73": vSelection = "images/Font5.jpg";
        break;
        case "72": vSelection = "images/Font4.jpg";
        break;
        case "71": vSelection = "images/Font3.jpg";
        break;
        case "70": vSelection = "images/Font2.jpg";
        break;
        
        default:vSelection = "images/Font1.jpg";

    }
    document.getElementById("img1").src = vSelection;
}
//--></script>

And it's working without the little bit of html code that kept breaking everything. Is there a logical reason for that?

Again.........Thank you SO much. This was driving me up the wall!

Robert

[niccol]

Great. Well done.

Regarding this code '<SELECT id="img1" onChange="changePicture(this.value);">' :

I think you just misunderstood the original advice from the other forum. Their point was that you needed to add an onChange event to the <select> that you were concerned with. In this case the <select> (which is what creates the dropdown) is already in the Zen code so you don't need to add it anywhere. That's what my first post did - it added the onChange event to the correct <select>.

I should have spotted that you needed to change to case "74" Well spotted!

Nice one....

[Get Em Fast]

Well, thank you for the praise on the 'catch', but if it wasn't for you.....this would have never happened!

Okay, so since the selection code is built into the attribute itself, then I should have no problem with products requiring different fonts 'overlapping' each other, right?

In other words, If 2 products require font selection, but are using different option names (Select Font for one and Inscription Font for the other), then the first one which has like 38 different images, and the second one which has only 11.....but none of the 11 are the same as the 38, then as long as the attribute ID# is there, and the first image is inserted into the attributes' comment section, then once selected one won't show the others' images, right?

I know that's not worded quite right, but hopefully you can draw out of it what I mean?

Thanks again,
Robert