Выпадающий список рекомендуемых товаров рядом с кнопкой купить на Opencart

Платформа: Opencart 3.0

DEMO

http://t.joypass.ru/index.php?route=product/category&path=24

Video

Идея реализации

Воспользуемся стандартным функционалом рекомендуемых товаров. В карточке товара админ-панели есть вкладка «связи». Перейти и найти блок

Все привязанные здесь товары будут загружаться в выпадающий список. Необходимые условия. У товара поле количество должно содержать значение >1, заполнена цена и заполнено описание следующим образом:

три текстовых блока с обязательным разделителем >

Бекенд

Модель

В файл catalog\model\catalog\product.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;
	}

Контроллер

В файле catalog\controller\product\category.php добавил немного кода для обращения к методу, добавленному выше.

$prelated_info  = $this->model_catalog_product->getProductRelatedForChoice($result['product_id']);

Получаемые данные вкладываем в массив товаров

            $data['products'][] = array(
                /*mycode_>*/'prelated_info'  => $prelated_info,/*<_mycode*/

Лицевая часть (вьюшка на twig)

В файл catalog\view\theme\default\template\product\category.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 поиск предка

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *