Все темы → Плагин "Картинки как на АЛИ" →

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

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}

Опубликовано: 28 ноября 2016
Николай Иванов СТЭК
alaali, Picco Shop
Эта статья была полезна? Да Нет

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

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

    Чтобы добавить комментарий, зарегистрируйтесь или войдите