{% extends 'layout.html.twig' %}
{% block title %}{{ seoBag.metaTitle }}{% endblock %}
{% block description %}{{ seoBag.metaDescription }}{% endblock %}
{% block image %}https://perina-peroni.ru{{ products_original_web_dir ~ product.mainImage }}{% endblock %}
{% block body %}
<section class="product-card">
<div class="breadcrumbs">
{% for item in breadCrumbs.items %}
{% if loop.last %}
<span class="breadcrumbs__last-item">{{ item.title }}</span>
{% else %}
<a href="{{ item.url }}">{{ item.title }}</a>
{% endif %}
{% endfor %}
</div>
<div class="product-card__main">
<div class="product-card__preview-img">
<div class="product-card__preview-img-col" id="js-product-img-slider">
{% for img in product.images %}
{% if img|length %}
<a href="{{ products_original_web_dir ~ img }}"
class="js-img" data-rel="product">
<img src="{{ products_small_web_dir ~ img }}" alt="{{ product.name }}">
</a>
{% endif %}
{% endfor %}
</div>
{% if product.images|length > 3 %}
<a href="#" class="arrow-circle product-card__main-arrow-down" id="js-arrow-down">
<div class="long-arrow-left"></div>
</a>
{% endif %}
</div>
<div class="product-card__img">
{% if product.mainImage|length %}
<a href="{{ products_original_web_dir ~ product.mainImage }}"
class="js-img" data-rel="product">
<img src="{{ products_card_web_dir ~ product.mainImage }}"
alt="{{ product.name }}" data-hover-slides="{{ additionalImagesToStr(product) }}">
</a>
{% else %}
<img src="{{ asset('img/noimage.gif') }}" alt="{{ product.name }}">
{% endif %}
<div style="position: absolute;top: 7px;">
{% for label in labels %}
<span class="product-item__label {{ label.class }}" style="background: {{label.color }} !important;">{{ label.text }}</span>
{% endfor %}
</div>
{# {% if product.discountPercent and isAllowedMarker('discount') %}#}
{# <span class="product-item__label product-item__label--discount">#}
{# -{{ product.discountPercent }}%#}
{# </span>#}
{# {% elseif product.onDemand %}#}
{# <span class="product-item__label product-item__label--demand">Только онлайн</span>#}
{# {% elseif product.hit and isAllowedMarker('hit') %}#}
{# <span class="product-item__label product-item__label--hit">Хит</span>#}
{# {% elseif product.new and isAllowedMarker('new') %}#}
{# <span class="product-item__label">Новинка</span>#}
{# {% elseif product.littleRemains and isAllowedMarker('remains') %}#}
{# <span class="product-item__label product-item__label--little-remains">Осталось мало!</span>#}
{# {% endif %}#}
<div style="margin-top: 9px;">Цветопередача монитора/дисплея может искажать цвет изделия.</div>
</div>
<div class="product-card__info">
<h1 class="product-card__title">{{ product.commonGroupName|default(product.name) }}</h1>
<div class="product-card__second-row">
<span class="product-card__second-row-sku">ID: {{ product.id }}</span>
{% include 'catalog/product/product.score.row.html.twig' %}
<a href="#js-review-block"
class="product-card__second-row-reviews">{{ product.reviewsNumber|reviewPlural }}</a>
</div>
<div class="product-card__price-row">
<div class="product-card__price-row-prices">
<span class="product-card__price">{{ product.price|priceNice }} ₽</span>
{% if product.oldPrice %}
<span class="product-card__old-price">{{ product.oldPrice|priceNice }} ₽</span>
{% endif %}
</div>
{% if currentCustomer.inFavorites(product.id) %}
<a href="#" data-url="{{ path('toggle_favorites',{'id':product.id}) }}"
class="product-item__favorite-in" data-content="Удалить из избранного"></a>
{% else %}
<a href="#" data-url="{{ path('toggle_favorites',{'id':product.id}) }}" data-id="{{ product.id }}"
data-price="{{ product.price }}"
class="product-item__favorite" data-content="Добавить в избранное"></a>
{% endif %}
</div>
{% if dolyamiPayment is not null %}
<a href="#" class="product-card__credit" id="js-product-dolyami-lnk"
style="align-items: center; background-color: #0000000A;">
<span class="checkout__pay-icon checkout__pay-icon--dolyami"></span>
<span style="color: black;font-weight: 600;">4 платежа по {{ dolyamiPayment.paymentSum }} ₽ </span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_63871_42" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.5 8L6.65782 2L5.31564 3.42335L9.81564 8L5.31564 12.5766L6.65782 14L12.5 8Z" fill="black"/>
</mask>
<g mask="url(#mask0_63871_42)">
<rect width="16" height="16" fill="grey"/>
</g>
</svg>
</a>
{% endif %}
{% if product.commonGroupName is not null %}
<div class="product__commons">
<label for="js-product-sizes">Выберите размер:</label>
<select id="js-product-sizes" class="product__commons-select">
<option value="" selected>{{ productsGroupPresenter.sizeTitle(product) }}</option>
{% for productInGroup in productsInGroup %}
<option value="{{ productInGroup.id }}"
data-url="{{ path('show_product',{'slug':productInGroup.slug}) }}">{{ productsGroupPresenter.sizeTitle(productInGroup) }}</option>
{% endfor %}
</select>
</div>
{% endif %}
{# <div class="product-card__credit"> #}
{# <span class="product-card__credit-price">{{ (product.price/12)|round }} ₽</span> #}
{# <span class="product-card__credit-sym">✕</span> 12 мес. #}
{# <span class="js-credit-popover" style="margin-left: 6px;margin-top: 1px;" #}
{# data-content="Месячный платеж при оплате картой беспроцентной рассрочки Халва"> #}
{# <svg #}
{# width="16" height="16" fill="none" #}
{# xmlns="http://www.w3.org/2000/svg" class="_1nZS" #}
{# style="color: rgb(109 198 216);"> #}
{# <path fill-rule="evenodd" clip-rule="evenodd" #}
{# d="M8 16A8 8 0 118 0a8 8 0 010 16zM8 6a1 1 0 011 1v5a1 1 0 11-2 0V7a1 1 0 011-1zm1-2a1 1 0 10-2 0 1 1 0 002 0z" #}
{# fill="currentColor"></path> #}
{# <path fill-rule="evenodd" clip-rule="evenodd" #}
{# d="M8 16A8 8 0 118 0a8 8 0 010 16zM8 6a1 1 0 011 1v5a1 1 0 11-2 0V7a1 1 0 011-1zm1-2a1 1 0 10-2 0 1 1 0 002 0z" #}
{# fill="currentColor"></path> #}
{# </svg> #}
{# </span> #}
{# </div> #}
{% if product.totalBalance > 0 %}
{% if product.bonus %}
<div style="display: flex;align-items: center;justify-content: space-between;margin-left: auto;margin-top: 30px;">
<div class="product-card__bonus">+ {{ product.bonus|bonusPlural }} за покупку</div>
<a href="{{ path('show_brand',{'slug':product.brand.slug}) }}" target="_blank">
<img style="max-width: 60%;margin-left: auto"
src="https://perina-peroni.ru{{ article_web_dir ~ product.brand.image }}"
alt="{{ product.brand.name }}">
</a>
</div>
{% endif %}
{% include 'catalog/product/buttons.html.twig' %}
<div class="product-card__delivery">
Доставка: <a href="#">{{ currentCustomer.fullCityName }}</a>
</div>
{% if deliveryZone is not null %}
<div class="product-card__free-delivery">
{{ deliveryZone.textInProductCard }}
</div>
{% endif %}
{# {% if minOrderSumForFreeShipping()!=null %} #}
{# <div class="product-card__free-delivery"> #}
{# Бесплатная доставка при заказе от {{ minOrderSumForFreeShipping() }} рублей #}
{# </div> #}
{# {% endif %} #}
{% else %}
<div class="product-card__buttons" style="font-size: 22px;font-weight: 600;color: grey;">
<span>Товар закончился</span>
</div>
{% endif %}
<div class="product-card__free-balance">
{% if product.onDemand %}
<div class="product-card__free-balance-title">Нет в наличии в магазинах
<span id="js-demand-info"
data-content="Товара нет в наличии в розничных магазинах. Закажите его онлайн с доставкой на дом, в пункт выдачи или в магазин">?</span>
</div>
{% else %}
<div class="product-card__free-balance-title">Наличие:</div>
<div class="product-card__free-balance-info">
<div>В салонах и в интернет-магазине: <span>{{ product.balanceStore }}</span> шт.</div>
{% if product.balanceWarehouse %}
<div>Поступит в продажу в течение 3 дней: <span>{{ product.balanceWarehouse }}</span> шт.
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<div class="product-card__tabs">
<div class="product-card__tabs-header">
<a href="#" class="product-card__tabs-item-title active js-product-tab-lnk" data-item="1">
Описание товара
</a>
<a href="#" class="product-card__tabs-item-title js-product-tab-lnk" data-item="2">
Характеристики
</a>
{% if product.videosExcludeYouTube.count %}
<a href="#" class="product-card__tabs-item-title js-product-tab-lnk" data-item="6" style="color: #ff3b77">
Видеообзор
</a>
{% endif %}
<a href="#" class="product-card__tabs-item-title js-product-tab-lnk" data-item="3">
Габариты в упаковке
</a>
<a href="#" class="product-card__tabs-item-title js-product-tab-lnk" data-item="4">
Сертификаты качества
</a>
<a href="#" class="product-card__tabs-item-title js-product-tab-lnk" data-item="5">
Уход за изделием
</a>
</div>
<div class="product-card__tabs-body">
<div class="product-card__tabs-tab active product-card__tabs-content js-tab-content js-tab1">
{{ product.description|raw }}
</div>
<div class="product-card__tabs-tab product-card__tabs-tab--no-pad js-tab-content js-tab2">
<div class="product-card__tabs-tab-row">
<div class="product-card__tabs-properties-item">
<div class="product-card__tabs-properties-prop">Бренд:</div>
<div class="product-card__tabs-properties-val">
<a target="_blank" style="text-decoration: underline"
href="{{ path('show_brand',{'slug':product.brand.slug}) }}">{{ product.brand.name }}</a>
</div>
</div>
{% for pp in product.propertiesForProductCard %}
<div class="product-card__tabs-properties-item">
<div class="product-card__tabs-properties-prop">{{ pp.property.aliasOrTitle }}:</div>
<div class="product-card__tabs-properties-val">{{ pp.value.title }}</div>
</div>
{% endfor %}
{% if product.code1c %}
<div class="product-card__tabs-properties-item">
<div class="product-card__tabs-properties-prop">Код:</div>
<div class="product-card__tabs-properties-val">{{ product.code1c }}</div>
</div>
{% endif %}
</div>
</div>
<div class="product-card__tabs-tab js-tab-content js-tab3">
<div class="product-card__tabs-tab-row justify-center">
<div class="product-card__tabs-dimension-item">
<div class="product-card__tabs-dimension-item-title">
Длина:
</div>
<div class="product-card__tabs-dimension-item-val">
{{ product.size.length }} см
</div>
</div>
<div class="product-card__tabs-dimension-item">
<div class="product-card__tabs-dimension-item-title">
Ширина:
</div>
<div class="product-card__tabs-dimension-item-val">
{{ product.size.width }} см
</div>
</div>
<div class="product-card__tabs-dimension-item">
<div class="product-card__tabs-dimension-item-title">
Высота:
</div>
<div class="product-card__tabs-dimension-item-val">
{{ product.size.height }} см
</div>
</div>
<div class="product-card__tabs-dimension-item">
<div class="product-card__tabs-dimension-item-title">
Вес:
</div>
<div class="product-card__tabs-dimension-item-val">
{{ product.size.weight }} кг
</div>
</div>
<div class="product-card__tabs-dimension-item">
<div class="product-card__tabs-dimension-item-title">
Объем:
</div>
<div class="product-card__tabs-dimension-item-val">
{{ product.size.volume }} м3
</div>
</div>
</div>
</div>
<div class="product-card__tabs-tab js-tab-content js-tab4">
<div class="product-card__tabs-tab-row product-card__tabs-cert">
{% for crt in product.certificates %}
<a href="{{ certificates_web_dir ~ crt.file }}" class="js-img" data-rel="cert">
<span class="product-card__tabs-cert-shadow"></span>
<img src="{{ certificates_web_dir ~ crt.file }}" alt="Сертификат {{ product.name }}">
</a>
{% endfor %}
</div>
</div>
<div class="product-card__tabs-tab js-tab-content js-tab5">
<div class="product-card__tabs-tab-row">
{% for icon in product.icons %}
<div class="product-card__tabs-icons-item">
<div class="product-card__tabs-icons-icon">
<img src="{{ icons_web_dir ~ icon.file }}" alt="Уход за товаром">
</div>
<div class="product-card__tabs-icons-info">{{ icon.description }}</div>
</div>
{% endfor %}
</div>
</div>
{% if product.videosExcludeYouTube.count %}
<div class="product-card__tabs-tab js-tab-content js-tab6">
<div class="product-card__tabs-tab-row">
{% for video in product.videosExcludeYouTube %}
<div class="product-card__tabs-video-item" style="width: 45% !important; height: 300px;">
{{ video.videoLink|renderVideo|raw }}
<div class="product-card__tabs-video-info">{{ video.title }}</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</section>
{# {% include 'catalog/product/product.recommend.html.twig' %} #}
{# <section class="mt50"> #}
{# <div class="product-card__tags-header">С этим товаром искали</div> #}
{# <div class="tags-bag"> #}
{# <a href="#" class="tags-bag__tag">Подушка 50х70</a> #}
{# <a href="#" class="tags-bag__tag">Одеяло</a> #}
{# <a href="#" class="tags-bag__tag">Подушка marcy бамбук</a> #}
{# <a href="#" class="tags-bag__tag">Подушка перьевая</a> #}
{# <a href="#" class="tags-bag__tag">Подушка 70х70</a> #}
{# <a href="#" class="tags-bag__tag">Постельное белье</a> #}
{# <a href="#" class="tags-bag__tag">Цены пополам</a> #}
{# </div> #}
{# </section> #}
<div class="mt50">
{{ render(controller('App\\Controller\\IndexController::viewedProductsSlider')) }}
</div>
{% include 'catalog/product/product.reviews.html.twig' %}
<div class="hystmodal" id="reviewOkModal" aria-hidden="true">
<div class="hystmodal__wrap">
<div class="hystmodal__window feedback-result-modal" role="dialog" aria-modal="true">
<button data-hystclose class="hystmodal__close">Закрыть</button>
<div id="js-feedback-modal-content">
Спасибо за отзыв! <br>
Он будет размещен виден на странице сразу после модерации
</div>
</div>
</div>
</div>
{% include 'catalog/product/one.click.modal.html.twig' %}
{% include 'catalog/product/dolyami.info.modal.html.twig' %}
{% endblock %}
{% block header %}
{{ encore_entry_link_tags('index') }}
{% endblock %}
{% block scripts %}
{{ parent() }}
{{ encore_entry_script_tags('index') }}
<style>
.slick-list {
padding: 0 !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
let productPhotosNumber = $('.js-img').length;
if (productPhotosNumber === 1) {
$(".js-img").SmartPhoto({
arrows: false
});
} else {
$(".js-img").SmartPhoto();
}
$('.js-credit-popover').webuiPopover({trigger: 'hover'});
if ($('#js-demand-info').length) {
$('#js-demand-info').webuiPopover({trigger: 'hover'});
}
const myModal = new HystModal({
linkAttributeName: "data-hystmodal",
waitTransitions: true,
backscroll: false,
afterClose: function (modal) {
// document.location.reload();
},
});
if (productPhotosNumber > 3) {
$('#js-product-img-slider').slick({
dots: false,
adaptiveHeight: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
vertical: true,
verticalSwiping: true,
centerPadding: '60px',
prevArrow: '',
nextArrow: $('#js-arrow-down')
});
}
$('body').on('click', '#js-one-click', function (e) {
e.preventDefault();
myModal.open('#oneClickModal');
return false;
});
})
</script>
{% if product.totalBalance > 0 %}
{% set schemaStock = "http://schema.org/InStock" %}
{% else %}
{% set schemaStock = "http://schema.org/OutOfStock" %}
{% endif %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Product",
"image": "{{ products_original_web_dir ~ product.mainImage }}",
"name": "{{ seoBag.h1 }}",
"description": "{{ product.description }}",
"sku": "{{ product.sku }}",
"url": "{{ url('show_product',{'slug':product.slug}) }}",
"brand": {
"@type": "Brand",
"name": "{{ product.brand.name|default('') }}"
},
"offers": {
"@type": "Offer",
"url": "{{ url('show_product',{'slug':product.slug}) }}",
"availability": "{{ schemaStock }}",
"price": "{{ product.price }}",
"priceCurrency": "RUB"
}
}
</script>
<script>
_tmr.push({
type: "reachGoal",
id: 3294077,
value: "{{ product.price }}",
goal: "viewProduct",
params: {product_id: "{{ product.id }}"}
});
yandexDataLayer.push({
'ecommerce': {
'detail': {
'products': [
{
'name': '{{ seoBag.h1 }}',
'id': '{{ product.id }}',
'price': '{{ product.price }}',
'brand': '{{ product.brand.name|default('') }}',
'category': '{{ product.categoryName }}'
}
]
}
}
});
</script>
{% endblock %}