Symfony Profiler

{% extends 'base.html.twig' %}
{% trans_default_domain 'store' %}
{% block title %}
{% if product.metaTitle is defined %}
{{ product.metaTitle }}
{% else %}
{{ product.nazwa }}
{% endif %}
{% endblock %}
{% block meta_desc_key %}
{% if product.metaDescription is defined %}
<meta name="description" content="{{ product.metaDescription|slice(0,300) }}...">
{% else %}
<meta name="description" content="{{ product.getDescriptionFb|slice(0,60) }}">
{% endif %}
{% if product.metaKeywords %}
<meta name="keywords" content="{{ product.metaKeywords }}">
{% endif %}
{% if product.getCanonical %}
<link rel="canonical" href="{{ product.getCanonical }}" />
{% endif %}
{% if app.request.locale == 'pl' %}
{# veltis tag #}
{#
<script async src='https://app.veltis.io/uploads/veltis.js'></script><script>window.veltisData = window.veltisData || []; function veltisTag() { veltisData.push(arguments); } veltisTag('js', new Date()); veltisTag('config', '1aadaf84c154d3e3'); </script>
#}
{% endif %}
{% endblock %}
{% block facebook %}
{% set imgShow = 0 %}
{% for image in product.photos %}
{% if image.main == 1 and imgShow == 0 %}
<meta property="og:image" content="{{ language.storeUrl }}/images/product/{{ image.imageName }}"/>
{% set imgShow = 1 %}
{% endif %}
{% endfor %}
{% autoescape %}
<meta property="og:title" content="{{ product.name }}"/>
{% endautoescape %}
<meta property="og:url" content="{{ language.storeUrl }}{{ path('product', {'slug':product.slug, 'id':product.id}) }}"/>
<meta property="og:description" content="{{ product.metaDescription|slice(0,300) }}...">
<meta property="og:type" content="product">
{% if app.request.locale == 'pl' %}
{% if 'ckdev' in app.request.getSchemeAndHttpHost() %}
<meta name="robots" content="noindex, nofollow" />
{% endif %}
{% endif %}
{% if app.request.locale == 'cz' %}
{% if 'dev.ezidle' in app.request.getSchemeAndHttpHost() %}
<meta name="robots" content="noindex, nofollow" />
{% endif %}
{% endif %}
{% if app.request.locale == 'sk' %}
{% if 'dev.stolicky24' in app.request.getSchemeAndHttpHost() %}
<meta name="robots" content="noindex, nofollow" />
{% endif %}
{% endif %}
{% if app.request.locale == 'ro' %}
{% if 'ro.centrumkrzesel' in app.request.getSchemeAndHttpHost() %}
<meta name="robots" content="noindex, nofollow" />
{% endif %}
{% endif %}
{% endblock %}
{% block css %}
{{ parent() }}
<style>
.modele_i_cechy .left-25 ul {
list-style: initial;
}
.eye-icon {
margin-top: -113px;
margin-left: 6px;
position: absolute;
color: white;
font-size: 14px;
}
.ck-table th {
padding-top:29px;
font-size:14px;
}
.ck-table td {
font-size:14px;
padding-top:15px;
vertical-align: middle;
}
.image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img {
width:auto;
height:auto;
margin-left:auto;
margin-right: auto;
}
.dropdown-content {
max-height: 400px;
overflow: auto;
}
@media (max-width: 1024px) {
.video-container iframe {
width:100%!important;
height:auto!important;
min-height: 300px!important;
}
.blueimp-gallery>.close {
top:13%!important;
right: 15px!important;
}
.select-image-display {
margin-top:-50px;
}
}
@media (max-width: 767px) {
.image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img {
width:auto;
height:auto;
margin-left:auto;
margin-right: auto;
max-height: 450px;
}
.left-25 {
padding-left:0px;
}
.pricingContainer {
overflow: auto;
}
}
.descriptionDiv a {
color:#23d160 !important;
}
.descriptionDiv .column {
padding:0.5rem;
}
.descriptionDiv img {
margin:0px!important;
padding:0px!important;
}
.main-image img {
cursor: pointer;
}
.blueimp-gallery {
background: rgba(0, 0, 0, 0.50)!important;
}
@media (max-width: 550px) {
.material-presentation-mobile {
width: 50%; float: left; min-height: 250px;
}
}
.ck-table td:first-child {
padding: 6px 12px!important;
border:1px solid #ebebeb;
}
#podobne .tabs ul .is-active a{
font-weight: bold;
}
.zoom-on-hover img {
cursor: pointer;
}
.remove-first-element .column:first-child {
display: none;
}
@media (max-width: 730px) {
.zoom-on-hover .normal {
width: fit-content !important;
}
.main-content-mobile-up {
margin-top:-80px;
}
.main-content-mobile-up .is-full {
padding-bottom:0px!important;
}
.hr {
margin-top:20px!important;
margin-bottom:50px!important;
}
}
.removeDot {
margin:0;
padding:0;
list-style:none;
}
.removeDot div a {
text-decoration: underline!important;
}
@media (max-width: 1024px) {
.removeDot div p img, .removeDot div img {
width: auto!important;
height:auto!important;
}
}
.author-circle {
object-fit: cover;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
color: #ffffff;
font-weight: normal;
text-align: center;
vertical-align: middle;
display: table;
}
.author-container {
position: relative;
margin: auto;
/* overflow: hidden; */
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 2px solid #ffffff;
overflow: visible;
}
.blue-notifi-notification {
background-color: rgb(242, 248, 255);
color: rgb(48, 133, 229);
font-weight: bold;
}
.rateit .rateit-preset {
color:#f8d52f!important;
}
#show_comments_button {
margin-left:10px;
}
/* Styling for details section */
#detailsSection {
max-width: 200px; /* Adjust width as needed */
word-wrap: break-word; /* Ensures long words wrap properly */
line-height: 23px;
}
/* Align "Podmiot odpowiedzialny" container */
#toggleDetails {
max-width: 230px; /* Ensure this container aligns with content */
display: block;
}
/* Icon alignment */
#toggleDetails span.icon {
margin-left: 10px; /* Space between text and icon */
}
</style>
<style>
@media (max-width: 730px) {
.level-item-name {
display: block!important;
}
.content-comment {
width:87%!important;
}
.hide-mobile {
display: none!important;
}
}
</style>
<link rel="stylesheet" href="/metronic/lightbox2/dist/css/lightbox.min.css">
<link rel="stylesheet" href="/js/rate-script/scripts/rateit.css" />
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function () {
// Modals
var rootEl = document.documentElement;
var allModals = getAll('.modal');
var modalButtons = getAll('.modal-button');
var modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
if (modalButtons.length > 0) {
modalButtons.forEach(function (el) {
el.addEventListener('click', function () {
var target = document.getElementById(el.dataset.target);
target.classList.add('is-active');
});
});
}
if (modalCloses.length > 0) {
modalCloses.forEach(function (el) {
el.addEventListener('click', function () {
closeModals();
});
});
}
document.addEventListener('keydown', function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals();
}
});
function closeModals() {
rootEl.classList.remove('is-clipped');
allModals.forEach(function (el) {
el.classList.remove('is-active');
});
}
// Functions
function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
}
});
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
function newPopupImage(url) {
popupWindow = window.open(
url,'popUpWindow','left=10,top=10,width=800;height=700;resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
$(document).ready(function () {
$('.similarLinkStart').trigger("click");
var chosen = [];
var $list = $(".chosen_params_list");
function collectParameters() {
$list.each(function() {
chosen.push({'param':$(this).attr('data-id'), 'value':$(this).val()});
});
return chosen;
}
function collectEquipment() {
var chosenEquipment = [];
var $equipmentContainer = $(".equipmentCheckbox");
$equipmentContainer.each(function() {
if ($(this).is(':checked')) {
chosenEquipment.push($(this).attr('data-id'));
}
});
return chosenEquipment;
}
function isOK(string) {
var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(string);
}
$('#notify-button').on("click", function() {
$('#error_notify_container').hide();
var notifyOn = $('#notify_input').val();
if (isOK(notifyOn)) {
$(this).append(' <i class="fas fa-spinner fa-pulse"></i>').css("opacity", '0.6');
var url = $('#new_waiting_list').val();
var productId = $('#product_id').val();
var email = $('#notify_input').val();
$.ajax({
type: "POST",
url: url,
data: {'email':email, 'productId':productId},
success: function (data) {
$('#notify_container').html("<div class='notification blue-notifi-notification'>{{ 'notify_thankyou_text'|trans }}</div>")
}
});
} else {
$('#error_notify_container').show();
}
});
$('.modal-button').on("click", function() {
var url = $(this).attr('data-href');
$.ajax({
type: "POST",
url: url,
success: function (data) {
$('.modal-card-body').html(data);
}
});
});
function addToCart() {
$('.cart-error-notification').hide();
let parameters = collectParameters();
let $variant = $('#variant').val();
var product_id = $('#product_id').val();
var quantity = $('#amount').val();
var url = $('#add_to_cart_url').val();
var equipments = collectEquipment();
$.ajax({
type: "POST",
url: url,
data: {'equipments':equipments, 'product_id':product_id, 'quantity':quantity, 'variant':$variant, 'parameters':parameters},
success: function (data) {
if (parseInt(data.error) === 1) {
$('.cart-error-notification').show();
$('.cart-error-notification').html(data.message);
$('#ask-button').prop('disabled', false);
} else {
var price = $('#productPriceContainer').html();
price.replace(",",'.');
let gaPrice = parseFloat(price);
var name = $('#item_name').val();
window.dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
window.dataLayer.push({
event: 'add_to_cart',
value: gaPrice,
currency: ""+$('#getGa4CodeCurrency').val()+"",
ecommerce: {
items: [{
item_name: ""+name+"",
item_id: ""+product_id+"",
price: gaPrice,
quantity: ""+quantity+""
}]
}
});
{% if app.request.locale == 'ro' %}
if (typeof bianoTrack === 'function') {
bianoTrack('track', 'add_to_cart', {
id: 'CK{{ product.id }}', // Unique identifier of the product
quantity: parseInt(quantity), // Category of the product
unit_price: gaPrice, // Product price (e.g., 99.99)
currency: 'RON' // Currency of the product price (e.g., 'USD', 'EUR')
});
}
{% endif %}
window.location.href = '/cart';
}
}
});
}
$('#ask-button').on("click", function(e) {
e.preventDefault();
let allowToAdd = isAllowToAdd();
if (allowToAdd) {
e.preventDefault();
$(this).prop('disabled', true);
addToCart();
}
});
{% if parameterValues|length >= 1 %}
$('#ask-button').css('opacity', '0.5');
{% endif %}
});
$('.equipmentCheckbox').on("click", function(){
var productPriceContainer = $('#productPriceContainer');
var currentPrice = productPriceContainer.html();
var currencySeparator = $('#currencySeparator').val();
isComma = currencySeparator.includes(',');
currentPrice = currentPrice.replace(/,/g, '.');
//currentPrice = currentPrice.replace(/\D/g,'');
currentPrice = parseFloat(currentPrice);
var equipmentPrice = parseFloat($(this).attr('data-price'));
var currencySign = $('#currencySign').val();
if ($(this).is(':checked')) {
var newValue = (currentPrice + equipmentPrice).toFixed(2);
productPriceContainer.html(newValue+' '+currencySign);
if (isComma) {
var productPriceContainer = $('#productPriceContainer');
var currentPrice = productPriceContainer.html();
currentPrice = currentPrice.replace(/\./g, ",");
productPriceContainer.html(currentPrice);
} else {
productPriceContainer.html(newValue+' '+currencySign);
}
} else {
var newValue = (currentPrice - equipmentPrice).toFixed(2);
productPriceContainer.html(newValue + ' ' + currencySign);
if (isComma) {
var productPriceContainer = $('#productPriceContainer');
var currentPrice = productPriceContainer.html();
currentPrice = currentPrice.replace(/\./g, ",");
productPriceContainer.html(currentPrice);
} else {
productPriceContainer.html(newValue + ' ' + currencySign);
}
}
});
$('#show_comments_button').on("click", function() {
$('#comment_container').show();
$(this).hide();
$('.rateit').rateit({ max: 5, step: 1, backingfld: '#backing7' });
});
</script>
<script src="/metronic/lightbox2/dist/js/lightbox.js"></script>
<script>
lightbox.option({
'fitImagesInViewport': false,
'disableScrolling': false,
})
</script>
<script src="/js/rate-script/scripts/jquery.rateit.js"></script>
{% if app.request.locale == 'ro' %}
<script>
window.addEventListener("ucEvent", function (e) {
if (e.detail && e.detail.event === "consent_status") {
const ucBianoService = 'Biano Pixel';
if (e.detail.hasOwnProperty(ucBianoService) && e.detail[ucBianoService]) {
bianoTrack('track', 'product_view', {
id: 'CK{{ product.id }}', // Unique identifier of the product
productName: '{{ product.name }}', // Name of the product
productCategory: '{{ product.mainCategory.name }}', // Category of the product
productValue: {{ minPrice }}, // Product price (e.g., 99.99)
currency: 'RON' // Currency of the product price (e.g., 'USD', 'EUR')
});
}
}
});
</script>
{% endif %}
<script>
$(document).ready(function() {
$("#toggleDetails").on("click", function() {
// Toggle the details section
$("#detailsSection").slideToggle();
// Swap the caret icon
const icon = $("#toggleIcon i");
if (icon.hasClass("fa-caret-down")) {
icon.removeClass("fa-caret-down").addClass("fa-caret-up");
} else {
icon.removeClass("fa-caret-up").addClass("fa-caret-down");
}
});
});
</script>
{% endblock %}
{% block content %}
{% set pProduct = product %}
<div vocab="http://schema.org/" typeof="Product">
<input type="hidden" name="product_id" id="product_id" value="{{ product.id }}"/>
<input type="hidden" name="add_to_cart_url" id="add_to_cart_url" value="{{ path('add_to_cart') }}"/>
<input type="hidden" name="home_url" id="home_url" value="{{ path('homepage') }}">
<input type="hidden" name="variant" id="variant" value="">
<input type="hidden" id="currencySeparator" value="{{ language.currency.separator }}">
<input type="hidden" id="currencySign" value="{{ language.currency.sign }}">
<input type="hidden" id="new_waiting_list" value="{{ path('new_waiting_list') }}"/>
<input type="hidden" id="item_name" value="{{ product.name }}"/>
<input type="hidden" id="getGa4CodeCurrency" value="{{ language.getGa4Code }}"/>
{% if vat is defined and vat and vat.value %}
<input type="hidden" id="vat" value="{{ 1+(vat.value/100) }}"/>
{% endif %}
{% set c = 0 %}
{% if parameterValues|length %}
{% for key, param in parameterValues %}
{% set c = c +1 %}
{% if c == 1 %}
{% if firstParamValues|length %}
{% set variant = firstParamValues[0] %}
{% if variant.value %}
{#
<input id="chosen_param_{{ key }}" class="chosen_params_list" type="hidden" data-sort="{{ c }}" name="chosen_param_{{ key }}" data-id="{{ key }}" value="{{ variant.value.id }}"/>
#}
{% endif %}
{% endif %}
<input id="chosen_param_{{ key }}" class="chosen_params_list" type="hidden" data-sort="{{ c }}" name="chosen_param_{{ key }}" data-id="{{ key }}" value="0"/>
{% else %}
<input id="chosen_param_{{ key }}" class="chosen_params_list" type="hidden" data-sort="{{ c }}" name="chosen_param_{{ key }}" data-id="{{ key }}" value="0"/>
{% endif %}
{% endfor %}
{% endif %}
<input type="hidden" value="{{ path('loadNextParam', {'id':product.id}) }}" id="loadNextParam"/>
<input type="hidden" value="{{ parameterValues|length }}" id="paramCounter"/>

<section class="section topSection">
<div class="container">
<div class="columns is-multiline">

<div class="column is-full">
<nav class="breadcrumb has-arrow-separator is-hidden-mobile" aria-label="breadcrumb">
<ul vocab="https://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="{{ path('homepage') }}"><span property="name">{{ language.shopName }}</span></a>
<meta property="position" content="1">
</li>
{% if product.mainCategory.deletedBy == null %}
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="{{ path('category', {'id':product.mainCategory.id, 'slug':product.mainCategory.slug}) }}"><span property="name">{{ product.mainCategory.name }}</span></a>
<meta property="position" content="2">
</li>
{% endif %}
<li class="is-active" property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="#"><span property="name">{{ product.name }}</span></a>
<meta property="position" content="3">
</li>
</ul>
</nav>
</div>

</div>
</div>
</section>


<section class="section topSection">
<div class="container">
<div class="columns is-multiline">

<div class="column is-half-desktop is-full-touch">
<div id="galleryMain">
<carousel-gallery inline-template v-cloak
:small-imgs="[
{% set imgArr = [] %}
{% for image in product.photos %}
{% if image.getIsAvailableForLang(language) %}
{% if image.imageName in imgArr %}
{% else %}
{% if image.main == 1 %}
{% set imgArr = imgArr|merge([image.imageName]) %}
'{{ asset('/images/product/'~image.imageName~'') | imagine_filter('smallProdImage') }}',
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% for image in product.photos %}
{% if image.getIsAvailableForLang(language) %}
{% if image.imageName in imgArr %}
{% else %}
'{{ asset('/images/product/'~image.imageName~'') | imagine_filter('smallProdImage') }}',
{% set imgArr = imgArr|merge([image.imageName]) %}
{% endif %}
{% endif %}
{% endfor %}
{% for image in product.photos %}
{% if image.getIsAvailableForLang(language) %}
{% if image.imageName in imgArr %}
{% else %}
'{{ asset('/images/product/'~image.imageName~'') | imagine_filter('smallProdImage') }}',
{% set imgArr = imgArr|merge([image.imageName]) %}
{% endif %}
{% endif %}
{% endfor %}
]"
:big-imgs="[
{% set imgArr = [] %}
{% for image in product.photos %}
{% if image.getIsAvailableForLang(language) %}
{% if image.imageName in imgArr %}
{% else %}
{% if image.main == 1 %}
{% set imgArr = imgArr|merge([image.imageName]) %}
{
title: ' ',
href: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}',
type: 'image/jpeg',
thumbnail: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}',
},
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
{% for image in product.photos %}
{% if image.getIsAvailableForLang(language) %}
{% if image.imageName in imgArr %}
{% else %}
{
title: ' ',
href: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}',
type: 'image/jpeg',
thumbnail: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}',
},
{% set imgArr = imgArr|merge([image.imageName]) %}
{% endif %}
{% endif %}
{% endfor %}
{% for image in product.photos %}
{% if image.getIsAvailableForLang(language) %}
{% if image.imageName in imgArr %}
{% else %}
{
title: ' ',
href: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}',
type: 'image/jpeg',
thumbnail: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}',
},
{% set imgArr = imgArr|merge([image.imageName]) %}
{% endif %}
{% endif %}
{% endfor %}
{# film youtube #}
{% if product.getYoutubeGalleryUrl %}
{% for image in product.photos|slice(1,1) %}
{
title: 'YouTube Film',
href: ' ',
type: 'text/html',
youtube: '{{ product.getYoutubeGalleryUrl }}',
poster: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}'
}
{% endfor %}
,
{% endif %}
{# prezentacja 3D Orbittour #}
{% if product.getPhoto3dGalleryUrl %}
{% for image in product.photos|slice(2,1) %}
{
title: '3D',
href: ' ',
id: '{{ product.getPhoto3dGalleryUrl|extractOrbitturId }}',
script: '{{ product.getPhoto3dGalleryUrl }}',
type: 'orbittour',
poster: '{{ asset('/images/product/'~image.imageName~'') | imagine_filter('bigProductImageLowerQuality') }}'
},
{% endfor %}
{% endif %}
]">
<div>

<gallery
:images="bigImgs"
:index="index"
:options="{
youTubeVideoIdProperty: 'youtube',
youTubePlayerVars: { autoplay: 1 },
youTubeClickToPlay: true,
toggleControlsOnReturn: true,
toggleControlsOnSlideClick: true
}"
@onslide="slideHandler"
@close="index = null" >
</gallery>
<agile
class="main"
ref="main"
:options="options1"
:as-nav-for="asNavFor1">
<div
class="slide"
v-for="(big, index) in bigImgs"
:key="index"
:class="'slide--' + index">
<div @click="openGallery( index )">
<zoom-on-hover
:img-normal="big.poster || big.thumbnail"
:scale="2" />
</div>
</div>
</agile>
<agile
class="thumbnails thb-gallery"
ref="thumbnails"
:options="options2"
:as-nav-for="asNavFor2"
v-if="smallImgs.length > 1">
<div
class="slide slide--thumbniail"
v-for="(slide, index) in smallImgs"
:key="index"
:class="'slide--' + index"
@click="$refs.thumbnails.goTo(index)">
<img :src="slide"/>
</div>
<template slot="prevButton"><i class="fas fa-chevron-left"></i></template>
<template slot="nextButton"><i class="fas fa-chevron-right"></i></template>
</agile>
</div>

</carousel-gallery>
</div>
</div>


<div class="column is-half-desktop is-full-touch select-boxy">
<div class="columns is-multiline">
{% if product.getProducer(language.localeShort).imageName %}
<div class="column is-full has-text-centered-touch no-bot-padding gallery-container">
<figure class="image is-64x64-desktop is-48x48-tablet" style="min-height: initial!important;">
{#<a href="/search/query?query=&productProducer={{ product.getProducer(language.localeShort).id }}"> #}
<a href="{{ productProducerUrl(product.getProducer(language.localeShort).id, app.request.locale) }}">
<img style="width:90px!important;" src="/images/producer/{{ product.getProducer(language.localeShort).imageName }}" class="dropdown-img producer-image">
</a>
</figure>
</div>
{% endif %}
<div class="column is-full has-text-centered-touch">
<h1 class="title is-3">
<span property="name">
<strong>
{{ product.name }}
</strong>
</span>
</h1>
</div>
<div class="column is-full has-text-centered-touch" property="offers" typeof="Offer">
{% if productData.priceCrossed is defined and productData.currencySign is defined and productData.priceCrossed %}
<div class="title is-1">
<span class="title is-1" id="productPriceContainer" property="price" content="{{ minPrice }}" style="font-weight:900;
{% if productData.priceCrossed %}
color: #ef1b2b!important;
{% endif %}
">
{{ minPrice|formatPrice(productData.currencyId) }}
</span>
 
<span class="standard-color" style="font-weight: 300; font-size:32px;"><strike>{{ productData.priceCrossed|formatPrice(productData.currencyId) }}</strike></span>
{% if app.request.locale == 'pl' and product.payu %}
     
<span class="is-hidden-touch raty"> {{ 'raty_0_procent'|trans }}</span>
{% endif %}
<div class="netto-price">
<em>{{ 'netto'|trans }} <span id="netto-price">{{ priceNetto|formatPrice(productData.currencyId) }}</span></em>
</div>
</div>
{% else %}
<div class="title is-1">
<span class="title is-1" id="productPriceContainer" property="price" content="{{ minPrice }}" style="font-weight:900;">
{{ minPrice|formatPrice(productData.currencyId) }}
</span>
{% if app.request.locale == 'pl' and product.payu %}
     
<span class="is-hidden-touch raty"> {{ 'raty_0_procent'|trans }}</span>
{% endif %}
<div class="netto-price">
<em>{{ 'netto'|trans }} <span id="netto-price">{{ priceNetto|formatPrice(productData.currencyId) }}</span></em>
</div>
</div>
{% endif %}
<div class="subtitle is-6" style="margin-top:10px;">
{{ 'weShipIn'|trans }} {{ product.getAvailability(language.localeShort).name }}
</div>
<link property="availability" href="http://schema.org/InStock" />
{% if language.id == 1 %}
<span property="priceCurrency" content="PLN"></span>
<span property="url" content="https://www.centrumkrzesel.pl{{ path('product', {'id':product.id, 'slug':product.slug}, false) }}"></span>
{% endif %}
{% if language.id == 2 %}
<span property="priceCurrency" content="CZK"></span>
<span property="url" content="https://www.ezidle.cz{{ path('product', {'id':product.id, 'slug':product.slug}, false) }}"></span>
{% endif %}
{% if language.id == 3 %}
<span property="priceCurrency" content="EUR"></span>
<span property="url" content="https://www.stolicky24.sk{{ path('product', {'id':product.id, 'slug':product.slug}, false) }}"></span>
{% endif %}
{% if language.id == 4 %}
<span property="priceCurrency" content="RON"></span>
<span property="url" content="https://www.mobila24.ro{{ path('product', {'id':product.id, 'slug':product.slug}, false) }}"></span>
{% endif %}
</div>
{% set imgShowProperty = 0 %}
{% for image in product.photos %}
{% if image.main == 1 and imgShowProperty == 0 %}
<span property="image" content="{{ language.storeUrl }}/images/product/{{ image.imageName }}"></span>
{% set imgShowProperty = 1 %}
{% endif %}
{% endfor %}
{% if product.getProducer(language.localeShort) %}
<span property="brand" content="{{ product.getProducer(language.localeShort).name }}"></span>
{% endif %}
{#
{% if comments|length %}
<span property="{{ rating|round(2) }}" content="{{ product.getProducer(language.localeShort).name }}"></span>
{% endif %}
#}
</div>


{% if product.isVariants %}
{% include 'frontend/product/_dropdown.html.twig' %}
{% endif %}
<div id="equipmentContainer" style="{% if product.isVariants %}display: none{% endif %}; font-size:15px;">
{% set eqCounter = 0 %}
{% for equipment in equipments %}
{% if app.request.locale == equipment.locale %}
{% set eqCounter = eqCounter + 1 %}
{% endif %}
{% endfor %}
{% if eqCounter %}
<p>
{{ 'additional_equipment'|trans }}
</p>
{% for equipment in equipments %}
{% if app.request.locale == equipment.locale %}
<label class="checkbox">
{% if app.request.locale == 'ro' %}
<input class="equipmentCheckbox" type="checkbox" data-price="{{ equipment.price }}" data-id="{{ equipment.id }}" name="equipment[]" value="{{ equipment.id }}">
{{ equipment.name }} <strong>+{{ equipment.priceFormatted }}</strong>
{% else %}
<input class="equipmentCheckbox" type="checkbox" data-price="{{ equipment.price }}" data-id="{{ equipment.id }}" name="equipment[]" value="{{ equipment.id }}">
{{ equipment.name }} <strong>+{{ equipment.priceFormatted }}</strong>
{% endif %}
</label>
{% endif %}
{% endfor %}
{% endif %}
</div>



{% if productData.priceCrossed is defined and productData.currencySign is defined and productData.priceCrossed %}
<div class="column is-full is-size-7-tablet" style="margin-bottom:-30px;">
<div class="level-left">
<div class="level-item">
{{ 'omnibus_text'|trans }}
{% if productData.omnibusPrice %}
{{ productData.omnibusPrice|formatPrice(language.currency) }}
{% else %}
{{ minPrice|formatPrice(language.currency) }}
{% endif %}
</div>
</div>
</div>
{% endif %}
<div class="column is-full is-size-7-tablet is-hidden-mobile zajawki">
<div class="level is-mobile">
{% if (product.availability and product.availability.id == 1) or (product.availability and product.availability.id == 15 and app.request.locale == 'pl') or (product.availability and product.availability.id == 12 and app.request.locale == 'pl') or (product.availability and product.availability.id == 5) %}
<div class="level-left" style="width: 30%">
<div class="level-item">
<img style="max-height: 4rem" class="margin-right-8" src="/v2/ico/24h_ico.png" alt="24h delivery">
<span>{{ 'products_in_24h_delivery_ico'|trans|raw }}</span>
</div>
</div>
{% else %}
<div class="level-left" style="width: 30%">
<div class="level-item">
<img style="max-height: 4rem; max-width:50px;" class="margin-right-8" src="/v2/ico/ico_300_customers.svg" alt="300 000 customers">
<span>{{ 'text_300_customers_product_ico'|trans|raw }}</span>
</div>
</div>
{% endif %}
<div class="level-item" style="width: 36%;">
<img style="max-height: 4rem" class="margin-right-8" src="{{ staticImages[locale].freeDelivery }}" alt="">
<span>{{ 'free_delivery_return_product_ico'|trans|raw }}</span>
</div>
<div class="level-right" style="width: 33%">
<div class="level-item">
<img style="max-height: 4rem" class="margin-right-8" src="/v2/ico_pig_new.png" alt="">
<div style="max-width: 100px;">{{ 'price_with_negotiations'|trans|raw }}</div>
</div>
</div>
{#
<div class="level-item" style="width: 36%">
<img style="max-height: 4rem" class="margin-right-8" src="{{ staticImages[locale].freeDelivery }}" alt="">
<span>{{ 'free_delivery_return'|trans|raw }}</span>
</div>
<div class="level-right" style="width: 33%">
<div class="level-item">
<img style="max-height: 4rem" class="margin-right-8" src="{{ staticImages[locale].onMarket }}" alt="">
<span>{{ 'gwarancja_ico'|trans|raw }}</span>
</div>
</div>
#}
</div>
</div>

{% for marker in product.markers %}
{% if marker.language.id == language.id and marker.content|length>0 %}

<div class="notification {{ marker.color }}-notification" style="margin-top:30px;">
<span class="icon">
<i class="fas fa-info-circle"></i>
</span>
<span class="has-text-weight-bold">
{{ marker.content|raw }}
</span>
</div>
{% endif %}
{% endfor %}
{% if product.getProducer(language.localeShort) %}
{% for marker in product.getProducer(language.localeShort).markers %}
{% if marker.language.id == language.id and marker.content|length>0 %}

<div class="notification {{ marker.color }}-notification" style="margin-top:30px;">

<span class="icon">
<i class="fas fa-info-circle"></i>
</span>
<span class="has-text-weight-bold">
{{ marker.content|raw }}
</span>
</div>

{% endif %}
{% endfor %}
{% endif %}
{% for marker in product.getLandingPagesMarkers %}
{% if marker.language.id == language.id and marker.content|length>0 %}

<div class="notification {{ marker.color }}-notification" style="margin-top:30px;">

<span class="icon">
<i class="fas fa-info-circle"></i>
</span>
<span class="has-text-weight-bold">
{{ marker.content|raw }}
</span>
</div>

{% endif %}
{% endfor %}
{#
{% if markerConstant is defined and markerConstant and app.request.locale == 'ro' %}
<div class="notification blue-notification" style="margin-top:30px; background-color:#f2f8ff; color: #3085e5">

<span class="has-text-weight-bold">
{{ markerConstant.content|raw }}
</span>
</div>
{% endif %}
#}

<div class="column is-full">
{% if product.temporaryUnavailable %}
<div class="column is-full">
<div class="level-item">
<div>
<strong>
{{ 'product_temp_unavailable'|trans }}
</strong>
</div>
</div>
</div>
<div id="notify_container">
<div class="column is-full">
<div class="level-left">
<div class="">
{{ 'notify_me'|trans }}
</div>
</div>
</div>
<div class="column is-full">
<div class="">
<div class="field">
<div class="control">
<input type="text" placeholder="{{ 'your_email'|trans }}" id="notify_input" value="" class="input" style="padding:25px;">
<div style="display: none; margin-top:10px; color:red; text-align: center" id="error_notify_container">
{{ 'please_enter_valid_email'|trans }}
</div>
</div>
</div>
</div>
</div>
<div class="column is-full">
<div class="">
<button type="button" class="button is-success has-text-weight-bold" id="notify-button" style="width:100%;">
{{ 'inform_me_about_availability_button'|trans }}
</button>
</div>
</div>
</div>
{% else %}
<div class="level is-mobile">
<div class="level-left">
<div class="level-item">
<div class="field">
<div class="control">
<input type="text" id="amount" value="1" class="input cool-shadow has-text-centered">
</div>
</div>
</div>
</div>
<div class="level-item">
<button type="button" class="button is-success has-text-weight-bold" id="ask-button">
{{ 'order_or_ask'|trans }}
</button>
</div>
</div>
{% endif %}
<div class="column is-full">
<div class="notification is-danger cart-notification" style="text-align: center; display: none">
{{ 'choose_aboce_parameters_first'|trans }}
</div>
<div class="notification is-danger cart-error-notification" style="text-align: center; display: none">
</div>
</div>
</div>


<div class="column is-full">
{% if app.request.locale == 'pl' and product.payu %}
<table style="margin-top:-20px; display: none" id="payuraty">
<tr>
<td style="width:40px;">
<img style="cursor: pointer; margin-bottom:-18px;" id="payuLogo" src="https://poland.payu.com/wp-content/themes/global-website/assets/src/images/payu-logo.svg" hidden/>
</td>
<td style="width:4px;"></td>
<td><p><span id="installment-mini"></span></p></td>
<td><div style="font-size:15px; margin-top: 17px; padding-left:2px;">miesięcznie</div></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
const button = document.getElementById('payuLogo');
button.addEventListener('click', function handleClick() {
});
var value = {{ minPrice }};
var options = {
creditAmount: value, // wartość jako number (w PLN)
posId: 1056481, // identyfikator punktu płatności
key: 'e8', // pierwsze dwa znaki klucza api
showLongDescription: true,
};
window.OpenPayU.Installments.miniInstallment("#installment-mini", options)
.then(function (result) {
if (result.isWidgetAvailable) {
$('#payuraty').show();
$(document).on('click', '#payuLogo', function () {
result.openWidget();
});
$(document).on('click', '.payu-mini-installments-widget-amount', function () {
result.openWidget();
});
$(document).on('click', '.payu-mini-installments-widget-details', function () {
result.openWidget();
});
document.querySelector("#payuLogo").removeAttribute("hidden"); // wyświetla element
document.querySelector("#payuLogo").onclick = function () {
result.openWidget();
}; // dodaje akcję na kliknięcie
} else {
$('#payuraty').hide();
}
})
.catch(function (e) {
console.error(e.toString());
});
});
</script>
{% endif %}
<label class="checkbox" style="margin-top:5px; font-size:14px;">
<input {% if compareIds is defined and product.id in compareIds %} checked="checked" {% endif %} type="checkbox" data-removepath="{{ path('remove_compare') }}" data-path="{{ path('add_to_compare') }}" class="add_to_compare" data-product="{{ product.id }}" id="{{ product.id }}">
{{ 'add_to_compare'|trans }}
</label>
<br/>
{% if similarColors|length %}
<div class="has-text-weight-semibold">
{{ 'similarColors'|trans }}
</div>
<div class="columns is-flex is-flex-wrap-nowrap is-align-items-center">
{% for similarColor in similarColors|slice(0,5) %}
{% set localProduct = similarColor[0] %}
{% set localProductData = similarColor %}
<div class="column is-narrow">
<a href="{{ path('product', {'id':localProduct.id, 'slug':localProduct.slug}) }}">
<img style="max-width: 100px;" data-main="{{ asset('/images/product/'~localProductData.mainPhoto~'') | imagine_filter('small') }}" src="/images/ajax-loader.gif" alt="{{ localProduct.name }}" class="lazy img-responsive small-photo" data-src="{{ asset('/images/product/'~localProductData.mainPhoto~'') | imagine_filter('small') }}" />
</a>
</div>
{% endfor %}
</div>
{% endif %}
</div>

</div>

</div>
<hr class="hr">
</div>
</section>


{% set parametersIds = [] %}
{% for variant in priceVariants %}
{% if variant.parameterValueGroup.parameter.id not in parametersIds %}
{% set parametersIds = parametersIds|merge([variant.parameterValueGroup.parameter.id]) %}
{% endif %}
{% endfor %}
{% set shortFunctions = product.getShortFunctionDescription %}
<section class="section">
<div class="container">
<div class="columns">

<div class="column is-one-fifth">
<affix class="sidebar-menu" relative-element-selector="#main_content">
<aside class="columns is-multiline">
<scrollactive active-class="active-scroll" :highlight-first-item="true">

<nav>
{% if shortFunctions|length %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_shortcut'|trans }}" class="scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'inShortcut'|trans }}
</a>
</div>
{% endif %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_models_features'|trans }}" class="modele_i_cechy scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'functionsProductDescription'|trans }}
</a>
</div>
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_TEXTILE') in parametersIds %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_material_textile'|trans }}" class="scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'materials_textiles'|trans }}
</a>
</div>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD') in parametersIds %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_material_wood'|trans }}" class="scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'materials_wood'|trans }}
</a>
</div>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_NET') in parametersIds %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_material_net'|trans }}" class="scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'material_net'|trans }}
</a>
</div>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_KOLATKA_PINEZKA') in parametersIds %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_materialy_kolatka'|trans }}" class="scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'materials_others'|trans }}
</a>
</div>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD_LEGS') in parametersIds %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_legs_wood'|trans }}" class="scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'material_wood_legs'|trans }}
</a>
</div>
{% endif %}
<div class="column is-full has-text-weight-semibold">
<a href="#{{ 'tag_pricing'|trans }}" class="scrollactive-item is-hidden-touch" style="color: #989898;">
{{ 'pricing'|trans }}
</a>
</div>
{% if product.photo3d %}
<div class="column is-full has-text-weight-semibold is-hidden-touch">
<a href="#desc360" class="scrollactive-item" style="color: #989898;">{{ 'presentation_360'|trans }}</a>
</div>
{% endif %}
{% if product.photo3dAdditional|length > 25 %}
<div class="column is-full has-text-weight-semibold is-hidden-touch">
<a href="#desc360Additional" class="scrollactive-item" style="color: #989898;">{{ 'presentation_360_additional'|trans }}</a>
</div>
{% endif %}
{% if product.film %}
<div class="column is-full has-text-weight-semibold is-hidden-touch">
<a href="#film" class="scrollactive-item" style="color: #989898;">{{ 'film'|trans }}</a>
</div>
{% endif %}
<div class="column is-full has-text-weight-semibold is-hidden-touch">
<a href="#gallery" class="scrollactive-item" style="color: #989898;">{{ 'gallery'|trans }}</a>
</div>
<div class="column is-full has-text-weight-semibold is-hidden-touch">
<a href="#podobne" class="scrollactive-item" style="color: #989898;">{{ 'similarProducs'|trans }}</a>
</div>
{% if app.request.locale == 'pl' %}
{% if product.getActiveSubProducts.count and buyCheaperLP is defined and buyCheaperLP %}
<div class="column is-full has-text-weight-semibold is-hidden-touch">
<a href="{{ path('landing-page-front', {'product':product.id, 'id':buyCheaperLP.id, 'slug':buyCheaperLP.slug}) }}" class="" style="color: red;">{{ 'buy_cheaper'|trans }}</a>
</div>
{% endif %}
{% endif %}
{% if product.getProducer(language.localeShort).responsibleEntity %}
<div class="column is-full has-text-weight-semibold">
<a href="javascript:void(0);" id="toggleDetails" class="scrollactive-item is-hidden-touch" style="color: rgb(152, 152, 152); display: flex; justify-content: space-between; align-items: center;">
{{ 'responsibleEntity_front_store'|trans }}
<span id="toggleIcon" class="icon">
<i class="fas fa-caret-down"></i>
</span>
</a>
</div>

<div id="detailsSection" class="column is-full" style="display: none; padding-left: 20px; color: rgb(100, 100, 100);">
{{ product.getProducer(language.localeShort).responsibleEntity|raw }}
</div>
{% endif %}
</nav>

</scrollactive>
</aside>
</affix>
</div>


<div class="content-single-product column is-three-fifths-desktop is-four-fifths-tablet">
<div class="columns is-multiline main-content-mobile-up" id="main_content">
{% if shortFunctions|length %}
<div class="left-25" id="{{ 'tag_shortcut'|trans }}">
<div class="column is-full">
{{ shortFunctions|raw }}
</div>
</div>
{% endif %}
<section-accordion :open="1" inline-template v-cloak>
<div class="column is-full" id="{{ 'tag_models_features'|trans }}">
{% if shortFunctions|length %}
<hr class="hr">
{% endif %}
<div class="level is-mobile" @click="toggleAccordion">
<div class="level-left">
<div class="level-item">
<h3 class="title is-3">
{{ 'functionsProductDescription'|trans }}
</h3>
</div>
</div>
<div class="level-right">
<div class="level-item" v-show="isMobile">

<span class="icon">
<i :class="isOpen ? 'fas fa-minus' : 'fas fa-chevron-down'"></i>
</span>
</div>
</div>
</div>
<div class="divider2"></div>

<div :class="isMobile ? '' : 'left-25'" v-show="isOpen">
{% set desc = product.description|shortFunctionDescriptionFilter %}
<ul class="removeDot">
{% for row in desc %}
{% if row|striptags|length>5 %}
<li class="removeDot">
<div class="column is-full">
<span class="icon"><i class="fas fa-check has-text-success"></i></span>
{{ row|strongReplacer|raw }}
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
</section-accordion>
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_TEXTILE') in parametersIds %}
<section-accordion :open="0" inline-template v-cloak>
<div class="column is-full" id="{{ 'tag_material_textile'|trans }}">
<hr class="hr">
<div class="level is-mobile" @click="toggleAccordion">
<div class="level-left">
<div class="level-item">
<h3 class="title is-3">
{{ 'textiles'|trans|capitalize }} ({{ 'count_variant_types'|trans({'%count%': groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_TEXTILE')]}) }})
</h3>
</div>
</div>
<div class="level-right">
<div class="level-item" v-show="isMobile">

<span class="icon">
<i :class="isOpen ? 'fas fa-minus' : 'fas fa-chevron-down'"></i>
</span>
</div>
</div>
</div>
<div class="divider2"></div>
<div :class="isMobile ? '' : 'left-25'" v-show="isOpen">
{% for variant in variantsArray %}
{% if variant.parameter.id == constant('App\\Entity\\ProductParameter::CHOOSABLE_TEXTILE') %}
{% include 'frontend/product/_materialPresentation.html.twig' %}
{% endif %}
{% endfor %}
</div>
</div>
</section-accordion>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD') in parametersIds %}
<section-accordion :open="0" inline-template v-cloak>
<div class="column is-full" id="{{ 'tag_material_wood'|trans }}">
<hr class="hr">
<div class="level is-mobile" @click="toggleAccordion">
<div class="level-left">
<div class="level-item">
<h3 class="title is-3">
{{ 'wood'|trans|capitalize }} ({{ 'count_variant_types'|trans({'%count%': groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD')]}) }})
</h3>
</div>
</div>
<div class="level-right">
<div class="level-item" v-show="isMobile">

<span class="icon">
<i :class="isOpen ? 'fas fa-minus' : 'fas fa-chevron-down'"></i>
</span>
</div>
</div>
</div>
<div :class="isMobile ? '' : 'left-25'" v-show="isOpen">
{% for variant in variantsArray %}
{% if variant.parameter.id == constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD') %}
{% include 'frontend/product/_materialPresentation.html.twig' %}
{% endif %}
{% endfor %}
</div>
</div>
</section-accordion>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_NET') in parametersIds %}
<section-accordion :open="0" inline-template v-cloak>
<div class="column is-full" id="{{ 'tag_material_net'|trans }}">
<hr class="hr">
<div class="level is-mobile" @click="toggleAccordion">
<div class="level-left">
<div class="level-item">
<h3 class="title is-3">
{{ 'net'|trans|capitalize }} ({{ 'count_variant_types'|trans({'%count%': groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_NET')]}) }})
</h3>
</div>
</div>
<div class="level-right">
<div class="level-item" v-show="isMobile">

<span class="icon">
<i :class="isOpen ? 'fas fa-minus' : 'fas fa-chevron-down'"></i>
</span>
</div>
</div>
</div>
<div :class="isMobile ? '' : 'left-25'" v-show="isOpen">
{% for variant in variantsArray %}
{% if variant.parameter.id == constant('App\\Entity\\ProductParameter::CHOOSABLE_NET') %}
{% include 'frontend/product/_materialPresentation.html.twig' %}
{% endif %}
{% endfor %}
</div>
</div>
</section-accordion>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_KOLATKA_PINEZKA') in parametersIds %}
<section-accordion :open="0" inline-template v-cloak>
<div class="column is-full" id="{{ 'tag_materialy_kolatka'|trans }}">
<hr class="hr">
<div class="level is-mobile" @click="toggleAccordion">
<div class="level-left">
<div class="level-item">
<h3 class="title is-3">
{{ 'pins_kolatka'|trans|capitalize }} ({{ 'count_variant_types'|trans({'%count%': groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_KOLATKA_PINEZKA')]}) }})
</h3>
</div>
</div>
<div class="level-right">
<div class="level-item" v-show="isMobile">

<span class="icon">
<i :class="isOpen ? 'fas fa-minus' : 'fas fa-chevron-down'"></i>
</span>
</div>
</div>
</div>
<div :class="isMobile ? '' : 'left-25'" v-show="isOpen">
{% for variant in variantsArray %}
{% if variant.parameter.id == constant('App\\Entity\\ProductParameter::CHOOSABLE_KOLATKA_PINEZKA') %}
{% include 'frontend/product/_materialPresentation.html.twig' %}
{% endif %}
{% endfor %}
</div>
</div>
</section-accordion>
{% endif %}
{% if constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD_LEGS') in parametersIds %}
<section-accordion :open="0" inline-template v-cloak>
<div class="column is-full" id="{{ 'tag_legs_wood'|trans }}">
<hr class="hr">
<div class="level is-mobile" @click="toggleAccordion">
<div class="level-left">
<div class="level-item">
<h3 class="title is-3">
{{ 'wood_legs'|trans }} ({{ 'count_variant_types'|trans({'%count%': groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD_LEGS')]}) }})
</h3>
</div>
</div>
<div class="level-right">
<div class="level-item" v-show="isMobile">

<span class="icon">
<i :class="isOpen ? 'fas fa-minus' : 'fas fa-chevron-down'"></i>
</span>
</div>
</div>
</div>
<div :class="isMobile ? '' : 'left-25'" v-show="isOpen">
{% for variant in variantsArray %}
{% if variant.parameter.id == constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD_LEGS') %}
{% include 'frontend/product/_materialPresentation.html.twig' %}
{% endif %}
{% endfor %}
</div>
</div>
</section-accordion>
{% endif %}
<div class="column is-full" id="{{ 'tag_pricing'|trans }}">
<hr class="hr">
<h2 class="title is-3">
{{ 'pricing'|trans }}
</h2>
<div class="divider"></div>
{% if product.shippingCategory and app.request.locale == 'pl' %}
{% set sc = product.shippingCategory~'_store' %}
<h4 style="margin-bottom:20px;">
{{ sc|trans }}
</h4>
{% endif %}
<div class="pricingContainer">
{% if product.isVariants == 1 and groupCounter|length > 0 %}
<table class="ck-table">
<tr>
<td></td>
{% if groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_TEXTILE')] is defined %}
<th style="text-align: center; padding-top:10px;" colspan="{{ groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_TEXTILE')] }}">{{ 'available_materials'|trans }}</th>
{% elseif groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD')] is defined %}
<th style="text-align: center; padding-top:10px;" colspan="{{ groupCounter[constant('App\\Entity\\ProductParameter::CHOOSABLE_WOOD')] }}">{{ 'available_materials'|trans }}</th>
{% endif %}
</tr>
<tr>
<th style="text-align: center">{{ 'version'|trans }}</th>
{% for price in pricing|slice(0,1) %}
{% for textile in price.tkaniny %}
{% if textile.parameter.id in [9,23,55,121,126,124,37,22] %}
{% if textile.parameterValueGroup %}
<th style="text-align:center;"><a href="{{ path('textileDescription', {'id':textile.parameterValueGroup.id}) }}">{{ textile.parameterValueGroup.name }}</a></th>
{% else %}
<th style="text-align:center;">{{ textile.parameterValue.name }}</th>
{% endif %}
{% endif %}
{% endfor %}
{% endfor %}
</tr>
{% for price in pricing %}
<tr>
<td style="">{{ price.wersja.name }}</td>
{% for textile in price.tkaniny %}
{% if textile.parameter.id in [9,23,55,121,126,124,37,22] %}
<td style="text-align:center;overflow: hidden;white-space: nowrap; vertical-align: middle">{{ textile.productPrice.priceGross(vat)|formatPrice(textile.productPrice.currency) }}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</table>
{% elseif productPrices|length>1 %}
<table class="ck-table" style="max-width: 650px;">
{% for productPrice in productPrices %}
{% if productPrice.variants|length == 1 %}
<tr>
<th style="text-align: center; width:30%;">
{% for variants in productPrice.variants %}
{{ variants.parameterValue.name }}
{% endfor %}
</th>
<td style="width: 90%; text-align: center; padding-top:19px;">
{{ productPrice.getPriceGross(vat)|formatPrice(language.currency) }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
{% else %}
<table class="ck-table" style="max-width: 650px;">
<tr>
<th style="text-align: center; width:30%;">
{{ product.name }}
</th>
<td style="width: 90%; text-align: center; padding-top:19px;">
{% for price in productPrices|slice(0,1) %}
{{ price.getPriceGross(vat, language.roundingPrecision, true)|formatPrice(language.currency) }}
{% endfor %}
</td>
</tr>
</table>
{% endif %}
</div>
</div>
{#
<div class="column is-full is-hidden-touch pytania">
<div class="is-size-4 is-600 is-red has-text-centered is-3 ">
Masz pytanie? Zadzwoń
<span class=""><i class="fas fa-phone"></i> 801 044 034</span>
</div>
<div class="is-size-5 has-text-centered">
Infolinia - Czynna dziś do 16:00
</div>
</div>
#}
{% if product.photo3d %}
<div class="column is-full" id="desc360">
<hr class="hr">
<h2 class="title is-3">
{{ 'presentation360'|trans }}
</h2>
<div class="left-25 descriptionDiv">
{{ product.photo3d|raw }}
</div>
</div>
{% endif %}
{% if product.photo3dAdditional|length > 25 %}
<div class="column is-full" id="desc360Additional">
<hr class="hr">
<h2 class="title is-3">
{{ 'presentation_360_additional'|trans }}
</h2>
<div class="left-25 descriptionDiv">
{{ product.photo3dAdditional|raw }}
</div>
</div>
{% endif %}
{% if product.film %}
<div class="column is-full descriptionDiv" id="film">
<hr class="hr">
<h2 class="title is-3">
{{ 'film'|trans }}
</h2>
<div class="left-25 video-container" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
{{ product.film|raw }}
<span style="display: none" itemprop="name">{{ 'product_presentation'|trans }} {{ product.name }} - {{ product.getProducer(language.localeShort).name }}</span>
<span style="display: none" itemprop="description">{{ product.shortDescription }}</span>
<span style="display: none" itemprop="uploadDate">{{ product.createdAt|date('Y-m-d') }}</span>
{% set imgShow = 0 %}
{% for image in product.photos %}
{% if image.main == 1 and imgShow == 0 %}
<span style="display: none" itemprop="thumbnailUrl">{{ language.storeUrl }}/images/product/{{ image.imageName }}</span>
{% set imgShow = 1 %}
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
<div class="column is-full descriptionDiv" id="gallery">
<hr class="hr">
<h2 class="title is-3">
{{ 'gallery'|trans }}
</h2>
<div class="left-25">
<div class="columns is-multiline">
{% for photo in product.photos %}
{% if photo.getIsAvailableForLang(language) %}
<div class="column is-one-third" style="float: left; padding:0px;">
<a id="{{ photo.id }}" class="modal-button" data-href="{{ path('load_gallery_image', {'id':photo.id}) }}" data-target="modal" aria-haspopup="true">
<img {% if photo.alt %}alt="{{ photo.alt }}"{% endif %} style="max-height:210px;" src="{{ language.storeUrl }}/images/product/{{ photo.imageName }}"/>
</a>
<div style="font-size:14px; width: 130px;">
{{ photo.getTranslatedDescription(app.request.locale) }}
</div>
</div>
{% endif %}
{% endfor %}
<div style="clear: both"></div>
</div>
</div>
</div>
{% if comments|length %}
<div class="column is-full descriptionDiv" id="comments">
<hr class="hr">
<h2 class="title is-3" style="margin-left:-5px;">
{{ 'comments_front_txt_title'|trans }}
</h2>
<div class="left-25">
<div class="columns is-multiline">
<div class="column is-full" style="margin-bottom: 20px; margin-top:10px;">
<div class="is-mobile">
<div class="level-left">
{{ 'average_rating'|trans }}   <strong>{{ rating|round(2) }}/5</strong>     <span id="rateit" data-rateit-readonly="true" data-rateit-value="{{ rating }}" data-readonly="true" data-rateit-ispreset="true" data-rateit-mode="font" style="font-size:20px" class="rateit hide-mobile"></span>  
{% if comments|length == 1 %}
  (1 {{ 'single_opinion'|trans }})
{% elseif (comments|length == 2 or comments|length == 3 or comments|length == 4) %}
  ({{ comments|length }} {{ 'pl_two_three_fours_opinions_lexical'|trans }})
{% else %}
  ({{ comments|length }} {{ 'opinions'|trans }})
{% endif %}
</div>
</div>
</div>
<div style="color:red; cursor: pointer" id="show_comments_button">
{{ 'show_comments'|trans }} <i class="fa fa-arrow-circle-down"></i>
</div>
<div id="comment_container" style="display: none">
<div itemscope itemtype="https://schema.org/Product">
<div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
{% if pProduct.getProducer(language.localeShort) %}
<meta itemprop="name" content="{{ pProduct.getProducer(language.localeShort).name }}" />
{% endif %}
</div>
<meta itemprop="description" content="{{ product.description|striptags|slice(0,200) }}" />
<meta itemprop="sku" content="{{ product.id }}" />
{% set imgShow = 0 %}
{% for image in product.photos %}
{% if image.main == 1 and imgShow == 0 %}
<img style="visibility: hidden; left:-1000px; position: absolute;" itemprop="image" src="{{ language.storeUrl }}/images/product/{{ image.imageName }}"/>
{% set imgShow = 1 %}
{% endif %}
{% endfor %}
<span style="visibility: hidden; left:-1000px; position: absolute" itemprop="name">{{ product.name }}</span>
<div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
<meta itemprop="reviewCount" content="{{ comments|length }}" />
<span itemprop="ratingValue" content="{{ rating|round(2) }}"></span>
</div>
<div itemprop="offers" itemtype="https://schema.org/Offer" itemscope>
{% if language.id == 1 %}
<link itemprop="url" href="https://www.centrumkrzesel.pl{{ path('product', {'id':product.id, 'slug':product.slug}, false) }}" />
{% endif %}
<meta itemprop="availability" content="https://schema.org/InStock" />
{% if language.id == 1 %}
<meta itemprop="priceCurrency" content="PLN" />
{% endif %}
{% if language.id == 2 %}
<meta itemprop="priceCurrency" content="CZK" />
{% endif %}
{% if language.id == 3 %}
<meta itemprop="priceCurrency" content="EUR" />
{% endif %}
{% if language.id == 4 %}
<meta itemprop="priceCurrency" content="RON" />
{% endif %}
<meta itemprop="itemCondition" content="https://schema.org/NewCondition" />
<meta itemprop="price" content="{{ minPrice }}" />
<meta itemprop="priceValidUntil" content="{{ 'now'|date('Y')+1 }}-{{ 'now'|date('m') }}-{{ 'now'|date('d') }}" />
</div>
{% for comment in comments %}
<div itemprop="review" itemscope itemtype="https://schema.org/Review">
<span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<span itemprop="ratingValue" style="position: absolute; margin-left: -2000px;">{{ comment.opinionRate }}</span>
</span>
<meta itemprop="datePublished" content="{{ comment.createdAt|date('Y-m-d') }}">
<div class="level is-mobile">
<div class="level-left" style="width: 10%;">
<div class="author-container " style="width: 52px!important;">
<div style="margin:auto; font-size: 20px; background-color: {{ random(['#ffb213', '#b390f1', '#785d55', '#ee8260', '#5abe10']) }}; width: 30px; height: 30px;" class="author-circle">
<span>{{ comment.user.firstname|slice(0,1)|upper }}</span>
</div>
</div>
</div>
<div class="level-left" style="width: 90%;">
<div class="level-item level-item-name" style="justify-content: left;">
<span itemprop="author" itemscope itemtype="https://schema.org/Person">
<strong><span itemprop="name">{{ comment.user.firstname }}</span></strong>
</span>
 
 
<span style="color:grey; font-size:13px;">
{{ comment.createdAt|date('Y-m-d') }}
</span>
      <span id="rateit" data-rateit-readonly="true" data-rateit-value="{{ comment.opinionRate }}" data-readonly="true" data-rateit-ispreset="true" data-rateit-mode="font" style="font-size:20px" class="rateit"></span>
</div>
</div>
</div>
<div class="column is-full" style="margin-bottom: 20px;">
<div class="level is-mobile">
<div class="level-left" style="width: 9%;">
</div>
<div class="level-left content-comment" style="width: 92.5%; display: block">
{{ comment.content }}
{% if comment.imageName %}
<br/>
<div>
<img style="max-width: 600px; margin-top:10px;" src="{{ asset('/images/important/'~comment.imageName~'') | imagine_filter('smallProdImage') }}" alt="{{ product.name }} {{ 'customer_photo'|trans|lower }} {{ comment.user.firstname }}">
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
</div>
{% endif %}
</div>
</div>


<div class="column is-one-fifth-desktop is-hidden-touch">
</div>

</div>
<div class="columns">
<div class="column">
<div class="columns">
<div class="column is-two-third is-offset-one-fifths is-hidden-touch pytania">
<div class="is-size-4 is-600 has-text-centered is-3 ">
{{ 'have_question_call'|trans }}
<span class=""><i class="fas fa-phone"></i> {{ language.helpline }}</span>
</div>
{% if helplineHours %}
<div class="is-size-5 has-text-centered">
{{ 'call_center_work_hours'|trans }}: {{ helplineHours.name }}
</div>
{% endif %}
</div>
</div>
{% if family|length %}
<div class="section">
<div class="container">
<h4 class="subtitle is-4 mobile-spacer has-text-centered">
{{ 'productsFromFamily'|trans }}
</h4>
<div class="columns is-multiline is-mobile lista-produktow">
{% set c = 0 %}
{% for productRow in family %}
{% set product = productRow[0] %}
{% set productData = productRow %}
{% if c < 4 %}
{% set c = c + 1 %}
{% include 'frontend/components/smallProduct.html.twig' with {'cssClass':'card-homepage', 'isOneQuarter':1, 'product':product, 'productData':productData} %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if recommendations|length %}
<div class="section" id="podobne">
<div class="container">
<h4 class="subtitle is-4 mobile-spacer has-text-centered">
{{ 'similarProductsFull'|trans }}
</h4>
<div class="columns is-multiline is-mobile lista-produktow">
{% set c = 0 %}
{% for productRow in recommendations %}
{% set product = productRow[0] %}
{% set productData = productRow %}
{% if c < 4 %}
{% set c = c + 1 %}
{% include 'frontend/components/smallProduct.html.twig' with {'cssClass':'card-homepage', 'isOneQuarter':1, 'product':product, 'productData':productData} %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</section>


</div>
{% if app.request.locale == 'pl' %}
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: 36267 },
{ event: "setEmail", email: "{% if app.user.email is defined %} {{ app.user.email }} {% endif %}" },
{ event: "setSiteType", type: deviceType },
{ event: "viewItem", item: "{{ pProduct.id }}" }
);
</script>
{% endif %}
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'view_item',
currency: '{{ language.getGa4Code }}',
value: '{{ minPrice }}',
ecommerce: {
items: [{
item_name: '{{ pProduct.name }}',
item_id: '{{ pProduct.id }}',
currency: '{{ language.getGa4Code }}',
price: '{{ minPrice }}',
{% if pProduct.productProducer %}
item_brand: '{{ pProduct.productProducer.name }}',
{% endif %}
quantity: '1'
}]
}
});
</script>
<div class="modal" id="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ pProduct.name }}</p>
<button class="delete" style="float: right" aria-label="close"></button>
</header>
<section class="modal-card-body">

</section>
<footer class="modal-card-foot">
<button class="button">{{ 'close'|trans }}</button>
</footer>
</div>
</div>
{% endblock %}

templates/frontend/product/product.html.twig line 1