[Asiaplay]

Hi Mike,

I have got Ian Websters "Images changing with variants" working well and wanted to also add colour swatches (that also change the images and colours if clicked) - hence really interested in your post.

Just couple of things not 100% clear on...
I was wanting to use the code you posted (pls see below) - is this code you listed just an addition to the variants.tpl or do I need to apply other code as well (e.g. to the product.tpl or product.php etc.)?

If you can let me know a little more would be really appreciated.

Thanks for your help and best regards - Andrew

PS: I also have a color table with variants listed but not used (any changes to this code needed or does it work around this?) Thanks again!!!

Originally Posted by mffowler

Switch the product image on click of color swatch

Just worked this to take advantage of ianwebster's brilliant "Product Options and Image previews" mod. Now, the swatches change the product image and it looks and work great. But, first implement his mod in both user and admin. Then you can manually add or insert the table variantid's so that both the variant dropdown AND the color swatches can change the product image.

Here's the main section:

{assign var="image_counter" value=0}
{section name=swatch loop=$variants}
{if $image_counter is div by 2}
<tr>
{assign var="image_counter" value=0}
{/if}
{math equation="x+1" x=$image_counter assign="image_counter" }
  <td width="20" valign="top"></td>
{foreach item=item key=key from=$variants[swatch].options}
   <td width="16" height="16" valign="top" class="{$item.option_name|replace:" ":""|replace:"/":""|replace:".":""}">[img]{$ImagesDir}/resources/dot_clear.gif[/img]</td>
  <td valign="top">{$item.option_name}</td>
{/foreach}
{capture name=image_index}
{math equation="index+x+1" index=$image_counter x=2}
{/capture}
{if $image_counter is div by 2 }
</tr>
{/if}
{/section}

Next, I'll work the names to do the swap onclick as well... getting there.

- Mike