X-Cart forums

[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

[tabarsoft]

Originally Posted by mffowler

tabarsoft,

My mod works for "available" options only, so I don't get any empties when options are unavailable (it only calls what is seen in the dropdown). Getting better and better though!

- Mike

Hello Mike,
Have you tried to disable some? Because I've tried your code has is,
and you do get holes for the missing disabled options.
See images below. Mine is above and yours is below.
Colors don't apears for the avaible options because I didn't create the css for it but we can still see the names of the options.
http://www.tmdesign.ca/color/swatch.jpg disabled in redhttp://www.tmdesign.ca/color/swatch003.jpghttp://www.tmdesign.ca/color/swatch2.jpg

It must be the way we're building the table.

We're close to the solution. Be back soon.

Martin

[tabarsoft]

Solution to use images without CSS !
Hello Mike and ETI

Good news I've got it!
If you want to use images without css you can use this code.
Any number of column, options disabled or not, and the table containing the swatch is now close correctly.

{if $variants} 
	<table cellspacing="3" cellpadding="0" border="1" > 
		{assign var="image_counter" value=0} 
		{assign var="close_table" value=0}
		{section name=swatch loop=$variants} 
			{foreach item=item key=key from=$variants[swatch].options} 
				{if $item.option_name ne '' }
				{if $image_counter mod 5 eq 0} 
				<tr> 
					{assign var="image_counter" value=0} 
				{/if} 				
				<td>{math equation="x+1" x=$image_counter assign="image_counter" } 
				[img]{$ImagesDir}/{$item.option_name|replace:[/img]</td>
				{if $image_counter mod 5 eq 0   }  
					</tr> 
				{assign var="close_table" value=1}
				{else}{assign var="close_table" value=0} 
				{/if} {/if} 
				{capture name=image_index} 
					{math equation="index+x+1" index=$image_counter x=5} 
				{/capture} 
			{/foreach} 
		{/section}
		{if $close_table eq "0"}<td></td></tr>{/if} 
	</table> 
{else} 
 
{/if}

It might not be the cleanest code but it works.
Feel free to improve it.

Martin

[mffowler]

Matrin,

Yes, I see what you mean. But, though you meant disabled options. If you disable an option it doesn't show in the dropdown nor in the swatch array.

But, if you hav an option with no CSS (image or hex code in CSS) then the TD is empty. This is normal behaviour as we need swatched to display for all available options that are variants. Thus, works well. My current issue, is to get the name to make the product image change when clicked... like the swatch.

Thanks for your contribution to this work in progress.

- Mike

[Danielle]

Could some of you post links to your sites where you're using this so we can see?

Thanks!

[tabarsoft]

Hi Danielle,

Unfortunately the site isn't available to public yet.

But for now here's a picture.

http://tmdesign.ca/color/swatch006.jpg

The swatch shows the 11 curently available colors out of the 15.

I wrote a modifier to split the value of each options to call the picture and put a description underneat.

[Danielle]

OK, so this will look the same as if I had an options dropdown box and then detailed images, except that the images will actually be associated with the options in the box, and will be labelled with the option name as well, is that right?

[tabarsoft]

Originally Posted by Danielle

OK, so this will look the same as if I had an options dropdown box and then detailed images, except that the images will actually be associated with the options in the box, and will be labelled with the option name as well, is that right?

Close,

I still have detailed images associated to the product. But for the rest of it you right.

[Danielle]

Oh OK, so I could still have detailed images below the swatches then if I wanted?

[tabarsoft]

Exactly.