1. По умолчанию, в данной теме дизайна вывод "Выбираемых характеристик" сделан только выпадющим списком. Поэтому, чтобы сделать вывод ихображений характеристик, нужно сначала переделать шаблон на вывод "Выбираемых характеристик" в виде кнопок. Для этого надо исправить шаблон product.cart.html. Закоментировать вывод в виде списка и добавить вывод в виде кнопок.
Данное исправление было сделано разработчиками дизайна Picco Shop. Если у вас при измении что-то не работает, обратитесь к разработчику темы!
{if $product.sku_type}<!-- SELECTABLE FEATURES selling mode -->
{$default_sku_features = $product.sku_features}
{$product_available = $product.status}
{* На селектах *}
{*
<div class="options">
{foreach $features_selectable as $f}
<div class="sku_block">
<b>{$f.name}</b>:
<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 class="clearfix"></div>
</div>
{/foreach}
</div>
*}
{* / на селектах*}
{* inline *}
<div class="options">
{foreach $features_selectable as $f}
<div class="inline-select{if $f.type == 'color'} color-select{/if}">
<b>{$f.name}</b>:<br>
{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="#" class="{if $f.type == 'color'} color bstooltip{else} btn{/if}{if $v_id == ifset($default_sku_features[$f.id])} active{/if}"{if $f.type == 'color'} style="{$v->style};" title="{strip_tags($v)}"{/if}>
<span>{if $f.type !== 'color'}{$v}{/if}</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>
<br>
{/foreach}
</div>
<div class="clearfix"></div>
{* / inline*}
{else}
2. Создайте файл alaali.css в теме дизайна магазина.
Содержимое файла:
.productcartholder .options .inline-select a.color{
vertical-align: middle;
}
.options .inline-select a.alaali{
display: inline-block;
border-radius: 4px;
}
.options .inline-select a.alaali.active{
box-shadow: 0 0 2px 2px #6d6d6d;
}
.options .inline-select>a.alaali{
margin-right: 4px;
}
.alaali_img{
border-radius: 4px;
width: 38px;
height: 30px;
}
.alaali_img2{
width: 38px;
margin: 1px;
}
3. Подключить этот файл стилей в 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}">
4. Отредактируйте шаблон product.cart.html
найдите код
{* inline *}
<div class="options">
{foreach $features_selectable as $f}
<div class="inline-select{if $f.type == 'color'} color-select{/if}">
<b>{$f.name}</b>:<br>
{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="#" class="{if $f.type == 'color'} color bstooltip{else} btn{/if}{if $v_id == ifset($default_sku_features[$f.id])} active{/if}"{if $f.type == 'color'} style="{$v->style};" title="{strip_tags($v)}"{/if}>
<span>{if $f.type !== 'color'}{$v}{/if}</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>
<br>
{/foreach}
</div>
<div class="clearfix"></div>
{* / inline*}
и исправьте на
{* inline *}
{$feature_images = shopAlaaliHelper::getFeaturesImg($product.id)}
<div class="options">
{foreach $features_selectable as $f}
<div class="inline-select{if $f.type == 'color'} color-select{/if}">
<b>{$f.name}</b>:<br>
{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])} active{/if}">{$v_img}</a>
{else}
<a data-value="{$v_id}" href="#" class="{if $f.type == 'color'} color bstooltip{else} btn{/if}{if $v_id == ifset($default_sku_features[$f.id])} active{/if}"{if $f.type == 'color'} style="{$v->style};" title="{strip_tags($v)}"{/if}>
<span>{if $f.type !== 'color'}{$v}{/if}</span>
</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>
<br>
{/foreach}
</div>
<div class="clearfix"></div>
{* / inline*}
5. Отредактируйте шаблон product.html
найдите код:
<!--product.features-->
{if $product.features}
<div style="width: 100%; height: 20px;"></div>
<h3 class="title-bg align-center margin-b">[`Features`]</h3>
<table class="features-table table table-hover">
{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('<br /> ', $f_value)}
{else}
{implode(', ', $f_value)}
{/if}
{else}
{$f_value}
{/if}
</td>
</tr>
{/foreach}
</table>
{/if}
и исправьте на
{if $product.features}
<div style="width: 100%; height: 20px;"></div>
<h3 class="title-bg align-center margin-b">[`Features`]</h3>
{$feature_images = shopAlaaliHelper::getFeaturesImg_code($product.id,false)}
<table class="features-table table table-hover">
{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>
{/if}
0 комментариев