Attribute Image Swap

[Goetch]

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

[Goetch]

Well I got the functionality that I wanted. I still think there must be a better way to do this, and if there is please share. As stated in my previous post I edited my attributes.php file so that on my drop down menus there is now an onchange = function that is appended by the option id. I also added a bit of code that would make a div based on the option id and made a call for it in my tpl_modules_attributes.php file. I also added the file attrib_prod_info.php to the root directory (I plan on changing this to a template directory or the extra functions directory if I can figure out how) Anyway I then hard coded the functions based on option id in my javascript file. (I think there must be a way to use the option_id variable for this, but I don't know how to go about it. Anyway by hard coding the 8 or so option_id's that have pictures I was able to get my desired effect. As this is currently coded, the swapped attribute image is a link for a larger image popup window, I am not sure if this uses the zencart larger images format or if it just uses the full size image for the attribute. I think I might try adding a hover effect for a larger image swatch.... I'll keep posting any changes I make here just in-case it helps someone else.

?>
<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 xmlHttp1
function getattribimage1(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp1=GetXmlHttpObject();
				if (xmlHttp1==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;
				xmlHttp1.onreadystatechange=stateChanged;
				xmlHttp1.open("GET",url,true);
				xmlHttp1.send(null);

}

function stateChanged() 
{ 
	if (xmlHttp1.readyState==4)
	{    
			
			var product_color_image=xmlHttp1.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage1').innerHTML = product_color_image;
			}
	}
}

var xmlHttp2
function getattribimage2(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp2=GetXmlHttpObject();
				if (xmlHttp2==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;
				xmlHttp2.onreadystatechange=stateChanged2;
				xmlHttp2.open("GET",url,true);
				xmlHttp2.send(null);

}

function stateChanged2() 
{ 
	if (xmlHttp2.readyState==4)
	{    
			
			var product_color_image=xmlHttp2.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage2').innerHTML = product_color_image;
			}
	}
}


var xmlHttp3
function getattribimage3(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp3=GetXmlHttpObject();
				if (xmlHttp3==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;
				xmlHttp3.onreadystatechange=stateChanged3;
				xmlHttp3.open("GET",url,true);
				xmlHttp3.send(null);

}

function stateChanged3() 
{ 
	if (xmlHttp3.readyState==4)
	{    
			
			var product_color_image=xmlHttp3.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage3').innerHTML = product_color_image;
			}
	}
}

var xmlHttp4
function getattribimage4(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp4=GetXmlHttpObject();
				if (xmlHttp4==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;
				xmlHttp4.onreadystatechange=stateChanged4;
				xmlHttp4.open("GET",url,true);
				xmlHttp4.send(null);

}

function stateChanged4() 
{ 
	if (xmlHttp4.readyState==4)
	{    
			
			var product_color_image=xmlHttp4.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage4').innerHTML = product_color_image;
			}
	}
}
var xmlHttp8
function getattribimage8(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp8=GetXmlHttpObject();
				if (xmlHttp8==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;
				xmlHttp8.onreadystatechange=stateChanged8;
				xmlHttp8.open("GET",url,true);
				xmlHttp8.send(null);

}

function stateChanged8() 
{ 
	if (xmlHttp8.readyState==4)
	{    
			
			var product_color_image=xmlHttp8.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage8').innerHTML = product_color_image;
			}
	}
}

var xmlHttp13
function getattribimage13(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp13=GetXmlHttpObject();
				if (xmlHttp13==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;
				xmlHttp13.onreadystatechange=stateChanged13;
				xmlHttp13.open("GET",url,true);
				xmlHttp13.send(null);

}

function stateChanged13() 
{ 
	if (xmlHttp13.readyState==4)
	{    
			
			var product_color_image=xmlHttp13.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage13').innerHTML = product_color_image;
			}
	}
}

var xmlHttp14
function getattribimage14(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp14=GetXmlHttpObject();
				if (xmlHttp14==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;
				xmlHttp14.onreadystatechange=stateChanged14;
				xmlHttp14.open("GET",url,true);
				xmlHttp14.send(null);

}

function stateChanged14() 
{ 
	if (xmlHttp14.readyState==4)
	{    
			
			var product_color_image=xmlHttp14.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage14').innerHTML = product_color_image;
			}
	}
}

var xmlHttp18
function getattribimage18(attribfield,width,height,products_options_values_id,products_id)
{


				xmlHttp18=GetXmlHttpObject();
				if (xmlHttp18==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;
				xmlHttp18.onreadystatechange=stateChanged18;
				xmlHttp18.open("GET",url,true);
				xmlHttp18.send(null);

}

function stateChanged18() 
{ 
	if (xmlHttp18.readyState==4)
	{    
			
			var product_color_image=xmlHttp18.responseText;
			if(product_color_image!=''){
			document.getElementById('attributeimage18').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>

Anyway Like I said I am not a true coder, I am more of a hack so if anyone sees something completely bad, wrong, or plain backwards let me know so I can change it...

[Robert Thomas Kirby]

I am trying to add sort of the same functionality myself. I need to have the attribute image displayed next to the radio button. How did you get it to write the div to add the images? I don't need mine to change, I just want to display all my color swatches and when a user clicks the radio button, it swaps to the main image.

Any help you could give me is greatly appreciated.

RK

[Goetch]

I am sorry, I am not sure how to accomplish this.... Do you just want radio boxes with images or do you want to swap the main image once a radio button is selected? If I understand your question correctly I think all you need to do is change some settings in the admin panel. Did you add images to your attributes? If you added images to your attributes then I think if you change some settings in the same place where you make the option a radio button you can get the attribute images to display....