Auto-Generated Color or Image Swatches from Product Options

mffowler · #1 10-06-2005, 06:40 PM

This mod was inspired by sstillwell's post: Variant chart in product description

I adapted the code to display all of the variants on a page in a chart as the previous mod detailed, but also to use it to create color (or image) swatches for the items that were product options. A great necessity for anyone who sells items of color, like t-shirts or apparel. Best of all, it can be applied to any of the "tabs" mods to have a dropdown color chart or drawn directly into the product.tpl as I have detailed below.

This is a finished mod, but....

I need some help making it loop in two columns as some of my items have 30 color variants and one column is way too long... if you use this mod, please assist me in the correct Smarty syntax of the loop and modifying it to display in two-columns.

I used the Product Variants to call an equivalent name in a CSS file so that some swatches could be made from either html hex codes or others (like a patterned or designed apparel item) could use images. You could call anything you wanted really, but automating color /image swatches is key for many stores and a very useful function- on the fly color/swatch charts!

In the product.tpl, add an include:

Code:

<P align="left">
{if $variants}
{include file="modules/Color_Charts/Color_Swatches.tpl" }
{/if}

Note on Product Options Type: This mod works if you have colors set to "variant" type and if you are using additional options, they must be set at "Modifier" (ie. size). If you have multiple options that are set to "Variant" type you will have multiple swatches per variable. This mod calls product options that are variants for that product, so it makes sense that if all options are "Variants", then you will draw multiple/redundant data.

I put it under the product description code. Then your product options must be variant type (not modifiers). If they are, then this will work. I am working the code to allow for modifiers as well and you could script it to also use the html_link command to change the product image (another mod). If you have any ideas or can make improvements, please do so.

You can see in the include, that I created a directory (Color_Charts) in the skin1/modules directory and then created the template "Color_Swatches.tpl" in there. You can change this and put it wherever you would like. But, this works to call the "Color_Swatches.tpl".

In the Color_Swatches.tpl, I put:

Code:

{if $variants}
<table cellspacing="3" cellpadding="0" border="0" width="100%" align="center">
<tr>
   <td colspan="3" height="20"><h2>{$lng.lbl_available_colors}</h2></font></td>
</tr>

{section name=swatch loop=$variants}
<tr>
  <td width="10"></td>
{foreach item=item key=key from=$variants[swatch].options}

   <td width="16" height="16" class="{$item.option_name|replace:" ":""|replace:"/":""}">[img]{$ImagesDir}/resources/dot_clear.gif[/img]</td>

   <td>{$item.option_name}</td>
{/foreach}
</tr>
{/section}

</table>




{else}

{/if}

I created the language variable: $lng.lbl_available_colors which just states "Available Colors" and set that as an H2, but you can call it and change the CSS accordingly.

Also note:

Code:

<td width="16" height="16" class="{$item.option_name|replace:" ":""|replace:"/":""}">[img]{$ImagesDir}/resources/dot_clear.gif[/img]</td>

This section of the code refers to "{$ImagesDir}/resources/dot_clear.gif" and that is just a transparent GIF like X-Cart's default clear. I have a habit of having many colors of "dots" available (I'm old school, I know...), so I can call them for whatever. Nowadays, you can just use <DIV> and CSS.

Also in that code is class="{$item.option_name|replace:" ":""|replace:"/":""}" This is the call to a CSS class based on the "Product Option" name. But, many colors have multiple names, like Baby Blue and Light Pink... so I included the Smarty code that replaces a space with nothing. Thus, "Baby Blue" is now a CSS class called "BabyBlue" and also "Black/White" is replaced with BlackWhite. You can add other variable replacements so that you can correctly call a CSS style. This is key as being CSS means that you can use colors, images, anything!

I also created a custom CSS file called "colors.css" and put the include in the home.tpl underneath the main skin1.css:

<LINK rel="stylesheet" href="{$SkinDir}/colors.css">

In this CSS file I listed my colors that could be called. If you have multiple color variations per name (two or three "Red" variants) just use an {if} statement to call the correct CSS file per manufacturer, like:

Code:

{if $product.manufacturerid eq "21"}
<LINK rel="stylesheet" href="{$SkinDir}/colors1.css">
{elseif $product.manufacturerid eq "22"}
<LINK rel="stylesheet" href="{$SkinDir}/colors2.css">
{/if}

You can also use product or category if statments so that a certain manufacturer uses their color selections vs anothers. A great post in the forum regarding {if} statements is by instinctual: http://forum.x-cart.com/viewtopic.php?t=12234
I recommend bookmarking that one as it got me started playng with all of these minor but nifty tweaks...

In the colors.css, I just listed the CSS names and color with hex codes. Like:

Code:

.Pink {
	BACKGROUND-COLOR: #F8B8DB; BORDER: solid 1px #E0E1E3
}	
.Purple {
	BACKGROUND-COLOR: #2E197B; BORDER: solid 1px #E0E1E3
}	
.Red {
	BACKGROUND-COLOR: #D60024; BORDER: solid 1px #E0E1E3
}

And so forth... thus, I could have used a background image and called it from the CSS file as well. There is also a light colored border around the color swatch and I put this here as some colors need or would be better looking with a lighter or darker border color. To make the CSS quick and simple, I copied a list of a manufacturers colors into Excel and was able to get the entire CSS file made in seconds. Then I used the manufacturers RGB or hex color codes and or an html color picker, like Nattyware's Pixie and just pasted the hex codes into the CSS. 40 colors took me about 5-10 minutes in total to make the complete CSS file.

In theory, if all of my swatches would have been images, I could have just ignored the CSS and called the images as background images in the swatch array drawn from the product options.

OK- that about sums it up. But, I want to add some additionals to this mod and perhaps you can help.

I need two make the display two-columns
Also allow for modifier type of options with an elseif statement and modifier call
Use an html_link Smarty function to create an image swap of the product thumbnail (or product image)

If those issues can be tackled, then you can have auto-generated color or image swatches that display in the product page, CSS generated, and also allow for dropdown selection AND link ability to either display an image popup (perhaps Boomer's detailed image mod) or swap the main product image out. This latter issues can be address by using a mod from the forum: http://forum.x-cart.com/viewtopic.php?t=19259

Enjoy! And I'd love to see some samples of this in use. One nice thing about it is that a customer only see the colors that are available. If you remove or deactivate an option, no corresponding swatch appears. And being Smarty, you can call it or not with any of the many variables...

- Mike

ETInteractive.com · #2 10-07-2005, 05:18 AM

here is a 2 column layout for a custom detailed images mod.

you will have to make some tweaks, but you get the idea.

Code:

{if $images ne ""}
<table width="100%" cellspacing="1">
  <tr><td align="center" colspan="2">
Detailed Images

  Click to Enlarge
  

  </td>
  </tr>
{assign var="image_counter" value=0}
{section name=image loop=$images}
{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" }

{if $images[image].avail eq "Y"}
<td>  
[img]{$images[image].d_url}[/img]
</td>
{capture name=image_index}
{math equation="index+x+1" index=$image_counter x=2}
{/capture}
{if $image_counter is div by 2 }
</tr>
{/if}
{/if}
{/section}
</table>
{/if}

you can see it in action here.

http://ridersinc.com/store/customer/product.php?productid=4357&cat=1083&page=1

the detailed images section below the price and large thumb.

mffowler · #3 10-07-2005, 11:40 AM

Thanks ETI! I'll see if I can get that to work right now... By the way, you could tweak that detailed mod of yours to swap the product image. But, how are those thumbs called? It appears to be an "extra" detailed image php call...

- Mike

tabarsoft · #4 10-07-2005, 12:18 PM

Hi I've used you mod and it works well thanks.
But..... there's always a but

I want my customer to be able to disable some of the variants if a color becomes unavailable. If you do so, color_swatches.tpl still do the loop as if all the variants were still available. The result is that I get blank space with an X at the place of the picture.

Have you figure out how to skip th variant if its disable?

tabarsoft · #5 10-07-2005, 12:41 PM

Hello I've combined your mod with ETI's and have color swatch on 5 colums and i'm using images instead of css.

Feel free to use.

Code:

{if $variants} 
<table cellspacing="3" cellpadding="0" border="0" width="100%" align="center"> 

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

{/section} 
</table> 


{else} 
 
{/if}

However I still got this issue.

Quote:

Originally Posted by tabarsoft

Hi I've used you mod and it works well thanks.
But..... there's always a but

I want my customer to be able to disable some of the variants if a color becomes unavailable. If you do so, color_swatches.tpl still do the loop as if all the variants were still available. The result is that I get blank space with an X at the place of the picture.

Have you figure out how to skip th variant if its disable?

mffowler · #6 10-07-2005, 12:54 PM

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

mffowler · #7 10-07-2005, 02:41 PM

Solution for achieving multiple columns of swatches:

Code:

{if $variants}
<table cellspacing="5" cellpadding="0" border="0" width="100%" align="center">
<tr>
   <td colspan="6" height="20"><h2>{$lng.lbl_available_colors}</h2></font></td>
</tr>

{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"></td>
{foreach item=item key=key from=$variants[swatch].options}
   <td width="16" height="16" class="{$item.option_name|replace:" ":""|replace:"/":""}">[img]{$ImagesDir}/resources/dot_clear.gif[/img]</td>
  <td>{$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}

</table>




{else}

{/if}

This works for me to assign the number of columns to display the variant options amnd swatches. Similar to above, but with multiple columns. Thanks ETI for your code sample.

- Mike

ETInteractive.com · #8 10-07-2005, 03:53 PM

No problem.

Glad it worked out.

As for the image swap on the ridersinc site. All those watermarked images are dynamically generated, your suggestion would require another thumbnail to be generated and some more coding...wasnt required by the client....

but it could be done.

mffowler · #9 10-07-2005, 04:06 PM

I was asked about using images for this mod, simply change the CSS to reflect an image URL:

Code:

}
.WhiteBlack {
	BACKGROUND-IMAGE: URL(images/colors/WhiteBlack.jpg); BORDER: solid 1px #E0E1E3
}

That was for a checkered background swatch and I just put a colors directory in the skin1/images.

Or if you have some images that you want to display per option, simply remove the border and call them. I did this in CSS as products are very different across manufacturers or lines. Better to keep control of the function in an easy to trasnport form..

- Mike

mffowler · #10 10-09-2005, 03:47 AM

I am trying to change my product image by clicking the generated swatch (the images change by changing the variant option dropdown), but I can only get the swatch to change the dropdown and the dropdown to change the image.

In the img src tag of the swatch, I have added:

Code:

onClick="javascript:document.getElementById('po'+{$item.classid}).value={$item.optionid}

This makes the option change... but no image change. I am also able to create a link around the option name in my swatch table and change the main image using the product_thumbnail id, but I can't get thevariant id into the img link on the product.tpl without manuanlly entering it. Ideas?

Thanks for your help,

Mike