Рекомендуемые товары opencart списком рядом с кнопкой купить на Opencart
Платформа: Opencart 3.0
DEMO
http://t.joypass.ru/index.php?route=product/category&path=24
Video
Идея реализации
Воспользуемся стандартным функционалом рекомендуемых товаров. В карточке товара админ-панели есть вкладка «связи». Перейти и найти блок
Все привязанные здесь товары будут загружаться в выпадающий список. Необходимые условия. У товара поле количество должно содержать значение >1, заполнена цена и заполнено описание следующим образом:
Бекенд
Модель
В файл catalogmodelcatalogproduct.php добавил два метода для получения данных о рекомендуемых товаров
public function getProductRelatedForChoice($product_id) {
$product_data = array();
$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "product_related pr LEFT JOIN " . DB_PREFIX . "product p ON (pr.related_id = p.product_id) LEFT JOIN " . DB_PREFIX . "product_to_store p2s ON (p.product_id = p2s.product_id) WHERE pr.product_id = '" . (int)$product_id . "' AND p.date_available <= NOW() AND p.quantity>0 AND p2s.store_id = '" . (int)$this->config->get('config_store_id') . "'");
foreach ($query->rows as $result) {
$product_data[$result['related_id']] = $this->getProductForChoice($result['related_id']);
}
return $product_data;
}
public function getProductForChoice($product_id) {
$query = $this->db->query("SELECT DISTINCT * FROM " . DB_PREFIX . "product p LEFT JOIN " . DB_PREFIX . "product_description pd ON (p.product_id = pd.product_id) WHERE p.product_id = '" . (int)$product_id . "' AND pd.language_id = '" . (int)$this->config->get('config_language_id') . "'");
$result = $query->row;
$result['price'] = number_format($result['price'],0,'',' ').' р.';
$descitems = explode('>',strip_tags(html_entity_decode($result['description'])));
$result['type'] =isset($descitems[2]) ?$descitems[2]:'';
$result['time'] =isset($descitems[1]) ?$descitems[1]:'';
$result['data'] =isset($descitems[0]) ?$descitems[0]:'';
return $result;
}Контроллер
В файле catalogcontrollerproductcategory.php добавил немного кода для обращения к методу, добавленному выше.
$prelated_info = $this->model_catalog_product->getProductRelatedForChoice($result['product_id']);
Получаемые данные вкладываем в массив товаров
$data['products'][] = array(
/*mycode_>*/'prelated_info' => $prelated_info,/*<_mycode*/Лицевая часть (вьюшка на twig)
В файл catalogviewthemedefaulttemplateproductcategory.twig добавляю код визуализации
Стили
<style type="text/css">
.fm-module-price-choice {
background-color: #A82682;
height: 100%;
text-align: center;
}
.fm-module-price-choice,.fm-product-btn-choice {
position: relative;
z-index: 99;
}
.fm-module-price-choice.__hidden{
display: none;
}
.fm-module-price-choice.unfolded{
margin-bottom: 10px;
width: 260px;
cursor:pointer;
flex-direction: column;
height: 50px;
display: flex;
flex-wrap: wrap;
padding: 5px 0;
}
.fm-module-price-choice.unfolded .type img {
display: none;
}
.block-pricies
{
position: absolute;
top: 69px;
left: -15px;
z-index:99;
}
.fm-module-price-choice.available .block-time,.fm-module-price-choice.available .block-data,
.fm-module-price-choice.unavailable .block-time,.fm-module-price-choice.unavailable .block-data{
display: none;
}
.fm-category-product-caption>.row>.jp-pr-price>.fm-product-btn-choice {
width: 47% !important;
font-size: 14px !important;
}
.product-choice{
width: 50%;
color: #fff;
z-index: 99;
}
.overlay-choice {
z-index:3;
position:fixed;
background-color:#000;
opacity:0.4;
-moz-opacity:0.4;
filter:alpha(opacity=40);
width:100%;
height:100%;
top:0;
left:0;
cursor:pointer;
display:none;
}
.fm-module-price-choice.available {
cursor:pointer;
}
.fm-module-price-choice.available .type img,
.fm-module-price-choice.unavailable .type img {
cursor:pointer;
width: 12%;
margin: 2px;
}
.fm-module-price-choice.unfolded .type img {
display: none;
}
/* .fm-module-price-choice {
border-radius: 5px;
}*/
.fm-module-price-choice.available .type-text,
.fm-module-price-choice.unavailable .type-text
{
white-space: nowrap;
width: 80%;
overflow: hidden;
margin: 0 auto;
display: inline-flex;
}
.fm-category-btn-box.jp-pr-price {
display: flex;
}
.fm-category-btn-box.jp-pr-price > div,.fm-category-btn-box.jp-pr-price > button {
margin: 2px;
}
</style>Javascript
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','.overlay-choice',function() {
closeChoice($(this));
});
$(document).on('click','.fm-module-price-choice.available',function() {
if($(this).parent().find('.unfolded').length>0){
closeChoice($(this));
return;
}
$(this).parent().find('.fm-module-price-choice').removeClass('__hidden').addClass('unfolded');
$(this).removeClass('unfolded')
$(this).closest('.fm-module-item').css({'z-index':100});
$('.overlay-choice').fadeIn(400);
});
$(document).on('click','.fm-module-price-choice.unfolded',function() {
$(this).parent().parent().find('.fm-module-price-choice.available').html($(this).html()).data('relproduct-id',$(this).data('relproduct-id'));
closeChoice($(this));
});
$(document).on('click','.fm-product-btn',function() {
cart.add($(this).parent().find('.product-choice .available').data('relproduct-id'),1);
});
function closeChoice(element) {
element.parent().find('.fm-module-price-choice.unfolded').removeClass('unfolded').addClass('__hidden');
element.closest('.fm-module-item').css({'z-index':''});
$('.overlay-choice').fadeOut(400);
}
});
</script>Html
<div class="product-choice pro-{{product.product_id}}">
{% set breakLoop = false %}
{% for relaitem_begin in product.prelated_info if breakLoop == false %}
<div data-product-id="{{product.product_id}}" data-relproduct-id="{{relaitem_begin.product_id}}" class="fm-module-price-choice available">{{relaitem_begin.price}}
<div class="type"><div class="type-text">{{relaitem_begin.type}}</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAATCAYAAABsmQZ/AAABN2lDQ1BBZG9iZSBSR0IgKDE5OTgpAAAokZWPv0rDUBSHvxtFxaFWCOLgcCdRUGzVwYxJW4ogWKtDkq1JQ5ViEm6uf/oQjm4dXNx9AidHwUHxCXwDxamDQ4QMBYvf9J3fORzOAaNi152GUYbzWKt205Gu58vZF2aYAoBOmKV2q3UAECdxxBjf7wiA10277jTG+38yH6ZKAyNguxtlIYgK0L/SqQYxBMygn2oQD4CpTto1EE9AqZf7G1AKcv8ASsr1fBBfgNlzPR+MOcAMcl8BTB1da4Bakg7UWe9Uy6plWdLuJkEkjweZjs4zuR+HiUoT1dFRF8jvA2AxH2w3HblWtay99X/+PRHX82Vun0cIQCw9F1lBeKEuf1UYO5PrYsdwGQ7vYXpUZLs3cLcBC7dFtlqF8hY8Dn8AwMZP/fNTP8gAAAAJcEhZcwAACxMAAAsTAQCanBgAAAr5aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA2LjAtYzAwMiA3OS4xNjQ0NjAsIDIwMjAvMDUvMTItMTY6MDQ6MTcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA0LTIzVDAxOjEyOjM4KzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNC0yM1QwMToxODo0NCswMzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wNC0yM1QwMToxODo0NCswMzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZjBmNTc1ZDgtNmI3NS1kYjRmLTk4ZjUtZmUzZDBjNWY3YmM2IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6Y2Y3MmIzYTYtZjNjOS1jNTRmLWJhMjgtZDFiZWJjOTdkMTI5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Njg2OTJkZDUtODk3Ny1lNTQwLWFlODktZDcyZGFlZDc5MGRmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo2ODY5MmRkNS04OTc3LWU1NDAtYWU4OS1kNzJkYWVkNzkwZGYiIHN0RXZ0OndoZW49IjIwMjEtMDQtMjNUMDE6MTI6MzgrMDM6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4yIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Yjg1OWVkZTYtNTdhMy0yNTQ3LWJhM2YtYmQ2MWU5NDRlZjA2IiBzdEV2dDp3aGVuPSIyMDIxLTA0LTIzVDAxOjE3OjE2KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBpbWFnZS9wbmcgdG8gYXBwbGljYXRpb24vdm5kLmFkb2JlLnBob3Rvc2hvcCIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iZGVyaXZlZCIgc3RFdnQ6cGFyYW1ldGVycz0iY29udmVydGVkIGZyb20gaW1hZ2UvcG5nIHRvIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjM5OTJjOWZiLThhNGMtYzQ0Ni04ZTJkLTNhNTBjMDgxMWFkYSIgc3RFdnQ6d2hlbj0iMjAyMS0wNC0yM1QwMToxNzoxNiswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5YjExNjljYi0yNjc4LTE4NDYtOWU2OS00MDI3ZmQyYTdiYjYiIHN0RXZ0OndoZW49IjIwMjEtMDQtMjNUMDE6MTg6NDQrMDM6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4yIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZjBmNTc1ZDgtNmI3NS1kYjRmLTk4ZjUtZmUzZDBjNWY3YmM2IiBzdEV2dDp3aGVuPSIyMDIxLTA0LTIzVDAxOjE4OjQ0KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjliMTE2OWNiLTI2NzgtMTg0Ni05ZTY5LTQwMjdmZDJhN2JiNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOTkyYzlmYi04YTRjLWM0NDYtOGUyZC0zYTUwYzA4MTFhZGEiIHN0UmVmOm9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2ODY5MmRkNS04OTc3LWU1NDAtYWU4OS1kNzJkYWVkNzkwZGYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dsJfUAAAB7ElEQVRIiZXW22rVQBQG4JXJJvNEoheK4nN4aLHVFrVSKp5QEcQ3ENGqoKKv4J2XPkVvfAeHrKzDzPLCZJOmyc7kh9zsTPaXfxJmUogIFEUBZgaqetU598vMXpZl+br7fWmKooCUEgDAm5TSsxjjRe/9bwD4/3+qCiICiHhJRMzMLMZoiHjIzOvzuYeqAjMDET1NKZmZGRFpCOGcqoKqAogI1HV9pQO7tPDRErgHvujALkRkIYQLqgqAiJeZ2caSUspuPNZwGCLSuq7PAyL+GR1xuvHDTXAPfD4FdkHEE0DERzHGjQM3wUtAVTVEfADMDIh4MAePTXXOlPbBEMJtZob1hYi4l9n4CTNDjLEDX82BImIhhK3uhk/dMSLey4QPmqYBInqc2XCnc0QEzjwbRLw7B6vq36ZpfqaUMKPhreG7MPpSIOLuHDyXtuGNfsPucP3ly8zAOQdlWX5k5vvtUrY4qgpN0+x677+NLaVueEEPfsvMd5bCqgpEdL2qqk9Ta/cZdAAfE1E23II3vfffnXOTm8Uo2odXq9UxEe3PwS24PTWlWegAfk9EO1NwC17z3n/J2Q43ogP4MxHtxRjHwC3v/Y/c/XcWHcAfmHnduNfw65INvxCRrIEAsP7CiDHum9m7lNJ2VVVZU9rPP8lHwE3i4nXuAAAAAElFTkSuQmCC"></div>
<div class="block-data">{{relaitem_begin.data}}</div>
<div class="block-time">{{relaitem_begin.time}}</div>
</div>
{% set breakLoop = true %}
{% endfor %}
<div class="overlay-choice"></div>
<div class="block-pricies">
{% for relaitem in product.prelated_info %}
<div data-product-id="{{product.product_id}}" data-relproduct-id="{{relaitem.product_id}}" class="fm-module-price-choice __hidden">{{relaitem.price}}
<div class="block-time">{{relaitem.time}}</div>
<div class="block-data">{{relaitem.data}}</div>
<div class="type"><div class="type-text">{{relaitem.type}}</div><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAATCAYAAABsmQZ/AAABN2lDQ1BBZG9iZSBSR0IgKDE5OTgpAAAokZWPv0rDUBSHvxtFxaFWCOLgcCdRUGzVwYxJW4ogWKtDkq1JQ5ViEm6uf/oQjm4dXNx9AidHwUHxCXwDxamDQ4QMBYvf9J3fORzOAaNi152GUYbzWKt205Gu58vZF2aYAoBOmKV2q3UAECdxxBjf7wiA10277jTG+38yH6ZKAyNguxtlIYgK0L/SqQYxBMygn2oQD4CpTto1EE9AqZf7G1AKcv8ASsr1fBBfgNlzPR+MOcAMcl8BTB1da4Bakg7UWe9Uy6plWdLuJkEkjweZjs4zuR+HiUoT1dFRF8jvA2AxH2w3HblWtay99X/+PRHX82Vun0cIQCw9F1lBeKEuf1UYO5PrYsdwGQ7vYXpUZLs3cLcBC7dFtlqF8hY8Dn8AwMZP/fNTP8gAAAAJcEhZcwAACxMAAAsTAQCanBgAAAr5aVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA2LjAtYzAwMiA3OS4xNjQ0NjAsIDIwMjAvMDUvMTItMTY6MDQ6MTcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA0LTIzVDAxOjEyOjM4KzAzOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNC0yM1QwMToxODo0NCswMzowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMS0wNC0yM1QwMToxODo0NCswMzowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ZjBmNTc1ZDgtNmI3NS1kYjRmLTk4ZjUtZmUzZDBjNWY3YmM2IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6Y2Y3MmIzYTYtZjNjOS1jNTRmLWJhMjgtZDFiZWJjOTdkMTI5IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Njg2OTJkZDUtODk3Ny1lNTQwLWFlODktZDcyZGFlZDc5MGRmIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo2ODY5MmRkNS04OTc3LWU1NDAtYWU4OS1kNzJkYWVkNzkwZGYiIHN0RXZ0OndoZW49IjIwMjEtMDQtMjNUMDE6MTI6MzgrMDM6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4yIChXaW5kb3dzKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Yjg1OWVkZTYtNTdhMy0yNTQ3LWJhM2YtYmQ2MWU5NDRlZjA2IiBzdEV2dDp3aGVuPSIyMDIxLTA0LTIzVDAxOjE3OjE2KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNvbnZlcnRlZCIgc3RFdnQ6cGFyYW1ldGVycz0iZnJvbSBpbWFnZS9wbmcgdG8gYXBwbGljYXRpb24vdm5kLmFkb2JlLnBob3Rvc2hvcCIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iZGVyaXZlZCIgc3RFdnQ6cGFyYW1ldGVycz0iY29udmVydGVkIGZyb20gaW1hZ2UvcG5nIHRvIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjM5OTJjOWZiLThhNGMtYzQ0Ni04ZTJkLTNhNTBjMDgxMWFkYSIgc3RFdnQ6d2hlbj0iMjAyMS0wNC0yM1QwMToxNzoxNiswMzowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo5YjExNjljYi0yNjc4LTE4NDYtOWU2OS00MDI3ZmQyYTdiYjYiIHN0RXZ0OndoZW49IjIwMjEtMDQtMjNUMDE6MTg6NDQrMDM6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4yIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZjBmNTc1ZDgtNmI3NS1kYjRmLTk4ZjUtZmUzZDBjNWY3YmM2IiBzdEV2dDp3aGVuPSIyMDIxLTA0LTIzVDAxOjE4OjQ0KzAzOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjliMTE2OWNiLTI2NzgtMTg0Ni05ZTY5LTQwMjdmZDJhN2JiNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozOTkyYzlmYi04YTRjLWM0NDYtOGUyZC0zYTUwYzA4MTFhZGEiIHN0UmVmOm9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2ODY5MmRkNS04OTc3LWU1NDAtYWU4OS1kNzJkYWVkNzkwZGYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7dsJfUAAAB7ElEQVRIiZXW22rVQBQG4JXJJvNEoheK4nN4aLHVFrVSKp5QEcQ3ENGqoKKv4J2XPkVvfAeHrKzDzPLCZJOmyc7kh9zsTPaXfxJmUogIFEUBZgaqetU598vMXpZl+br7fWmKooCUEgDAm5TSsxjjRe/9bwD4/3+qCiICiHhJRMzMLMZoiHjIzOvzuYeqAjMDET1NKZmZGRFpCOGcqoKqAogI1HV9pQO7tPDRErgHvujALkRkIYQLqgqAiJeZ2caSUspuPNZwGCLSuq7PAyL+GR1xuvHDTXAPfD4FdkHEE0DERzHGjQM3wUtAVTVEfADMDIh4MAePTXXOlPbBEMJtZob1hYi4l9n4CTNDjLEDX82BImIhhK3uhk/dMSLey4QPmqYBInqc2XCnc0QEzjwbRLw7B6vq36ZpfqaUMKPhreG7MPpSIOLuHDyXtuGNfsPucP3ly8zAOQdlWX5k5vvtUrY4qgpN0+x677+NLaVueEEPfsvMd5bCqgpEdL2qqk9Ta/cZdAAfE1E23II3vfffnXOTm8Uo2odXq9UxEe3PwS24PTWlWegAfk9EO1NwC17z3n/J2Q43ogP4MxHtxRjHwC3v/Y/c/XcWHcAfmHnduNfw65INvxCRrIEAsP7CiDHum9m7lNJ2VVVZU9rPP8lHwE3i4nXuAAAAAElFTkSuQmCC"></div>
</div>
{% endfor %}
</div>
</div>
<button type="button" class="fm-product-btn fm-product-btn-choice"><span>КУПИТЬ</span></button>пометки: подложка кликов, условный цикл twig, img base64, fadein, fadeout, closest поиск предка
