Dynamic DropDown with Image

[Starlyn]

ok just fiddling around for the heck of it: if I use the code I had yesterday for tpl_modules_attributes.php, which was this:

<!--bof DROP DOWN SELECT -->
<?php

if ($i == 1) {
if ($i == 2) {
if ($i == 3) {

if (($_GET['products_id']) == 50) {
include 'PROD_50.php';/
}
}
}
}
?>

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

, the selections still carry over to the cart, but the images disappear. I have no idea what this means.

[CREEPUR]

The reason it is passing the value is cause the PROD_50 php file is not being called. Since it is not being called the pictures are not being displayed. The first if is true when $i =1 but the next comparison is IF $i==2 which will be false and will cause to not compare any further.

Can you post your Jscript, Prod_50 php file for attribute 10 and your tpl_modules_attritbute.php again just to see if there is anything that sticks out

[Starlyn]

Sorry, I wasn't at work yesterday. Here's what I have for the jscript:

function showimage1()
{
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;
}

function showimage2()
{
if (!document.images)
return
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;
}

function showimage3()
{
if (!document.images)
return
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;
}

here's my PROD_50_2.php file for attribute 10:

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

<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr><td width="150">

<select name="picture2" size="1" onChange="showimage2()">
<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>

and here's my tpl_modules_attritbute.php:

<?php
/**
 * Module Template
 *
 * Template used to render attribute display/input fields
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
 */
?>
<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

<?php
    for($i=0;$i<sizeof($options_name);$i++) {
?>
<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
?>
<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
<?php
  }
?>

<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>
<!--bof DROP DOWN SELECT -->
<?php

if ($i == 1) {
if (($_GET['products_id']) == 50) {
include 'PROD_50_1.php';
}
}
if ($i == 2) {
if (($_GET['products_id']) == 50) {
include 'PROD_50_2.php';
}
}
if ($i == 3) {
if (($_GET['products_id']) == 50) {
include 'PROD_50_3.php';

}
}
?>

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


<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?>


<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />
<?php
    }
?>


<?php
  if ($show_onetime_charges_description == 'true') {
?>
    <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
<?php } ?>


<?php
  if ($show_attributes_qty_prices_description == 'true') {
?>
    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
<?php } ?>
</div>

Sorry this has turned into such an ordeal. You've been very patient with me and my noobness. :)

[CREEPUR]

I did a comparison of your file with my file with winmerge. The only difference is the product number information so I can not understand why it doesnt work. I'm working on some coding to actually utilize the zen-cart attribute numbers to eliminate the step of passing the info back to zencart. I can send it to you when I'm done if you are interested

[Starlyn]

That sounds good to me. I would be happy to see what you come up with. Once again, thank you.

[CREEPUR]

OK I dug deeper into the coding and was able to have generate the images using ZENCART atrribute. The only thing that will need to be manually updated is the tpl.modules.attribute, the jscript_showimage.js and the images to use. Here is a sample of it working in IE and FIREFOX and it gets past on to the cart

Once I document the coding I'll post it for you to try if you wish.

[Starlyn]

That is beautiful! I'm so excited; I can't wait to see the code. :)

[CREEPUR]

OK here is the code. I tried to type already using your product info so you can just copy and paste. Double check me thou I may have forgotten a ? or something.

Files that need to be modified and copied to your custom directory would be:

tpl_modules_attributes.php copy toincludes/templates/YOUR_CUSTOM_FOLDER/templates

attributes.php copy to
/includes/modules/YOUR_CUSTOM_FOLDER/

Files that need to be created

Jscript_showimage.js create in /includes/modules/pages/product_info/
dropdownimage.php create in /includes/modules/YOUR_CUSTOM_FOLDER/
You still need to copy the images you want to use to your images folder save them with the value id of the dropdown without an extension. The value id of the dropdown can be obtained from zencart

Starting with tpl_modules_attributes.php This is what it looks like after the coding:

<?php
/**
 * Module Template
 *
 * Template used to render attribute display/input fields
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
 */
?>
<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

<?php
    for($i=0;$i<sizeof($options_name);$i++) {
?>
<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
?>
<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
<?php
  }

/*Modifications for the image drop down starts here */?>

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back">
<?php
/* the $i value is the position your attribute shows up product id is the id you
 * are modifing. this creates the table which you may need to modify the
 * options for your site follow the same schema to add drop downs for 
 * different products
 */

 if($i==0 or $i==1 or $i==2){if (($_GET['products_id']) == 50){echo'<table border="0" cellspacing="0" cellpadding="0" width="387"><tr><td width="134">';}}

 echo "\n" . $options_menu[$i]; 

/* After the options are displayed this will close the table. You will need to
 * change the img src to point to the default image.  This also creates the id 
 * tag for the image using img as prefix and the option name you will need 
 * to know this info to update the jscript_showimage.js file if you are using a
 * separate default image for each of your dropdowns you will need a separate
 * line for each or you create a small image file and have it say please choose
 */
 
 if($i==0 or $i==1 or $i==2){if (($_GET['products_id']) == 50){echo'</td><td width="253"><align="center"><img src="/includes/templates/beige/images/PROD_50/37" id="img'.strip_tags($options_name[$i]).'"></table>';}}
 ?>

</div>
<br class="clearBoth" />
</div>

<?php 
/* Modifications end here */
?>

<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?>


<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<br class="clearBoth" />
<?php
    }
?>

<?php
  if ($show_onetime_charges_description == 'true') {
?>
    <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
<?php } ?>


<?php
  if ($show_attributes_qty_prices_description == 'true') {
?>
    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
<?php } ?>
</div>

For the attributes.php file you will need to go to around line number 585 aand you will see this

// use default selected set above
                    }
                  }

                  if ($show_attributes_qty_prices_icon == 'true') {
                    $options_name[] = ATTRIBUTES_QTY_PRICE_SYMBOL . $products_options_names->fields['products_options_name'];
                  } else {
                    $options_name[] = '<label class="attribsSelect" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '">' . $products_options_names->fields['products_options_name'] . '</label>';
                  }


                  $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";
                  $options_comment[] = $products_options_names->fields['products_options_comment'];
                  $options_comment_position[] = ($products_options_names->fields['products_options_comment_position'] == '1' ? '1' : '0');
                  break;
                }

                // attributes images table

Change it to look like this:

  // use default selected set above
                    }
                  }
				                  			         
                  include 'dropdownimage.php';
				  				  
	      break;
        
                }

                // attributes images table

Basically delete the data. Now paste this code in the dropdownimage.php

<?php
 /* If you have additional product ideas just use the or command and add it to
  * the first if. This basically creates the dropdown fields with the
  * onchange="showimage()" command. You will need to known the attribute id
  * because that is what is used to call the showimage()
  */
 
       if (($_GET['products_id']) == 50){		
         if ($show_attributes_qty_prices_icon == 'true') {
                    $options_name[] = ATTRIBUTES_QTY_PRICE_SYMBOL . $products_options_names->fields['products_options_name'];
                  } else {
                    $options_name[] = '<label class="attribsSelect" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '">' . $products_options_names->fields['products_options_name'] . '</label>';
                  }
		 	  
		 $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'] . '"'.' onchange="showimage'.$products_options_names->fields['products_options_id'].'()"') . "\n";
      	 $options_comment[] = $products_options_names->fields['products_options_comment'];
         $options_comment_position[] = ($products_options_names->fields['products_options_comment_position'] == '1' ? '1' : '0');
		 		
		}else{
		 
		 if ($show_attributes_qty_prices_icon == 'true') {
                    $options_name[] = ATTRIBUTES_QTY_PRICE_SYMBOL . $products_options_names->fields['products_options_name'];
                  } else {
                    $options_name[] = '<label class="attribsSelect" for="' . 'attrib-' . $products_options_names->fields['products_options_id'] . '">' . $products_options_names->fields['products_options_name'] . '</label>';
                  }
		 $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";
         $options_comment[] = $products_options_names->fields['products_options_comment'];
         $options_comment_position[] = ($products_options_names->fields['products_options_comment_position'] == '1' ? '1' : '0');
		}
		 
?>

Now for the jscript_showimage.js file. This is used to call the javascript function showimage() the code should look
Similar to this:

function showimage9()
{
if (!document.images)
return
document.getElementById("imgBead 1").src=" includes/templates/beige/images/PROD_50//"+ 
document.getElementById("attrib-9").options[document.getElementById("attrib-9").selectedIndex].value;
}

function showimage10()
{
if (!document.images)
return
document.getElementById("imgBead 2").src=" includes/templates/beige/images/PROD_50/"+ 
document.getElementById("attrib-10").options[document.getElementById("attrib-10").selectedIndex].value;
}

function showimage11()
{
if (!document.images)
return
document. getElementById("imgBead 3").src=" includes/templates/beige/images/PROD_50/”+
document.getElementById("attrib-11").options[document.getElementById("attrib-11").selectedIndex].value;
}

To add additional functions, the function should be called showimageXX() where XX is the attribute value id. The getElementById(“imgXXXXX”) where XXXX is the option name. Keep in mind this is case sensitive so if the option name is all in caps this needs to be all and caps. And the getElementById(“attrib-XX”) where XX again is the attribute value.

Hopefully it is understandable. As I dig more into the code I will see how I can have this process entirely automated. Let me know if you have issues.

[Starlyn]

Alright! We're making progress......The options are passed on to the cart now, but the images don't change with the selection. I looked over everything you gave me, but I probably wouldn't recognize what was wrong if it bit me on the face. :)

[CREEPUR]

If you copied and pasted the Jscriptfile above, for showimage9() there is an extra "/" after the PROD_50

on showimage11() there is a space int document. getElementbyID remove space

If you havent already try correcting this