X-Cart forums - Auto-Generated Color or Image Swatches from Product Options

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Auto-Generated Color or Image Swatches from Product Options (https://forum.x-cart.com/showthread.php?t=17126)

Auto-Generated Color or Image Swatches from Product Options

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

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.

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

Re: Auto-Generated Color or Image Swatches from Product Opti

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

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?

Re: Auto-Generated Color or Image Swatches from Product Opti

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

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

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

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.

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

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

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:

Code:

{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

Quote:

Originally Posted by mffowler

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.jpg http://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

Solution to use images without CSS !

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.

Code:

{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

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

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

Thanks!

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.

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?

Quote:

Originally Posted by Danielle

Close, :wink:

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

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

Yes, the swatches don't really have anything to do with the current functions of a product, other than product options. I used ianwebster's solution to then apply an image swap with the click of the auto-generated swatches and also change in the dropdown.

Keep in mind- this is currently for "variant" options and not modifier. If using size and color variants, I have kept the color as a variant and the size as a modifier. It doesn't enable a SKU per size/color combo as if both were variants, but it wasn't needed and most will be satisfied with usage.

Still a work in progress.

- Mike

Switch the product image on click of color swatch - files?

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

Quote:

Originally Posted by mffowler

Code:

{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

My first post discusses which files need to be added or modified. It isn't completely perfect but works for available variants. Keep in mind that X-Cart has implemented this into 4.1 versions of the cart and you may find a better workaround in those files and/or wait until it is stable.

Thanks,

Mike

Does anyone have this working on a live site? I would like to see it in action. I currently have over 3000 products because I had to set up each color of each clothing item as a separate product. It would optimize and reduce my store product count to just over 400 if I could incorporate different images for each color option for a single item, rather than having a separate product for each color. I see several changes to the code in this post. If someone could post the final working version and instructions on installing it I would greatly appreciate it. I would also like to know if this has been successfully combined with Telefirma's image MOD yet. A live site to preview would be appreciated. Thanks.

Any idea to change so All options can be variants & work

Hi Mike,

I got this module working and looks good (thanks)...

1) Change so mod works for multiple languages
Maybe this is helpful to some so have put this here - my question is actually below as point 2 however.
I just did one change which is use the "order_by" varible instead of the "option_name" varible - the advantage of this is that it will work when one uses multiple languages (as obviously for example pink (english) changes to rose (french) for example meaning linking on "option_name" would result in a crash for the 2nd and so on languages.
I have looked at the SQL table and this works as long as one names their swatch references (CSV reference or photo name) using these order_by numbers.
For example photos as X.jpg - where X is the "order_by" number (e.g. 1.jpg) For others (know you know mike) the order_by numbers for an option can be seen in the product options of Admin and if like changed by using replace in a CSV file and then imported - if some wants to).

Quote:

Originally Posted by mffowler

2) Question I have - how to change code to allow for 2 options which are both variants?
Question I have is... have you managed to make this mod work with two options both being variants and not with one being a modifier and one a variant?
Reason I ask this, is as stock levels can not be attached to modifiers - so obviously it is useful to have two or several options all being variants (and having just the one lot of colour swatches showing).

As you know - at the moment making two options both as variants results in a multi-count of the swatches (namely results in double or triple copies of a color swatch being created / appearing).

Any ideas on this Mike - anything at all is very much appreciated.

Thanks and best regards - Andrew

No, I haven't been able to modify stillwell's post regarding the issue of "multiple variants" and duplicates. But, I am sure there is a way. Although I liked working this very obscure solution of a mod (probably too obscure for most), it did work.

As this basic functionality is coming in 4.1, I am sure we will see a better solution than a CSS-very-strange-hack that I have here. But, glad a couple folks got some use out of it. ;-)

- Mike

I was wondering about using your colour swatch mod for my site. At the moment i hardcode a swatch image in the description is obviously a pain in the x-cart.
But one question i needed answering was that at the moment i have my home set up so that depending on which category you enter changes whichever css file it uses (to change the background colours). what Im wanting to know is can i alter that so that it uses say css1+coloursswatchcss or css2 + colourswatchcss or css3 + colourswatchcss.

basically what im asking is that you can use two separate css files?

I was positive that this functiontionality was available in 4.1 but now that I'm looking for it, I can't figure out where to set it up. Anyone?
thanks,
Glen

I mistook the variant images in 4.1 as able to have swatches, but that doesn't seem to be the case. This still remains a mod that X-Cart will sell, but hasn't included in the funstionality of the cart.

- Mike

Sorry Mike but I still need to know is it ok to have two css files selected in the home.tpl one for the general colours and then one just for colour swatches??
at the moment i have an if statement there already so that it changes css files depending on which category you are in.

Just need to make sure its ok to have two css files to use?

Yes, you can have multiple CSS files. Though most people may get away with the other method in this thread and just use images.

Here's an example in my product.tpl:

I show a manufactures logo. But, as I do not want to call the logo from the MySQL table and php, I use a Smarty variable replacement.

Code:

[img]{$ImagesDir}/brands/{$product.manufacturer|replace:' ':''}.gif[/img]

If I put an image in the skin1/images dir and in a folder called "brands", I could then call the images with a Smarty variable. But, some brands (and colors) would have multiple words. So I tweak the variable to replace "spaces" with no space. That's the |replace:' ':'' part of the code.

Using the other solution in this thread, you could then also use the "Product Option" itself to show an image with it's name. Easier than CSS if you only have a few brands or charts to display, but CSS works well if you have a lot of brands with a lot of color variations. Say I have 130 brands with 50 diff. color charts. It might only work to use the CSS technique and if statement method as you have done.

That way, you only get the core CSS skin1 file AND the one manufacturers CSS file for the color calls... a lot less code than calling all CSS files into the template structure. And as I mentioned a decent entry-level alternative vs. php and MySQL work which would be necessary if you actually wanted to assign a swatch image to the variant table. X-Cart did this for a site I know, but it was a bit complex and a few hundred dollar job. I'm sure they have the code for many specific needs.

- Mike

Do you know how i can change the coding so that it looks at a specific variant ie colour/swatch variant rather than sizes?

we dont have that many colours usually black, white or hivis.

I just want it to bring in the colour swatch.tpl if there is a colour variant available and not have it bring in blank swatches for the sizes?

I have started trying to get this to work for 4.1.x and have managed to display one column of variants (colors only). Can anyone help me to: 1. Allow for 2 or 3 columns and 2. Display only available color swatches/names?

Code:

{capture name=dialog}

{foreach from=$product_options item=v}

{assign var="x" value="product_options[`$v.classid`]"}

{/foreach}



<table><tr>

{foreach from=$v.options item=o}



<td background="{$xcart_web_dir}images/S/{$product.manufacturer}_{$o.option_name|replace:" ":""|replace:"/":""}.gif">[img]{$ImagesDir}/spacer.gif[/img]</td>



<td>{$o.option_name}</td></tr>

{/foreach}

</table>

{/capture}

{include file="dialog.tpl" title=$lng.lbl_color_chart content=$smarty.capture.dialog extra='width="100%"'}

With the current 4.1.x variant images, it's strange to not see an X-Cart coded swatch image display. I have used the manufacturers and the option name to get a static image to be used as a background, but there must be a more professional method to do this. Ideas?

My mod has a directory in the images dir. called "S" and the images are named "Brand_ColorTitle.gif".

Thank for helping me to develop this intermediary solution.

- Mike

Re: Auto-Generated Color or Image Swatches from Product Options

Hi Mike,

Thanks a ton for sharing all your time on this. I've just read this whole thread and wanted to touch base with you to see what your current take on the best solution to this is... any advice would be greatly appreciated as I'm about to jump in to trying to get this mod to work.

Thanks!
Damian

Re: Auto-Generated Color or Image Swatches from Product Options

Has any figured out how to put thumbnail images and place them under the product image for 4.1 verision as http://www.ridersinc.com/alpinestars-boots-supertech-r-2008-p100221.html is using it in addition to the dropdown that is comes with the cart?

I see how the drop down works by swamping images but I would also like to have thumbnails under the product image. Most people will not know to use the dropdown to see other images.