X-Cart forums

[dalmuti]

Hi,

I am working on 4.1.3 with the Product Options/Variants and have added options and attached a thumbnail to each one.

When you view the product detail page the thumbnail image changes as you change the product option, which is fine. But, what I also want to do is display each option/variant thumbnail separately. Maybe in another table below the product details but above the Send to Friend, etc.

http://www.studio57designs.com/example.jpg

I've tried the debug and don't quite understand what variables, etc I need to use.

There may be a few thumbnails or many....isn't there a way to create a loop do display them?

Ultimately what I would like to do is have the thumbnails with qty and checkboxes and be able to order multiple items from that one screen. But, I would be happy to get the first step of displaying the thumbnails.

Any assistance would be greatly appreciated.

Thanks,

Louise

[carpeperdiem]

I "simply" made a swatch image... and included it into the product description.

The pulldown for each color changes the variant, and there is also an enlarged view of the color palette.

This is one product that I am thinking of changing to a "multiple items and qty" type of input page -- small swatch, next to an input box... then "add to cart" so customers can buy mutliple colors all at once... but for most of my products, a customer will only buy one color.

Hope this helps...

Jeremy

[dalmuti]

Jeremy,

Thanks for the reply but thats not what I'm looking for....because if additional options/variants are added then the image will have to be updated and that doesn't make it very dynamic.

I prefer to code it so that the thumbnails will change without alot of additional intervention.

Louise

[dalmuti]

Ok, I've made some progress but I need some assistance with the code I created.

Here is the code - template name (option_images.tpl):

<table>
<tr>
{foreach from=$variants item=var}
<td width="100" align="center">
<img src="{$var.image_url}" width="75" height="75">
<br />
{foreach from=$var.options item=o}
{$o.option_name}
{/foreach}
</td>
{/foreach}
</tr>
</table>
{/if}

This template is then inserted into the product.tpl.

Here is the result:
http://www.studio57designs.com/sample2.gif

But, I don't know how to code it so that it will flow to the next row for more than 5 images.....like the subcategories icon mod.

Also, I want to make each image a link to the product page.

Now that I've got this far can someone help me figure out these last 2 steps.

Thanks,

Louise

[dalmuti]

Anyone have any help for my question? Thanks, Louise

[dalmuti]

Just in case someone has the same idea....here is the code to display variant thumbnails in rows:

{if $variants ne ""}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
{foreach name=variants from=$variants item=var}
<td width="160">
<a href="product.php?productid={$var.productid}">
<img src="{$var.image_url}" width="150" height="150"></a>
<br />
{foreach from=$var.options item=o}
<b>{$o.option_name}</b>
{/foreach}
<br /><br />
</td>
{if $smarty.foreach.variants.iteration is div by 3}
</tr>
<tr>
{elseif not $smarty.foreach.variants.last}
<td></td>
{/if}
{/foreach}
</tr>
</table>
{/if}

[TJ Stephens]

Dalmuti,
Thanks for sharing this code. It works great!

[dalmuti]

You are welcome....hope you find it useful.

Louise

[JJD]

Hi,

If I wanted to display the variants thumbnails on the category display where would you code need to go?

Thanks,

[Brow]

Ok, this works awesome...but is there a way to code the links to reflect the image swapping as well as changing the SKU?