FREE Product Variant Icon Images Mod

Store Builder Questions
1

I had the need to display a nice box for each product option variant when there was no variant image icon and thought I would share the love.



Here is a preview of what it looks like on our site:



[attachment=5568:variant_option_boxes.jpg]





So you want this mod? Follow the directions below.



in customer/views/product/components/product_options.tpl

(This will allow boxes of option variants to show up when an option variant image does not exist.)

-------------------------------------------------------------------------------------



ADD:

<br />
{elseif $details_page}<br />
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-text-selected"}{else}{assign var="_class" value="product-variant-text-unselected"}{/if}<br />
<span class="hand {$_class} object-image" obj_id="variant_image_{$obj_prefix}{$id}_{$po.option_id}_{$var.variant_id}" onclick="fn_set_option_value('{$obj_prefix}{$id}', '{$po.option_id}', '{$var.variant_id}'); void(0);">{$var.variant_name}</span>
```<br />
<br />
[b]AFTER:[/b]<br />
```php
<br />
<br />
{if $var.image_pair.image_id}<br />
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-image-selected"}{else}{assign var="_class" value="product-variant-image-unselected"}{/if}<br />
{include file="common_templates/image.tpl" class="hand $_class object-image" show_thumbnail="Y" images=$var.image_pair object_type="product_option" image_width="50" image_height="50" obj_id="variant_image_`$obj_prefix``$id`_`$po.option_id`_`$var.variant_id`" image_onclick="fn_set_option_value('`$obj_prefix``$id`', '`$po.option_id`', '`$var.variant_id`'); void(0);"}<br />

```<br />
<br />
<br />
[b]Add the following CSS to your stylesheet:[/b]<br />
<br />
```php
<br />
.product-variant-text-unselected,.product-variant-text-selected {<br />
font-size: 12px;<br />
height:30px;<br />
width:50px;<br />
overflow:hidden;<br />
word-wrap:break-word;<br />
text-align:center;<br />
line-height: 30px;<br />
max-height: 30px;<br />
}<br />
<br />
.product-variant-image-selected,.product-variant-text-selected<br />
{<br />
border: dashed black 1px;<br />
}
```<p><a href="127.0.0.1/uploads/monthly_08_2012/post-17780-0-83924000-1343935709.jpg">variant_option_boxes.jpg</a></p>
2

Nice idea, thx for sharing

3

Your welcome. I had to make a small edit to change the else to elseif $details_page so it only shows up on the details page and not the cart page.

4

tanx

5

I did a similar thing with the CSS, making the selected option id to a dashed border instead of solid… Much easier to see the selected element. :)



But I’m unable to read between the lines what this is allowing you to improve / change… You mention “when there is no variant image”, but your screenshot shows each variant with images for the option group.



Or is the “Belt Size” drop-down and numeric “images” the example here? … or is the “Buckle Colour” drop-down the example?



:confused: confused…

6

Yes but those are not images they are pure text and CSS on the belt size options.

7

[quote name='solesurvivor' timestamp='1349181886' post='146185']

Yes but those are not images they are pure text and CSS on the belt size options.

[/quote]



trying to send you a message sole but wont accept messages, is your in box full

8

[quote name='johnbol1' timestamp='1349379916' post='146376']

trying to send you a message sole but wont accept messages, is your in box full

[/quote]



No it does not look like it.

9

When I send u a pm message appears cannot accept messages



Try and send me one and I can try to reply