FREE Product Variant Icon Images Mod

Store Builder in detail Hints & Modifications
#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:


{elseif $details_page}
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-text-selected"}{else}{assign var="_class" value="product-variant-text-unselected"}{/if}
{$var.variant_name}



AFTER:



{if $var.image_pair.image_id}
{if $var.variant_id == $selected_variant}{assign var="_class" value="product-variant-image-selected"}{else}{assign var="_class" value="product-variant-image-unselected"}{/if}
{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);"}






Add the following CSS to your stylesheet:



.product-variant-text-unselected,.product-variant-text-selected {
font-size: 12px;
height:30px;
width:50px;
overflow:hidden;
word-wrap:break-word;
text-align:center;
line-height: 30px;
max-height: 30px;
}

.product-variant-image-selected,.product-variant-text-selected
{
border: dashed black 1px;
}

variant_option_boxes.jpg

#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