Для темы версии не ниже 1.4.1.
В данной теме дизайна картинки выводим только для блока выбираемых характерстик с зумом.
1. Отредактируйте шаблон css/user.css, добавьте в самый конец
.alaali-img{width: 32px;height: auto;border-radius: 2px;}
.alaali a{padding: 2px; font-size:0;display: inline-block;vertical-align: top;position: relative;}
.alaali-zoom-wrapper{ display: none; width: 280px; height: 300px; position: absolute; top: -255px; left: 0px; z-index: 5000; text-align: center;}
.alaali-zoom-wrapper .main { border: 1px solid grey; padding-top: 10px; width: 220px; height: 250px; background-color: #FFF;}
.alaali-zoom-wrapper .main .feature-name{font-size: 12px;}
.alaali-zoom-wrapper .main img{ width: 200px; height: auto;max-height: 200px;}
2. Отредактируйте шаблон product.cart.html
найдите код
{foreach $features_selectable as $f}
...
{/foreach}
и замените на
{foreach $features_selectable as $f}
<div class="options__wrapper">
<div class="options__head">
<h3 class="options__title">{$f.name}</h3>
<a class="options__mobile-toggle" href="#"><span class="icon-options-toogle"></span><span class="icon-options-toogle"></span></a>
</div>
<div class="options__content">
{if $theme_settings.shop_productpage_selectable_features_control == 'select'}
<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>
<br><br>
{else}
{if $f.type == 'color'}
<ul class="options__color-list">
{foreach $f.values as $v_id => $v}
{if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}
{$v_img = shopAlaaliHelper::getImgHtml($product.id, $f.id, $v_id, 0, "alaali-img")}
{if $v_img}
<li class="options__buttons-item{if $v_id == ifset($default_sku_features[$f.id])} active{/if} alaali" data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}">
<a class="options__buttons-link" href="#">{$v_img}</a>
</li>
{else}
<li class="options__color-item tooltip-container{if $v_id == ifset($default_sku_features[$f.id])} active{/if}" style="{$v->style}" data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}">
<span class="options__color-text">{strip_tags($v)}</span>
<div class="tooltip-content">{strip_tags($v)}</div>
</li>
{/if}
{/foreach}
</ul>
<input type="hidden" data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
{else}
<div class="options__buttons">
<ul class="options__buttons-list">
{foreach $f.values as $v_id => $v}
{if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}
{$v_img = shopAlaaliHelper::getImgHtml($product.id, $f.id, $v_id, 0, "alaali-img")}
{if $v_img}
<li class="options__buttons-item{if $v_id == ifset($default_sku_features[$f.id])} active{/if} alaali" data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}">
<a class="options__buttons-link" href="#">{$v_img}</a>
</li>
{else}
<li class="options__buttons-item{if $v_id == ifset($default_sku_features[$f.id])} active{/if}" data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}">
<a class="options__buttons-link" href="#">{$v}</a>
</li>
{/if}
{/foreach}
</ul>
<input type="hidden" data-feature-id="{$f.id}" class="sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
</div>
{/if}
{/if}
</div>
</div>
{/foreach}
3. Отредактируйте шаблон product.js.
В самом конце этого шаблона добавьте код
$(document).ready(function () {
$('.alaali').hover(
function () {
var img_src = $(this).find(".alaali-img").attr("src");
var img_title = $(this).find(".alaali-img").attr("title");
$(this).find('.alaali-zoom-wrapper').remove();
$(this).find("a").append("<div class='alaali-zoom-wrapper'><div class='main'><img src='"+img_src+"'><div class='feature-name'>"+img_title+"</div></div></div>");
$(this).find('.alaali-zoom-wrapper').fadeIn(100);
},
function () {
$(this).parent().find('.alaali-zoom-wrapper').fadeOut(100).remove();
}
);
});
0 комментариев