[mffowler]

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:

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

{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:

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

{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:

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

1. I need two make the display two-columns
2. Also allow for modifier type of options with an elseif statement and modifier call
3. 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