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

1. В приложении «Магазин» создать файл под названием alaali.css в разделе «Витрина» во вкладке «Шаблоны» с кодом

.options .inline-select a {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 3px;
  margin: 0 5px 5px 0;
  display: inline-block;
  background: rgba(0,0,0,0.1);
  text-decoration: none;
  font-weight: bold;
  position: relative;
  min-width: 40px;
  text-align: center;
  height: 40px;
  vertical-align: middle;
}
.options .inline-select a.selected {
  border: 1px solid #000;
  box-shadow: 0 2px 4px -2px rgba(0,0,0,0.4);
  background: rgba(0,0,0,0.15) -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.0) 100%);
  background: rgba(0,0,0,0.15) -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.0)));
  background: rgba(0,0,0,0.15) -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.0) 100%);
  background: rgba(0,0,0,0.15) -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.0) 100%);
  background: rgba(0,0,0,0.15) -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.0) 100%);
  background: rgba(0,0,0,0.15) linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fde992', endColorstr='#fcd630',GradientType=0 );
  color: #000 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.options .inline-select a .color_name {
  display: none;
  position: absolute;
  bottom: -22px;
  left: 50%;
  font-size: 0.6em;
  color: rgba(0,0,0,0.7);
  margin-left: -40px;
  width: 80px;
}

2. Отредактируйте файл head.html:

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

<!-- 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:

В файле product.cart.html найдите блок кода

<!-- SELECTABLE FEATURES selling mode -->
{$default_sku_features = $product.sku_features}
{$product_available = $product.status}
<div class="options" style="margin-bottom:15px;">
    {foreach $features_selectable as $f}
        {$f.name}:
        {if $f.type == 'color'}
            <div class="inline-select color">
                {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} style="margin-bottom: 20px;">
                    <i class="icon16 color" style="{$v->style}"></i><span class="color_name">{strip_tags($v)}</span>
                    </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>
        {else}
            <div class="inline-select">
                <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>
            </div>
        {/if}
    {/foreach}
</div>
{else}

Замените его на код

<!-- SELECTABLE FEATURES selling mode -->
{$default_sku_features = $product.sku_features}
{$product_available = $product.status}
{$feature_images = shopAlaaliHelper::getFeaturesImg($product.id)}
<div class="options" style="margin-bottom:15px;">
    {foreach $features_selectable as $f}
        {$f.name}:
        <div class="inline-select{if $f.type == 'color'} color{/if}">
            {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 !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'} style="{$v->style}; margin-bottom: 20px;"{/if}>
                {if in_array($v_id,$feature_images[$f.id]['id'])}
                    {$v_img}
                    <span class="color_name">{strip_tags($v)}</span>
                {else}
                    {if $f.type == 'color'}<span class="color_name">{strip_tags($v)}</span>{else}{$v}{/if}
                {/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}

4. Отредактируйте файл product.html:

Найдите код

<!-- product features -->
{if $product.features}
    <div id="tab2"{if $_desc} style="display:none;"{/if}>
    <div class="tab-head"><h2>[`Features`]</h2></div>
    <div class="tab-content">
        <table class="features zebra" id="product-features">
            {foreach $product.features as $f_code => $f_value}
                <tr>
                    <td class="name">
                        {$features[$f_code].name|escape}
                    </td>
                    <td class="value" itemprop="{$f_code|escape}">
                        {if is_array($f_value)}
                            {implode(', ', $f_value)}
                        {else}
                            {$f_value}
                        {/if}
                    </td>
                </tr>
            {/foreach}
        </table>
    </div>
    </div>
{/if}

Замените его на код

<!-- product features -->
{if $product.features}
    {$feature_images = shopAlaaliHelper::getFeaturesImg_code($product.id, false)}
    <table class="features zebra" 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: 24px; ' >"}
                                {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: 24px; ' >"}
                                {$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: 24px; ' >"}
                                {$v_img}
                            {else}
                                {$f_value|escape}
                            {/if}
                        {/if}
                    {/if}
                </td>
            </tr>
        {/foreach}
    </table>
{/if}