Плагин "Картинки как на Али" тема "Профессиональный лендинг"

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

/**ALAALI**/
.alaali{
    vertical-align: top; /*вертикальное выравние элементов внутри блоков содержащих и alaali-картинки и обычные значения*/
    background: white;
}
.b-buy__feature_value.alaali{
    line-height: 40px; /*выравнивание картинки в блоке обычной характеристики*/
}
.b-buy__feature_values--color .b-buy__feature_value.alaali{
    line-height: 46px; /*выравнивание картинки в блоке характеристики цвет*/
}
.alaali_img{
    max-width: 44px;
    max-height: 44px;
} 
.alaali_img2{ 
    width: 30px; /*ширина картинки в закладке характеристик; высота обычно автоматическая*/
}
/**\ALAALI**/

3. Замените содержимое шаблона bem/shop/product/element/buy_features.html на следующий код:

{$default_sku_features = $product.sku_features}
{$feature_images = shopAlaaliHelper::getFeaturesImg($product.id)}
<div class="b-buy__features">
  {foreach $features_selectable as $f}
    <div class="b-buy__feature_block i-buy__feature_block">
      <div class="b-buy__feature_header">{$f.name}:</div>
      <div class="b-buy__feature_values b-buy__feature_values--{$f.type|escape}">
        {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 {if $f.type=='color'}title="{strip_tags($v)|escape}"{/if} class="i-buy__feature_value alaali b-buy__feature_value{if $v_id == $default_sku_features[$f.id]} selected{/if}" data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}" href="#">
              {$v_img}
              {if $f.type == 'color'}
                <i class="fa fa-check" aria-hidden="true"></i>
              {/if}
            </a>              
          {else}
          <a {if $f.type=='color'}title="{strip_tags($v)|escape}"{/if} class="i-buy__feature_value b-buy__feature_value{if $v_id == $default_sku_features[$f.id]} selected{/if}" data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}" href="#" {if $f.type == 'color'}style="{$v->style|escape}"{/if}>
            {if $f.type == 'color'}
              <i class="fa fa-check" aria-hidden="true"></i>
            {else}
              {$v}
            {/if}
          </a>
          {/if}
        {/foreach}
        <input type="hidden" data-feature-id="{$f.id}" class="i-buy__sku_feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
      </div>
    </div>
  {/foreach}
</div>

4. Замените содержимое шаблона bem/shop/product/element/features.html на следующий код:

<div class="b-product__features">
    <table class="b-product__features_table">
        {$feature_images2 = shopAlaaliHelper::getFeaturesImg_code($product.id,false)}
        {foreach $product.features as $f_code => $f_value}
            <tr class="{if $features[$f_code].type == 'divider'}divider{/if}">
                <td class="b-product__features_name">{$features[$f_code].name}</td>
                <td class="b-product__features_value">
                {if is_array($f_value)}
                    {if $features[$f_code].type == 'color'} 
                        {foreach $f_value as $v_id => $value} 
                            {if in_array($v_id,$feature_images2[$f_code]['id'])}
                                {$v_img = "<img src='"|cat:$feature_images2[$f_code]['img'][$v_id]|cat:"' title='"|cat:$feature_images2[$f_code]['value'][$v_id]|cat:"' class='alaali_img2' >"}
                                {$v_img} {$feature_images2[$f_code]['value'][$v_id]}<br />
                            {else}
                                <span>{$value}</span><br />
                            {/if}
                        {/foreach}
                    {else} 
                        {foreach $f_value as $v_id => $value} 
                            {if in_array($v_id,$feature_images2[$f_code]['id'])}
                                {$v_img = "<img src='"|cat:$feature_images2[$f_code]['img'][$v_id]|cat:"' title='"|cat:$feature_images2[$f_code]['value'][$v_id]|cat:"' class='alaali_img2' >"}
                                {$v_img} {$feature_images2[$f_code]['value'][$v_id]}{if !$value@last},{/if}
                            {else}
                                <span>{$value|escape}</span>{if !$value@last},{/if}
                            {/if}
                        {/foreach}
                    {/if}
                {else}
                    {assign var=v_id value=$f_value} 
                    {if !empty($feature_images2[$feature.code][$v_id])}
                        {$v_img = "<img src='"|cat:$feature_images2[$f_code][$v_id]['image']|cat:"' title='"|cat:$feature_images2[$f_code][$v_id]['value']|cat:"' class='alaali_img2' >"}
                        {$v_img} {$f_value|escape}<br />
                    {else} 
                        <span>{$f_value|escape}</span><br /> 
                    {/if}
                {/if}
                </td>
            </tr>
        {/foreach}
    </table>
</div>