New Zenner
- Join Date:
- Dec 2009
- Posts:
- 37
- Plugin Contributions:
- 0
Attribute Image Swap
Hi,
I have been looking through the forums for the past few days trying to figure out if there is a way to show an attribute image one it is selected from a drop down. I did find the plugin swap main image with attribute image on the plugins page, but that plugin is very old. However using that plugin I have been trying to modify it to work how I would like however I have been encountering problems. I can hack php and javascript but I am not very good at writing it....
Anyway based on the code from this plugin http://www.zen-cart.com/downloads.php?do=file&id=699
The following file I used that came with the plugin attrib_prod_info.php
<?php
require('includes/application_top.php');
$products_options_values_id = $_REQUEST['products_options_values_id'];
$alt = $_REQUEST['alt'];
$width = $_REQUEST['width'];
$height = $_REQUEST['height'];
$products_id = $_REQUEST['products_id'];
$sql = "select pa.attributes_image
from " . TABLE_PRODUCTS_ATTRIBUTES . " pa
where pa.products_id = '" . (int)$products_id . "'
and pa.options_values_id = '" . (int)$products_options_values_id ."'";
$account_query = $db->bindVars($sql, ':customersID', $_SESSION['customer_id'], 'integer');
$products_color_image = $db->Execute($sql);
$attributes_image = $products_color_image->fields['attributes_image'];
if($attributes_image!=''){
$image = zen_image('images/'.$attributes_image, $alt, $width, $height);
?>
<?php echo '<a href="javascript:popupWindow(\'' . zen_href_link(FILENAME_POPUP_IMAGE_ADDITIONAL, 'products_image_large_additional=' . 'images/'.$attributes_image) . '\')">' . $image . '</a>'; ?>
<?php }?>
The original mod was controllable from the admin, however, I really don't need that functionality myself so I only modified the part of the attributes.php file that dealt with the drop down list. somewhere near the bottom of the file. I also added a bit so that a div would be created with an option names id. again I am a total hack so this probably is not a good way to go about this....
$parameters=' onchange="getattribimage' . $products_options_names->fields['products_options_id'] . '('.'\'id[' . $products_options_names->fields['products_options_id'] . ']\''.','. '50'.','. '50'.', this.value,'.$_GET['products_id'].');"';
$attribimageid[]='<div id="attributeimage'. $products_options_names->fields['products_options_id'] . '" class="attribimage"></div>';
$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'] . '"'.$parameters) . "\n";
I then edited my tpl_modules_attributes.php file to include the new div I wanted created.
<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4><br class="clearBoth" />
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
</div>
<?php echo $attribimageid[$i]; ?>
<?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" />
Now here is where I am total lost, with the java script file that swaps the image. I am not sure if it is even possible to include the variable element id that needs to be swapped, or even how to hard code the element id's and variable functions so that the it will swap the image for multiple options. I have been messing around with the javascript file to try to achieve the desired result but have not been able to. Here is the original javascript file.
<script language="javascript" type="text/javascript">
function changebgcolor(id,color) {
document.getElementById(id).style.backgroundColor=color;
}
function changevalue(field,color)
{
for(var i=0;i<document.cart_quantity.elements.length;i++)
{
if(document.cart_quantity.elements[i].name==field)
{
document.cart_quantity.elements[i].value=color;
}
}
}
var xmlHttp
function getattribimage(attribfield,width,height,products_options_values_id,products_id)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="attrib_prod_info.php";
url=url+"?width="+width+"&height="+height+"&products_options_values_id="+products_options_values_id+"&products_id="+products_id;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
var product_color_image=xmlHttp.responseText;
if(product_color_image!=''){
document.getElementById('productMainImage').innerHTML = product_color_image;
}
}
}
//--------------------------------------------------------
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
Basically what I think I need to do is to be able to have the function getattributeimage be a variable based on the option name id in the java script and change the mainProductImage to be the variable div I created. When I hard code the function name and the div it works sorta but I have not been able to get it to work with multiple option names on the same product. I don't know if what I want to do is even possible..... I am also not opposed to hard coding all the attribute id's needed for this to work but when I tried it it only put the picture in the second variable div with any attribute selection.... This is my current version on the java script file this works fine for 1 attribute on 1 of my products as coded.... you can see it here ..... http://www.shop.saybrookcountrybarn.com/furniture/stressless-by-ekornes/recliners/stressless-ambassador/stressless-ambassador-chair-and-ottoman-batick-leather
<script language="javascript" type="text/javascript">
function changebgcolor(id,color) {
document.getElementById(id).style.backgroundColor=color;
}
function changevalue(field,color)
{
for(var i=0;i<document.cart_quantity.elements.length;i++)
{
if(document.cart_quantity.elements[i].name==field)
{
document.cart_quantity.elements[i].value=color;
}
}
}
var xmlHttp
function getattribimage1(attribfield,width,height,products_options_values_id,products_id)
{
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="attrib_prod_info.php";
url=url+"?width="+width+"&height="+height+"&products_options_values_id="+products_options_values_id+"&products_id="+products_id;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4)
{
var product_color_image=xmlHttp.responseText;
if(product_color_image!=''){
document.getElementById('attributeimage1').innerHTML = product_color_image;
}
}
}
//--------------------------------------------------------
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>
Any insight would be greatly appreciated.....
