X-Cart forums

[sstillwell@aerostich.com]

Ok,

I get several requests on how to do the swapping as found on this page
http://www.aerostich.com/product.php?productid=16376&cat=248&page=1

It's pretty simple, so I'll spell it out. You will need to have a little understanding of HTML to implement this.

First you need to create images that are exactly alike except for color. In my case I created blue, black, red, grey, yellow. Then name them accordingly, DarienBlue.jpg, DarienBlack.jpg.... Put these images somewhere on your server e.g. /files/images/suits

Keep the order of your colors consistent

Second, you need to create the javascript and include it in the page. Add the following into /skin1/customer/common.js

// Code for the Darien to switch colors
// Selects the proper color in the drop down color menu
function ChangeDarienColor(id,newValue) {
	var colorCodes = new Array("Blue","Black","Red","Gray","Viz","Silver");
// Change the correct drop down menu
	if(id!=""){
		document.getElementById(id).selectedIndex = newValue;
	}	
// Change the image
	var ImageName = "Darien"+colorCodes[newValue]+".jpg";	
	document.getElementById("ColorfulSuitD").src = "/files/images/suits/"+ImageName;	
}

right before the

-->

The basic HTML looks like this. You will have to ediit it for two things. 1. the colors. 2. the id of your selection (notice that clicking the swatch changes the drop down selection as well.).

<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
Standard Colors (click to view)

<table>
<tr>

<td>
<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">
<tr>
<td width="20" style="background-color: blue;" onClick="ChangeDarienColor('po81','0')">
</td>
</tr>
</table>
</td>
<td>
<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">
<tr>
<td width="20" style="background-color: black;" onClick="ChangeDarienColor('po81','1')">
</td>
</tr>
</table>	
</td>
<td>
<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">
<tr>

<td width="20" style="background-color: red;" onClick="ChangeDarienColor('po81','2')">
</td>
</tr>
</table>
</td>	
<td>
<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">
<tr>
<td width="20" style="background-color: gray;" onClick="ChangeDarienColor('po81','3')">
</td>
</tr>
</table>
</td>
<td>
<table style="border: 1px solid #FFFFFF;" cellpadding="2" onmouseover="javascript:this.style.borderColor = '#2E2930';" onmouseout="javascript:this.style.borderColor = '#FFFFFF';">
<tr>
<td width="20" style="background-color: #ebe805;" onClick="ChangeDarienColor('po81','4')">
</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
<td valign="top">[img]/files/images/suits/DarienBlue.jpg[/img]</td>	
</tr>
</table>

In my case, the ID of the selection is "po81".

That's basically it in a nutshell. There is another more complex form of this for a different product we sell, but that includes the use of hidden form elements to keep track fo selected colors. It 's for this product.
http://www.aerostich.com/product.php?productid=16133&cat=248&page=1

But that is more complex and I won't explain it here.

If you have questions just ask them here, I or someone else may be able to point you in the right direction, but before you dive head long into Javascript, CSS, and HTML, it's best to arm yourself with some knowledge about it. Have fun.

[larrydavidow]

This mod is for 4.1 only right?

[sstillwell@aerostich.com]

Actually,

If you look at my signature. This is mod is for 4.0.12, but should work in most versions as it doesn't really depend on the Xcart structure to make it happen.

[gfiebich]

Thanks for sharing this. I like the fact that clicking a swatch updates the selected color option. Have you had any luck making this work in reverse? Ie. changing the selected color option updates the product image?

[sstillwell@aerostich.com]

I don't have it set up to do it in reverse, but check out this Xcart install. This guys has it done. You may want to ask him.

http://www.horseloverz.com/Soft-Stretch-Elastic-Lead-Rope-pr-178626.html

[iblazed]

I really would like to get this mod working but I am having a little trouble. Where is it that I put the basic HTML code? Also where do I get the id of my selection? Thanks for any help.

[sstillwell@aerostich.com]

Originally Posted by iblazed

I really would like to get this mod working but I am having a little trouble. Where is it that I put the basic HTML code? Also where do I get the id of my selection? Thanks for any help.

The basic HTML goes in the product description. The id of the selection can be seen when you view source at the product page (customer side), it will be "poXX"

[speesees]

Is there a way to dynamically get the poXX? I have many different advanced variants and ID is unique. Once I get the code working for one like po81, on another page the same option menu is po102, etc.

Or can one target the first advanced variant without knowing what it's poXX ID is? If I always use the same type of Advanced Variant as the first option, then I could target it consistenly in my own code add-on.

[andreas04031]

I love that mod, got it working on my 4.1.3 testshop and put it live pretty soon, thank you very much!!!
Andy

[ryan c.]

Am I missing something? I can not find skin1/customer/common.js anyhwhere?