Картинки как на Али

Картинки как на Али для Shop-Script

Изображения характеристик товара

25 оценок

Ваш отзыв
Установок
300+
Разработчик
Поддержка
Видео работы кода на примере темы Default3

Внимание! Для правильной работы, необходимо в шаблон list-thumbs.html(или его аналог) добавить вызов
{$my_features = $wa->shop->features($products)} - добавляет в $products массив features для каждого товара

В теме Default3 это можно сделать с помощью настройки темы дизайна "Показывать значения характеристик в списках товаров". При это будет выводится отдельный блок характеристик, независимый от плагина listfeatures. Тоже самое есть и в некоторых других темах дизайна.
Если есть скрыте характеристики, то, чтобы их вывести на витрину необходимо добавить параметр false
{$my_features = $wa->shop->features($products, false)}



Версия плагина "Картинки как на Али" до 1.1.5
================================================================================
Код шаблона для плагина listfeatures:

{$feature_images = shopAlaaliHelper::getFeaturesImg_code($product.id, true, true)}{*получение изображений характеристик*}
{$feature_limit = 3}{*кол-во выводимых значений, остальные прячутся под ...*}
<table class="features listfeatures{if $set.class_name|default:''} {$set.class_name}{/if}">
 <tbody>
  {foreach $features as $feature}
   <tr{if $feature.class_names} class="{$feature.class_names}"{/if}>
    <td class="name">{$feature.name}</td>{*вывод названия характеристики. если не нужно- удалить эту строку*}
    <td style='position: relative;'>
    {if !empty($feature_images[$feature.code]['img'])}
     {*это вывод значений характеристик, в случае наличия изображений*}
     {foreach $product.features[$feature.code] as $v_id=>$v name=alaali}
      {if $smarty.foreach.alaali.iteration > $feature_limit}
       {$hide_icon = "display: none;"}
      {else}
       {$hide_icon = "display: inline-block;"}
      {/if}
      {if in_array($v_id,$feature_images[$feature.code]['id'])}
{$v_img = "<img src='"|cat:$feature_images[$feature.code]['img'][$v_id]|cat:"' title='"|cat:$feature_images[$feature.code]['value'][$v_id]|cat:"' class='alaali-zoom' style='vertical-align: top;width: auto; height:20px;margin-bottom: 2px;$hide_icon'/>"}
       {$v_img}
      {else}
       {if $feature.type == 'color'}
        <i class="icon16 color" style="{$v->style}{$hide_icon}" title="{strip_tags($v)}"></i>
       {else}
        {$v} 
       {/if}
      {/if}
     {/foreach}
     {if count( $product.features[$feature.code]) > $feature_limit}
      <a href="#" class="alaali-more">...</a>
     {/if}
    </td>
    {else}
     {*это стандартный вывод плагина listfeatures*}
     <td class="value">{$feature.values}</td>
    {/if}
   </tr>
  {/foreach}
 </tbody>
</table>

{*вспомогательные скрипты и стили*}
<script>
 {literal}
 $(document).ready(function () {
  $('.alaali-more').click(function () {
   $(this).parent().find('i, img').css('display', 'inline-block');
   $(this).remove();
   return false;
  });
  
  $('.alaali-zoom').hover(
  function () {
   var img_src = $(this).attr("src");
   var img_title = $(this).attr("title");
   $(this).parent().find('.alaali-zoom-wrapper').remove();
   $(this).after("<div class='alaali-zoom-wrapper'><div class='main'><img src='"+img_src+"'><div class='feature-name'>"+img_title+"</div></div></div>");
   $(this).parent().find('.alaali-zoom-wrapper').fadeIn(100);
  },
  function () {
   $(this).parent().find('.alaali-zoom-wrapper').fadeOut(100).remove();
  }
  );
 });
 {/literal}
</script>
<style>
.alaali-more{
 vertical-align: bottom;
}
.alaali-zoom-wrapper{
 display: none;
 width: 200px;
 height: 220px;
 position: absolute;
 top: -220px;
 left: 0px;
 z-index: 5000;
 text-align: center;
}
.alaali-zoom-wrapper .main {
 border: 1px solid grey;
 padding-top: 10px;
 width: 200px;
 height: 210px;
 background-color: #FFF;
}
.alaali-zoom-wrapper .main .feature-name{

}
.alaali-zoom-wrapper .main img{
 width: 170px;
 height: 170px;
}
</style>
================================================================================


Версия плагина "Картинки как на Али" 1.1.5 и больше
================================================================================
Код шаблона для плагина listfeatures:

{$feature_images = shopAlaaliHelper::getImg($product)}{*получение изображений характеристик*}
{$feature_limit = 3}{*кол-во выводимых значений, остальные прячутся под ...*}
<table class="features listfeatures{if $set.class_name|default:''} {$set.class_name}{/if}">
 <tbody>
 {foreach $features as $feature}
  <tr{if $feature.class_names} class="{$feature.class_names}"{/if}>
  <td style='position: relative;'>
  {if !empty($feature_images[$feature.code])}
   {*это вывод значений характеристик, в случае наличия изображений*}
   {foreach $product.features[$feature.code] as $v_id=>$v name=alaali}
    {if $smarty.foreach.alaali.iteration > $feature_limit}
     {$hide_icon = "display: none;"}
    {else}
     {$hide_icon = "display: inline-block;"}
    {/if}
    {if !empty($feature_images[$feature.code][$v_id])}
     {$v_img = "<img src='"|cat:$feature_images[$feature.code][$v_id]['image']|cat:"' title='"|cat:$feature_images[$feature.code][$v_id]['value']|cat:"' class='alaali-zoom' style='vertical-align: top;width: auto;height:20px;margin-bottom: 2px;$hide_icon'/>"}
     {$v_img}
    {else}
     {if $feature.type == 'color'}
      <i class="icon16 color" style="{$v->style}{$hide_icon}" title="{strip_tags($v)}"></i>
     {else}
      {$v}
     {/if}
    {/if}
   {/foreach}
   {if count( $product.features[$feature.code]) > $feature_limit}
    <a href="#" class="alaali-more">...</a>
   {/if}
  </td>
  {else}
   {*это стандартный вывод плагина listfeatures*}
   <td class="value">{$feature.values}</td>
  {/if}
 </tr>
 {/foreach}
 </tbody>
</table>

{*вспомогательные скрипты и стили*}
<script>
{literal}
$(document).ready(function () {
$('.alaali-more').click(function () {
$(this).parent().find('i, img').css('display', 'inline-block');
$(this).remove();
return false;
});

$('.alaali-zoom').hover(
function () {
var img_src = $(this).attr("src");
var img_title = $(this).attr("title");
$(this).parent().find('.alaali-zoom-wrapper').remove();
$(this).after("<div class='alaali-zoom-wrapper'><div class='main'><img src='"+img_src+"'><div class='feature-name'>"+img_title+"</div></div></div>");
$(this).parent().find('.alaali-zoom-wrapper').fadeIn(100);
},
function () {
$(this).parent().find('.alaali-zoom-wrapper').fadeOut(100).remove();
}
);
});
{/literal}
</script>
<style>
.alaali-more{
vertical-align: bottom;
}
.alaali-zoom-wrapper{
display: none;
width: 200px;
height: 220px;
position: absolute;
top: -220px;
left: 0px;
z-index: 5000;
text-align: center;
}
.alaali-zoom-wrapper .main {
border: 1px solid grey;
padding: 10px;
width: 200px;
height: 210px;
background-color: #FFF;
}
.alaali-zoom-wrapper .main .feature-name{

}
.alaali-zoom-wrapper .main img{
width: 170px;
height: 170px;
}
</style>
================================================================================