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)

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

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

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?