Dynamic DropDown with Image

[CREEPUR]

Ok this little bit of coding will display a picture when a drop down is selected. This is not done automatically via ADMIN control. You will need to do manual labor basically double the work and setup each product you wish to have this feature.

By no means am I fully knowledgable of the inner workings of Zen-Cart/PHP/Java but I decided to post this to see if it gives anyone an idea on how to integrate it with zen-cart without being such a manual process.

This was tested on 1.38a on offline test server on IE7. No other mods were installed so I do not know how this will impact your site if you decide to enter the code. The good thing is all you need to do is delete the lines out of the template. Obvisously make sure you back the tpl_modules_attributes.php just in case.

Working directory : /includes/templates/YOUR_CUSTOM_FOLDER/templates
Templates to modify: tpl_modules_attributes.php

Step 1: Create the attribute option in Zen-Cart like normal and add all the drop down options to your product
Step 2: Open tpl_modules_attributes.php in your custom directory. After you see this line

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>
Insert this code:

<!--bof DROP DOWN SELECT -->
<?php
/*CHNGE THE $I==1 TO WHERE U WANT THE ATTRIBUTE. SO IF YOUR DROP DOWN IS YOUR 2ND ATTRIBUTE ON THE PRODUCTS PAGE, THIS SHOULD BE 2 IF YOUR DROP DOWN IS THE 3RD THIS SHOULD BE 3 ETC. JUST CLICK ON YOUR PRODUCT PAGE AND SEE WHAT POSITION THE ATTRIBUTE IS IN IF IT IS IN POSTION 1 then $i==0*/

if ($i == 1) {

/*CHNGE THE PRODUCT ID TO THE ID THAT YOU WANT THE DROP DOWN FOR*/

if (($_GET['products_id']) == 105) {
include 'PROD_105.php';/*THIS WILL BE THE PHP FILE WE WILL CALL FOR PRODUCT 105*/
}
}
?>

<!--eof END OF DROP DOWN SELECT -->

Step3: Open your editor and paste the attached code into it. Save it in /includes/templates/YOUR_CUSTOM_FOLDER/templates and name it the same name from the include statement above. In this case we will use PROD_105.php

<style type="text/css">
#attrib-2 {display: none;}; <!-- You will need the attribute for the dropdown created for the product number. Easiest way is to load the page in your browser, view source and scroll down to where the attribute is located. You should see a for="attrib-X" where x is the number. Just capture it and replace attrib-2 with whatever it is. Or you can got into PRODUCT OPTIONS in admin and see the ID number that is assigned to the option. This will hide the attribute box that was created in zen cart -->
</style>

<!-- this is the table that is used you may need to change size based on your needs -->
<table border="0" cellspacing="0" cellpadding="0" width="387">
<tr><td width="134">

<!--this calls the picture change function-->
<select name="picture" size="1" onChange="showimage()">
<option selected value="19">Red</option><!--you will need to do the same thing as you did above. Load the page, view source, find the values for the dropdown and update these selects with those values. Basically copy the option vaules between the select and paste over these option values-->
<option value="18">Green</option>
<option value="20">Blue</option>
</select>

</td>
<td width="253">
<!-- Now you need to set the directory where the pictures are stored. I selected includes/templates/custom/images/PROD_15 and created a different directory for each of the products. The graphic files are in that folder WITHOUT the extension. The files names point to the value that is selected. In IE7 the browser opens the image without the extension. I'm not sure if it works on other browsers-->
<align="center"><img src="includes/templates/custom/images/PROD_105/18 " name="pictures"> <!--this sets the first image to display. 18 is the name of the file I want to display first basically the default selection--></table>

<script type="text/javascript">
function showimage()
{
if (!document.images)
return
<!--change the attribute name below, attrib-2, to the name of the attribute you are working with this makes sure the option is added to the shopping cart-->
document.getElementById("attrib-2").value = cart_quantity.picture.options[document.cart_quantity.picture.selectedIndex].value;
<!--change the src to where you have the pictures stored for the download -->
document.images.pictures.src="includes/templates/custom/images/PROD_15/"+
document.cart_quantity.picture.options[document.cart_quantity.picture.selectedIndex].value
}
</script>
Now if you have other products you wish to do this with then follow the same process. When you set it once it is a matter of just copy and paste.

Hopefully someone can build on this and intergrate it with Zen-Cart directly to minimize the manual process. It is best to have the thumbnails all the same size so it doesnt disrupt the rest of the page.

[Starlyn]

oh my gosh, this is exactly what I need! Thank you sooo much! I'm working on installing it right now. I'll post when I've got something.

[Starlyn]

Ok, it's sort of working. To know what I mean, check it out on my page.

For some reason, the Bead 1 menu is stuck between Bead 2 and Bead 3 and I have no idea why. My other problem is that the beads only switch in IE, not Firefox, which I use. And to make things even more interesting, I really need to implement this with all three bead menus on the product pages.

But otherwise, I am so super happy with this that I am trying not to cry tears of joy. There's no way I could have come up with this on my own, and I've been looking for a way to do this since I started using Zen Cart. I want this to work so badly....I just hope it's possible.

Thanks!

[CREEPUR]

Decrease the number you have in if ($i == NUMBER) by one in tpl_modules_attributes.php . This should align the drop down to show up under bead 1

To implement with all 3 just follow the same process with bead 2 and bead 3.

I'll try to figure out some coding for FireFox browser

[Ajeh]

Just a note, if you are designing your site ... why are you using what appears to be an ancient version of Zen Cart?

The current version of Zen Cart is Zen Cart v1.3.8 ...
http://www.zen-cart.com/forum/showthread.php?t=81696

[CREEPUR]

OK firefox needs to have the function in the header so here is the coding for you. I tried to copy stuff off your page so if you copy and paste, hopefully it will work.

Goto /includes/modules/pages/product_info/ folder and create a file called

jscript_showimage.js

Open it up with your editor and paste the following code:

function showimage()
{
if (!document.images)
return

document.images.pictures1.src="includes/templates/beige/images/PROD_50/"+
document.cart_quantity.picture1.options[document.cart_quantity.picture1.selectedIndex].value
document.getElementById("attrib-9").value =document.cart_quantity.picture1.options[document.cart_quantity.picture1.selectedIndex].value;

document.images.pictures2.src="includes/templates/ beige/images/PROD_50/"+
document.cart_quantity.picture2.options[document.cart_quantity.picture2.selectedIndex].value
document.getElementById("attrib-10").value =document.cart_quantity.picture2.options[document.cart_quantity.picture2.selectedIndex].value;

document.images.pictures3.src="includes/templates/ beige/images/PROD_50/"+
document.cart_quantity.picture3.options[document.cart_quantity.picture3.selectedIndex].value
document.getElementById("attrib-11").value =document.cart_quantity.picture3.options[document.cart_quantity.picture3.selectedIndex].value;

}

As you can see above for each of the Beads you need to have a separate lookup. You can follow the same format if you needed to add additional beads. Once it is saved the next step is to update the PROD_50.php file (assuming that is the name you used) to reflect the following

<style type="text/css">
#attrib-9 {display: none;};
#attrib-10 {display: none;};
#attrib-11 {display: none;};
</style>

<table border="0" cellspacing="0" cellpadding="0" width="387">
<tr><td width="134">

<table border="0" cellspacing="0" cellpadding="0" width="300">
<tr><td width="250">

<select name="picture1" size="1" onChange="showimage()">
<option selected value="37">Amethyst</option
<option value="45">Azurite</option>
<option value="48">Black Onyx</option>
<option value="47">Blue Goldstone</option>
<option value="44">Blue Onyx</option>
<option value="36">Coral</option>
<option value="34">Crystal</option>
<option value="38">Garnet</option>
<option value="29">Goldstone</option>
<option value="41">Green Onyx</option>
<option value="49">Hematite</option>
<option value="39">Jade</option>
<option value="46">Lapis</option>
<option value="31">Leopard Jasper</option>
<option value="40">Malachite</option>
<option value="35">Red Fossil</option>
<option value="32">Rhodonite</option>
<option value="33">Rose Quartz</option>
<option value="50">Snowflake</option>
<option value="43">Syn. Opal</option>
<option value="28">Syn. Pearl</option>
<option value="30">Tiger Eye</option>
<option value="42">Turquoise</option>

</select>

</td>
<td width="50">
<align="center"><img src="includes/templates/beige/images/PROD_50/37 " name="pictures1">
</td></tr></table>

<table border="0" cellspacing="0" cellpadding="0" width="387">
<tr><td width="134">

<table border="0" cellspacing="0" cellpadding="0" width="300">
<tr><td width="250">

<select name="picture2" size="1" onChange="showimage()">
<option selected value="37">Amethyst</option
<option value="45">Azurite</option>
<option value="48">Black Onyx</option>
<option value="47">Blue Goldstone</option>
<option value="44">Blue Onyx</option>
<option value="36">Coral</option>
<option value="34">Crystal</option>
<option value="38">Garnet</option>
<option value="29">Goldstone</option>
<option value="41">Green Onyx</option>
<option value="49">Hematite</option>
<option value="39">Jade</option>
<option value="46">Lapis</option>
<option value="31">Leopard Jasper</option>
<option value="40">Malachite</option>
<option value="35">Red Fossil</option>
<option value="32">Rhodonite</option>
<option value="33">Rose Quartz</option>
<option value="50">Snowflake</option>
<option value="43">Syn. Opal</option>
<option value="28">Syn. Pearl</option>
<option value="30">Tiger Eye</option>
<option value="42">Turquoise</option>

</select>

</td>
<td width="50">
<align="center"><img src="includes/templates/beige/images/PROD_50/37 " name="pictures2">
</td></tr></table>

<table border="0" cellspacing="0" cellpadding="0" width="387">
<tr><td width="134">

<table border="0" cellspacing="0" cellpadding="0" width="300">
<tr><td width="250">

<select name="picture3" size="1" onChange="showimage()">
<option selected value="37">Amethyst</option
<option value="45">Azurite</option>
<option value="48">Black Onyx</option>
<option value="47">Blue Goldstone</option>
<option value="44">Blue Onyx</option>
<option value="36">Coral</option>
<option value="34">Crystal</option>
<option value="38">Garnet</option>
<option value="29">Goldstone</option>
<option value="41">Green Onyx</option>
<option value="49">Hematite</option>
<option value="39">Jade</option>
<option value="46">Lapis</option>
<option value="31">Leopard Jasper</option>
<option value="40">Malachite</option>
<option value="35">Red Fossil</option>
<option value="32">Rhodonite</option>
<option value="33">Rose Quartz</option>
<option value="50">Snowflake</option>
<option value="43">Syn. Opal</option>
<option value="28">Syn. Pearl</option>
<option value="30">Tiger Eye</option>
<option value="42">Turquoise</option>

</select>

</td>
<td width="50">
<align="center"><img src="includes/templates/beige/images/PROD_50/37 " name="pictures3">
</td></tr></table>


Let me know if it works for you. It seems to work on my off site server. Also test to make sure the options are passed to the shopping cart

[Starlyn]

Just a note, if you are designing your site ... why are you using what appears to be an ancient version of Zen Cart?

The current version of Zen Cart is Zen Cart v1.3.8 ...
http://www.zen-cart.com/forum/showthread.php?t=81696

Um, I am using 1.3.8....upgraded from 1.3.7 in November. I don't know why it looks ancient to you. Should I be doing something different?

And CREEPUR, Thank you so much for the reply!!! I just got to work, so I am going to try to implement what you gave me as soon as possible. I'm so excited this looks like it's going to work!

[Ajeh]

Must be getting old ... could of sworn I hit your link yesterday and got the v1.3.5 or older Classic Template ...

[Starlyn]

lol...That's ok. It's just that I know you've helped me with stuff before, and you had never said anything about the site.

CREEPUR - I'm having a bit of trouble getting everything to work. I got the three beads to show up together, but they won't change on select in either IE or Firefox. Also, they aren't lining up with the attribute title...that's probably something little that I missed, but darn if I can't find it. Oh well, it's still early in the day. :)

[Starlyn]

ok the images still aren't working, but I decided to see if the selections are passed on to the cart and they are not. Since I'm really bad at javascript, if anyone at all has any thoughts on this, I would be glad to hear them. :)