Где работает

на странице товара.

Где купить?

https://www.webasyst.ru/store/plugin/shop/alaali/

Как активировать плагин?

1. по инструкции разработчика плагина

2. Обязательно сделайте тип характеристик (к которым Вы будете применять изображения) не выпадающим списком а кнопками

инструкция - http://wm-site.ru/profitbuy/266/vybor-variatsiy-to...

3. внести изменения в шаблон

1. в пользовательские стили добавить

label input[type=radio] + img, label input[type=checkbox] + img { border: 1px solid #d9d9d9; background-color: #fff; display: inline-block; padding: 2px; border-radius: 4px; vertical-align:middle; } label input[type=radio] + img:hover, label input[type=checkbox] + img:hover { cursor: pointer; background: #f2f2f2; } label input[type=radio]:checked + img, label input[type=checkbox]:checked + img { box-shadow: inset 0 0 0 2px #d9d9d9; }

2. в файле product.cart.html

а) после кода

<!-- SELECTABLE FEATURES selling mode --> {$default_sku_features = $product.sku_features} {$product_available = $product.status}

{$feature_images = shopAlaaliHelper::getFeaturesImg($product.id)}

б) после кода

{if strpos($feature_button, $f.code) !== false} {foreach $f.values as $v_id => $v}

пропишите

{if in_array($v_id,$feature_images[$f.id]['id'])} {$v_img = "<img src='"|cat:$feature_images[$f.id]['img'][$v_id]|cat:"' title='"|cat:$feature_images[$f.id]['value'][$v_id]|cat:"' style='vertical-align: middle;border-radius: 3px;width: 40px; height:40px;'/>"} {/if}

в) замените

{if $f.type == 'color'} <span class="stylize-color" style="{$v->style}" title="{strip_tags($v)}"></span> {else} <span class="stylize-button">{$v}</span> {/if}

на

{if in_array($v_id,$feature_images[$f.id]['id'])} {$v_img} {else} {if $f.type == 'color'} <span class="stylize-color" style="{$v->style}" title="{strip_tags($v)}"></span> {else} <span class="stylize-button">{$v}</span> {/if} {/if}

3. в файле "product.html"

замените

<table class="features" id="product-features"> {foreach $product.features as $f_code => $f_value} <tr{if $features[$f_code].type == 'divider'} class="divider"{/if}> <td class="name">
{$features[$f_code].name|escape}
</td> <td class="value"{if in_array($f_code|escape, $_valid_features)} itemprop="{$f_code|escape}"{/if}> {if is_array($f_value)} {if $features[$f_code].type == 'color'} {implode('<br /&rt; ', $f_value)}{else}{implode(', ', $f_value)} {/if} {else} {$f_value} {/if} </td> </tr> {/foreach} </table>

на

{$feature_images = shopAlaaliHelper::getFeaturesImg_code($product.id, false)} <table class="features" id="product-features"> {foreach $product.features as $f_code => $f_value} <tr{if $features[$f_code].type == 'divider'} class="divider"{/if}> <td class="name"> {$features[$f_code].name|escape} </td> <td class="value" itemprop="{$f_code|escape}"> {if is_array($f_value)} {foreach $f_value as $v_id => $value} {if in_array($v_id,$feature_images[$f_code]['id'])} {$v_img = "<img src='"|cat:$feature_images[$f_code]['img'][$v_id]|cat:"' title='"|cat:$feature_images[$f_code]['value'][$v_id]|cat:"' style='vertical-align: middle; border-radius: 3px; width: 30px;' />"} {if $features[$f_code].type == 'color'} {$v_img} {else} {$v_img} {/if} {else} {if $features[$f_code].type == 'color'} {$value}{else}{$value|escape}{/if} {/if} {/foreach} {else} {if is_object($f_value)} {assign var=v_id value=$f_value.id} {if in_array($v_id,$feature_images[$f_code]['id'])} {$v_img = "<img src='"|cat:$feature_images[$f_code]['img'][$v_id]|cat:"' title='"|cat:$feature_images[$f_code]['value'][$v_id]|cat:"' style='vertical-align: middle; border-radius: 3px; width: 30px;' />"} {$v_img} {else} {$f_value|escape} {/if} {else} {assign var=v_id value=$f_value} {if in_array($v_id,$feature_images[$f_code]['id']) || in_array($v_id,$feature_images[$f_code]['value'])} {$v_img = "<img src='"|cat:$feature_images[$f_code]['img'][$v_id]|cat:"' title='"|cat:$feature_images[$f_code]['value'][$v_id]|cat:"' style='vertical-align: middle; border-radius: 3px; width: 30px;' />"} {$v_img} {else} {$f_value|escape} {/if} {/if} {/if} </td> </tr> {/foreach} </table>

* Выделенное желтым - это размеры изображений, Вы можете изменить занчения по собственному усмотрению (желательно что бы изображения совпадали по размерам с указанными Вами)