Плагин "Картинки как на Али" тема "Выгодная покупка(Profitbuy)"

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

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

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

.feature-button .alaali{
    padding: 1px;
}
.feature-button .alaali img{
    border-radius: 3px;
    vertical-align: middle;
    height:40px;
    width: auto;
}
.options-item.color span.alaali{
    margin-bottom: 20px;
    height: auto;
    width: auto;
}
input[type=radio] + .alaali.stylize-button
input[type=radio]:checked + .alaali.stylize-button{
    padding: 2px;
}
.alaali_img2{
    border: 1px solid rgba(0,0,0,0.2);
    margin: 0.2em 0.25em 0 0;
    vertical-align: top;
    height: 15px;
    width: 15px;
}

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

найдите код

<div class="options">
{foreach $features_selectable as $f}
    <div class="option-item{if strpos($feature_button, $f.code) !== false} feature-button{/if}">
        <div class="bold">[`Choose`] <span class="lowercase">{$f.name}</span>: </div>
        {if strpos($feature_button, $f.code) !== false}
            {foreach $f.values as $v_id => $v}
                <label class="at-stylize-label">
                    <input data-feature-id="{$f.id}" class="sku-feature at-stylize-input" type="radio" value="{$v_id}" name="features[{$f.id}]"{if $v_id == ifset($default_sku_features[$f.id])} checked="checked"{/if}>
                    {if $f.type == 'color'}
                        <span class="at-stylize-color" style="{$v->style}" title="{strip_tags($v)}"></span>
                    {else}
                        <span class="at-stylize-button">{$v}</span>
                    {/if}
                </label>
            {/foreach}
        {else}
            <select data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]">
            {foreach $f.values as $v_id => $v}
                <option value="{$v_id}" {if $v_id == ifset($default_sku_features[$f.id])}selected{/if}>{$v}</option>
            {/foreach}
            </select>
        {/if}
    </div>
{/foreach}
</div>

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

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

{$feature_button = $theme_settings.feature_button|default:""}

<!-- SELECTABLE FEATURES selling mode -->
{$default_sku_features = $product.sku_features}
{$product_available = $product.status}
{$feature_images = shopAlaaliHelper::getFeaturesImg($product.id)}
{$feature_button = $theme_settings.feature_button|default:""}
<div class="options">
    {foreach $features_selectable as $f}
    <div class="option-item{if strpos($feature_button, $f.code) !== false} feature-button{/if}">
        <div class="bold">[`Choose`] <span class="lowercase">{$f.name}</span>: </div>
        {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:"' class='alaali_img'>"}
                {/if}
                <label class="at-stylize-label">
                <input data-feature-id="{$f.id}" class="sku-feature at-stylize-input" type="radio" value="{$v_id}" name="features[{$f.id}]"{if $v_id == ifset($default_sku_features[$f.id])} checked="checked"{/if}>
                {if in_array($v_id,$feature_images[$f.id]['id'])}
                    <span data-value-id="{$v_id}" class="alaali feature-btn{if $v_id == ifset($default_sku_features[$f.id])} selected{/if}">{$v_img} </span>
                {else}
                    <span data-value-id="{$v_id}" class="feature-btn{if $v_id == ifset($default_sku_features[$f.id])} selected{/if}"{if $f.type == 'color'} style="{$v->style};"{/if}>
                    {if $f.type == 'color'}
                        <span class="color_name">{strip_tags($v)}</span>
                    {else}
                        {$v}
                    {/if}
                {/if}
                </label>
            {/foreach}
        {else}
            <select data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]">
            {foreach $f.values as $v_id => $v}
                <option value="{$v_id}" {if $v_id == ifset($default_sku_features[$f.id])}selected{/if}>{$v}</option>
            {/foreach}
            </select>
        {/if}
    </div>
    {/foreach}
</div>

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

найдите код:

{if $product.features}
<!-- product features -->
{$_valid_features = ['color','weight']}
<h2 class="product-tabs-nav-trigger-wrapper"><a class="product-tabs-nav-trigger" data-name="features" href="{$wa->shop->productUrl($product)}">[`Features`]</a></h2>
<div id="product-tab-features" class="product-tab">
    <table class="features striped" id="product-features">
    {foreach $product.features as $f_code => $f_value}
        <tr{if $features[$f_code].type == 'divider'} class="divider"{/if} itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
            <td class="name" itemprop="name">
                {$features[$f_code].name|escape}
            </td>
            <td class="value"{if in_array($f_code|escape, $_valid_features)} itemprop="{$f_code|escape}"{/if} itemprop="value">
                {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}
<!-- product features -->
{$_valid_features = ['color','weight']}
<h2 class="product-tabs-nav-trigger-wrapper"><a class="product-tabs-nav-trigger" data-name="features" href="{$wa->shop->productUrl($product)}">[`Features`]</a></h2>
<div id="product-tab-features" class="product-tab">
{$feature_images = shopAlaaliHelper::getFeaturesImg_code($product.id,false)} 
    <table class="features striped" id="product-features">
    {foreach $product.features as $f_code => $f_value}
        <tr{if $features[$f_code].type == 'divider'} class="divider"{/if} itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
            <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 class="alaali name">{$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 class="alaali name">{$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 class="alaali name">{$f_value|escape}</span><br /> 
                    {/if} 
                {/if} 
            </td> 
        </tr>
    {/foreach}
    </table>
</div>
{/if}