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

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

2. Добавьте в конец файла/шаблона user.css

/**ALAALI**/
  .product_page .options .inline-select.color a{
    vertical-align: middle;
}
.options .inline-select>a.alaali{ 
    padding: 2px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    vertical-align: top;    
} 
.options .inline-select>a.alaali.selected{
    background-color: white !important;
}
.alaali_img{
    border-radius: 3px; 
    width: 40px; /*ширина картинки выбираемой характеристики*/
    height: 40px; /*высота картинки выбираемой характеристики*/
} 
.alaali_img2{ 
    border: 0px solid rgba(0,0,0,0.2); 
    width: 20px; /*ширина картинки в закладке характеристик; высота обычно автоматическая*/
}
/**\ALAALI**/

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-fix{else} inline-no-color{/if}">
                        <div class="name">{$f.name}: <span class="sku-selectable">{foreach $f.values as $v_id => $v}{if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}{if $v_id == ifset($default_sku_features[$f.id])}{strip_tags($v)}{/if}{/foreach}</span></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}" data-name="{strip_tags($v)}" 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 $f.type == 'color'} <i class="icon16 checkmark 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-fix{else} inline-no-color{/if}">
        <div class="name">{$f.name}: <span class="sku-selectable">{foreach $f.values as $v_id => $v}{if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}{if $v_id == ifset($default_sku_features[$f.id])}{strip_tags($v)}{/if}{/foreach}</span></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}" data-name="{strip_tags($v)}" href="#" class="alaali{if $v_id == ifset($default_sku_features[$f.id])} selected{/if}">
                                           {$v_img}
                                        {if $f.type == 'color'} <span class="color_name">{strip_tags($v)}</span>{else}{$v}{/if}
                </a>
            {else}
                <a data-value="{$v_id}" data-name="{strip_tags($v)}" 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 $f.type == 'color'} <i class="icon16 checkmark 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}

ТО ЖЕ САМОЕ НУЖНО СДЕЛАТЬ В ШАБЛОНЕ product.html! Найти точно такой же блок кода и исправить!
В этой теме дизайна product.cart.html используется только для "быстрого просмотра" товара из каталога. А такой же блок кода в pruduct.html - это основной шаблон "выбираемых характеристик" в карточке товара.

4. Дополнительно отредактируйте шаблон product.html(закладка характеристик)

найдите код

               <div id="features" class="panel-collapse collapse {if $theme_settings.product_tabs == 2}in{/if} product-tabs">
                    <div class="panel-body">
                        <!-- product features -->
                        {if $product.features}
                        <dl class="expand-content">
                            {foreach $product.features as $f_code => $f_value}
                            <dt{if $features[$f_code].type == 'divider'} class="divider"{/if}>{$features[$f_code].name|escape}</dt>
                            <dd{if $features[$f_code].type == 'divider'} class="divider"{/if}>
                            {if is_array($f_value)}
                            {if $features[$f_code].type == 'color'}
                            {implode('
 ', $f_value)}
                            {else}
                            {implode(', ', $f_value)}
                            {/if}
                            {else}
                            {$f_value}
                            {/if}
                            </dd>
                            {/foreach}
                        </dl>
                        {/if}
                    </div>
                </div>

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

                <div id="features" class="panel-collapse collapse {if $theme_settings.product_tabs == 2}in{/if} product-tabs">
                    <div class="panel-body">
                        <!-- product features -->
                        {if $product.features}
                        {$feature_images2 = shopAlaaliHelper::getFeaturesImg_code($product.id,false)}
                        <dl class="expand-content">
                            {foreach $product.features as $f_code => $f_value}
                            <dt{if $features[$f_code].type == 'divider'} class="divider"{/if}>{$features[$f_code].name|escape}</dt>
                            <dd{if $features[$f_code].type == 'divider'} class="divider"{/if}>
                            {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[$f_code][$v_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} {$f_value|escape}<br />
                                {else} 
                                    <span>{$f_value|escape}</span><br /> 
                                {/if} 
                            {/if}
                            </dd>
                            {/foreach}
                        </dl>
                        {/if}
                    </div>
                </div>

Опубликовано: 19 января 2018

Николай Иванов СТЭК

alaali, topshop

Эта статья была полезна? Да Нет

ИТ-компания СТЭК

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

0 комментариев

Добавить комментарий