Опубликовано: 19 декабря 2017
вывод характеристик заданных "картинками как на Али" в списках товаров и в карточке
Здравствуйте, Игорь и Александр!
Пытался подключить вывод "картинок как на Али" в "Характеристиках в списках товаров"- не получается. Не подскажете, в чем может быть загвоздка?
Код "Характеристик" вставил, характеристики все отлично выводятся и в списках и в карточке.
Автор "Картинок" пишет, что все очень просто, код тоже вставил, но "картинки" не выводятся.
Думал, что надо обновить код установки "Картинок" в теме, но пробовал, - не помогло.
Снес, т.к. стилизация кнопок "ушла" а они мне нужны для кресел бренда "Директория".
Но вообще новый код странный , дважды один кусок повторяется.
Инструкция по обновлению вот:
http://stek-it.com/help/4/plagin-kartinki-kak-na-ali-tema-vygodnaya-pokupkaprofitbuy/
кстати, свежая.
Инструкция по интеграции "картинок как на Али" в "Характеристиках в списках товаров"https://www.webasyst.ru/store/plugin/shop/alaali/integratsiya-s-listfeatures/
Кстати, благодаря её в 2 клика можно сделать зум картинки при наведении мыши на характеристику, заданную картинкой и влияющую на выбор артикула...
https://algol-pk.ru/born-stol-b102/
если бы все работало, цвета бы дублировались бы второй раз.
А так планирую картинками задавать гарантию, характеристики, регулировки и получать нечто подобное.
или даже лучше...
Мне кажется решение для многих будет интересным.
Комментарии (1)
Здравствуйте!
Извините, но я не знаю кода и возможностей этого плагина - по рекомендациям автора
1. замените код
{if !empty($theme_settings.list_features)}
{$features = $wa->shop->features($products)}
{/if}
на
{$my_features = $wa->shop->features($products)}
2. замените код
{if 0 && !empty($p.features)}
<table class="features">
{foreach $p.features as $f_code => $f_value}
{if $f_code == 'tip_matritsy'}
<tr{if $features[$f_code].type == 'divider'} class="divider"{/if}>
<td class="name">
{$features[$f_code].name|escape}
</td>
<td class="value">
{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>
{/if}
{/foreach}
</table>
{/if}
на предложенный автором
{$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>
3. в начало файла добавьте
{*вспомогательные скрипты и стили*}
<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>