Плагин "Картинки как на Али" тема "Supreme"

1. В настройках темы дизайна магазина переключите "Выбор характеристик товара" на "Показывать все значения крупно в ряд"

2. Создайте файл alaali.css в теме дизайна магазина.

Содержимое файла:

.product_page .options .inline-select.color a{
    vertical-align: middle;
}
.options .inline-select>a.alaali{ 
    padding: 2px !important;
    width: auto !important;
    height: auto !important;
} 
.alaali_img{
    border-radius: 3px; 
    width: 100px; 
    height: 40px; 
} 
.alaali_img2{ 
    border: 0px solid rgba(0,0,0,0.2); 
    width: 20px; 
}

2. Подключить этот файл стилей в head.html

Найдите код (последние строки в файле)

<!-- plugin hook: 'frontend_head' -->
{* @event frontend_head.%plugin_id% *}
{foreach $frontend_head as $_}{$_}{/foreach}

Добавьте после них код

<link rel="stylesheet" href="{$wa_active_theme_url}alaali.css?v{$wa_theme_version}">

3. Отредактируйте шаблон product.cart.html

найдите код

<!-- SELECTABLE FEATURES selling mode -->
{$default_sku_features = $product.sku_features}
{$product_available = $product.status}
{if $theme_settings.selectable_features_control == 'inline'}
    <div class="options">
        {foreach $features_selectable as $f}
            <div class="inline-select{if $f.type == 'color'} color{/if}">
                <div class="option_name">{$f.name}:</div>
                {foreach $f.values as $v_id => $v}
                    {if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}
                        <a data-value="{$v_id}" href="#"{if $v_id == ifset($default_sku_features[$f.id])} class="selected"{/if}>
                        {if $f.type == 'color'} <i class="color" style="{$v->style};"></i>{/if}
                        {if $f.type == 'color'} <i class="fa fa-check color_checkmark"></i>{/if}
                        {if $f.type == 'color'} <span class="color_name">{strip_tags($v)}</span>{else}{$v}{/if}
                        </a>
                {/foreach}
                <input type="hidden" data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
            </div>
        {/foreach}
    </div>
{else}

и исправьте на

<!-- SELECTABLE FEATURES selling mode -->
{$default_sku_features = $product.sku_features}
{$product_available = $product.status}
{$feature_images = shopAlaaliHelper::getFeaturesImg($product.id)}
{if $theme_settings.selectable_features_control == 'inline'}
    <div class="options">
        {foreach $features_selectable as $f}
            <div class="inline-select{if $f.type == 'color'} color{/if}">
                <div class="option_name">{$f.name}:</div>
                {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:"' class='alaali_img'>"}
                    {/if}
                    {if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}
                    {if in_array($v_id,$feature_images[$f.id]['id'])}
                        <a data-value="{$v_id}" href="#" class="alaali{if $v_id == ifset($default_sku_features[$f.id])} selected{/if}">
                            {$v_img}
                        </a>
                    {else}
                        <a data-value="{$v_id}" href="#"{if $v_id == ifset($default_sku_features[$f.id])} class="selected"{/if}>
                        {if $f.type == 'color'} <i class="color" style="{$v->style};"></i>{/if}
                        {if $f.type == 'color'} <i class="fa fa-check color_checkmark"></i>{/if}
                        {if $f.type == 'color'} <span class="color_name">{strip_tags($v)}</span>{else}{$v}{/if}
                        </a>
                    {/if}
                {/foreach}
                <input type="hidden" data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
            </div>
        {/foreach}
    </div>
{else}

4. Отредактируйте шаблон product.html

найдите код:

<!-- Tab panes -->
<div class="tab-content clearfix">
{if $product.description}
    <div role="tabpanel" class="tab-pane" id="pp_home">
        <div class="description" id="product-description" itemprop="description">{$product.description}</div>
    </div>
{/if}
{if $product.features}
<div role="tabpanel" class="tab-pane" id="pp_specs">
    <table class="table table-hover 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)}
                    {if $features[$f_code].type == 'color'}
                        {implode(' ', $f_value)}
                    {else}
                        {implode(', ', $f_value)}
                    {/if}
                {else}
                    {$f_value}
                {/if}
            </td>
        </tr>
    {/foreach}
    </table>
</div>
{/if}

и исправьте на

{if $product.features}
<div role="tabpanel" class="tab-pane" id="pp_specs">
    {$feature_images = shopAlaaliHelper::getFeaturesImg_code($product.id,false)} 
    <table class="table table-hover 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)} 
                {if $features[$f_code].type == 'color'} 
                    {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:"' class='alaali_img2' >"}
                            {$v_img}{$feature_images[$f_code]['value'][$v_id]}<br /> 
                        {else} 
                            <span style="padding-left: 4px; line-height: 150%;">{$value}</span><br /> 
                        {/if} 
                    {/foreach} 
                {else} 
                    {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:"' class='alaali_img2' >"}
                            {$v_img}<span>{$feature_images[$f_code]['value'][$v_id]}</span><br /> 
                        {else} 
                            <span style="padding-left: 25px; line-height: 150%;">{$value|escape}</span><br /> 
                        {/if} 
                    {/foreach} 
                {/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:"' class='alaali_img2' >"}
                    {$v_img}<br /> 
                {else} 
                    <span style="padding-left: 25px; line-height: 150%;">{$f_value|escape}</span><br /> 
                {/if} 
            {/if} 
            </td> 
        </tr> 
    {/foreach} 
    </table> 
</div>
{/if}