{% extends 'web/base.html.twig' %}
{% block description %}{{ product.metaDescription }}{% endblock %}
{% block title %}
{% if product.title and product.title|trim %}
{{ product.title }}
{% else %}
{{ product.name }}
{% endif %}
{% endblock %}
{% block body %}
{% set usps = get_information_blocks(product, 1, constant('App\\Enum\\InformationBlockType::ProductUSP').value) %}
<div class="hero hero--product">
{% if find_product_categories_with_type(product.id, 11)|length > 0 %}
{% set hero = find_product_categories_with_type(product.id, 11)[0].upload %}
{% endif %}
{% if hero is defined and hero is not null %}
<picture>
<source srcset="{{ asset(hero.path) }}">
<img src="{{ asset(hero.path) }}" alt="Hero" class="hero__background" loading="eager">
</picture>
{% else %}
<picture>
<source srcset="{{ asset('/build/img/product-hero.webp') }}">
<img src="{{ asset('/build/img/prdoduct-hero.jpg') }}" alt="Hero" class="hero__background" loading="eager">
</picture>
{% endif %}
<div class="hero-content hero-content--breadcrumbs">
<div class="container">
{{ render(path('fragment_product_breadcrumbs', {'product' : product.id})) }}
</div>
<div class="container">
<h1>{{ product.name }}</h1>
{% if usps|length > 0 %}
{% for usp in usps %}
{{ usp.text|raw }}
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% set galeries = find_product_categories_with_type(product.id, 11) %}
{% set colors = find_product_categories_with_type(product.id, 10) %}
{% set articles = find_product_categories_with_type(product.id, 12) %}
{% set services = get_information_blocks(product, 1, constant('App\\Enum\\InformationBlockType::Services').value) %}
{% set parameters = get_information_blocks(product,1,constant('App\\Enum\\InformationBlockType::DetailedSpecifications').value) %}
{% set benefits = get_information_blocks(product, 1, constant('App\\Enum\\InformationBlockType::Benefits').value) %}
{% set controls = get_information_blocks(product, 1, constant('App\\Enum\\InformationBlockType::Controls').value) %}
{% set models = get_information_blocks(product, 1, constant('App\\Enum\\InformationBlockType::Model').value) %}
{% set detailedParameters = get_formatted_parameters_product(product) %}
<nav class="page-navigation">
<div class="container">
<div class="page-navigation-inner">
<button class="page-navigation-toggler js-open-button" data-open="next" type="button" name="Toggle Page Navigation">
{% trans %}Popis{% endtrans %}
</button>
<ul class="page-navigation-list">
<li>
<a class="page-navigation-list__link" href="#product">{% trans %}Popis{% endtrans %}</a>
</li>
{% if galeries|length > 0 %}
<li>
<a class="page-navigation-list__link" href="#gallery">{% trans %}Ukázka realizací{% endtrans %}</a>
</li>
{% endif %}
{% if controls|length > 0 %}
<li>
<a class="page-navigation-list__link" href="#controls">{% trans %}Ovládání{% endtrans %}</a>
</li>
{% endif %}
{% if services|length > 0 %}
<li>
<a class="page-navigation-list__link" href="#service">{% trans %}Průběh spolupráce{% endtrans %}</a>
</li>
{% endif %}
{% if colors|length > 0 %}
<li>
<a class="page-navigation-list__link" href="#colors">{% trans %}Barvy{% endtrans %}</a>
</li>
{% endif %}
<li>
<a class="page-navigation-list__link" href="#price">{% trans %}Cena{% endtrans %}</a>
</li>
{% if detailedParameters|length > 0 %}
<li>
<a class="page-navigation-list__link" href="#parameters">{% trans %}Parametry{% endtrans %}</a>
</li>
{% endif %}
{% if 1 == 2 %}
<li>
<a class="page-navigation-list__link" href="#installOptions">{% trans %}Možnosti umístění{% endtrans %}</a>
</li>
{% endif %}
{% if articles|length > 0 %}
<li>
<a class="page-navigation-list__link" href="#articles">{% trans %}Články{% endtrans %}</a>
</li>
{% endif %}
</ul>
<a href="javascript:" type="button" class="button button--secondary js-dialog-trigger" data-dialog="inquiry-dialog">
{% trans %}Chci pomoci s výběrem{% endtrans %}
</a>
{% include '_fragments/dialog.html.twig' with {
'id': 'inquiry-dialog',
'dialog_header': 'Chci pomoci s výběrem'|trans,
'content': render(path('inquiry_form', {
'formType': constant('App\\Enum\\InquiryObjectType::HELP_WITH_CHOICE_INCLUDED').value,
'selectedProduct': product.id,
}))
} %}
</div>
</div>
</nav>
<section class="page-section mt-7" id="product">
<div class="container">
<div class="product">
{% set uploadPath = asset('/build/img/product-main.jpg') %}
{% set colorName = '' %}
{% if product.upload and product.upload.path %}
{% set uploadPath = asset(product.upload.path) %}
{% set colorName = '' %}
{% endif %}
{% set loadedImage = {"name": colorName, "imageSource": uploadPath} %}
<div class="product__profile" id="mount-product-photo" data-product="{{ product.id }}" data-server-loaded-image="{{ loadedImage|json_encode() }}">
<figure class="product__photo">
<img class="product__main-photo" src="{{ uploadPath }}" alt="">
{% if colorName|length > 1 %}
<figcaption>
Barva:
<span class="product__color-code">{{ colorName }}</span>
</figcaption>
{% endif %}
</figure>
</div>
<div class="product-info">
{{ product.textgeneral|raw }}
{% set widthParameter = null %}
{% set heightParameter = null %}
{% set materialParameter = null %}
{% if detailedParameters|length > 0 %}
{% for parameterGroupName, detailedParameter in detailedParameters %}
{% if parameterGroupName == "Garantovaná šířka" %}
{% set widthParameter = {parameterGroupName, detailedParameter} %}
{% elseif parameterGroupName == "Garantovaná výška" %}
{% set heightParameter = {parameterGroupName, detailedParameter} %}
{% elseif parameterGroupName == "Materiál lamel" %}
{% set materialParameter = {parameterGroupName, detailedParameter} %}
{% endif %}
{% endfor %}
{% endif %}
{% if widthParameter or heightParameter or materialParameter %}
<div class="grid grid--2">
{% if widthParameter or heightParameter %}
<div>
<div class="product-info-parameters__title">Rozměry:</div>
{% if widthParameter %}
<p>
{{widthParameter.parameterGroupName}} od {{ min(widthParameter.detailedParameter.values) }} do {{ max(widthParameter.detailedParameter.values) }} {{ widthParameter.detailedParameter.unit }}
</p>
{% endif %}
{% if heightParameter %}
<p>
{{heightParameter.parameterGroupName}} od {{ min(heightParameter.detailedParameter.values) }} do {{ max(heightParameter.detailedParameter.values) }} {{ heightParameter.detailedParameter.unit }}
</p>
{% endif %}
</div>
{% endif %}
{% if materialParameter %}
<div>
<div class="product-info-parameters__title">{{ materialParameter.parameterGroupName }}:</div>
<p>
{{ materialParameter.detailedParameter.values|join(', ') }}
</p>
</div>
{% endif %}
</div>
<p>
<a class="link" href="#parameters">Všechny parametry</a>
</p>
{% endif %}
{# Vue component (product-color-selection) #}
<div class="product-info__colors" id="product-color-selection" style="display: none"></div>
<div class="product-info-parameters">
<a href="#inquirySection" class="product-info__demand button button--secondary w-100 justify-content-center">{% trans %}Nezávazně poptat{% endtrans %}</a>
<!-- Vue component (showroom-info-vue) -->
<div class="product-info-showrooms" id="showroom-info-vue" product-id="{{ product.id }}">
<div class="placeholder" style="height: 50px"></div>
</div>
<div class="product-info-parameters__brand">
<h2>{% trans %}Dodavatel:{% endtrans %}</h2>
{% if product.producer %}
<a href="/dodavatele/{{ product.producer.slug }}">
<img src="{{ product.producer.upload is defined ? product.producer.upload.path : asset('/build/img/climax.jpg') }}" alt="Climax">
</a>
{% else %}
<img src="{{ asset('/build/img/climax.jpg') }}" alt="Climax">
{% endif %}
</div>
</div>
{# <div class="product-info-showrooms mt-3" id="showroom-info-vue" product-id="{{ product.id }}"></div> #}
{% if benefits|length > 0 %}
<div>
<div class="grid grid--3 mt-3">
{% for benefit in benefits %}
{{ benefit.text|raw }}
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</section>
{% if galeries|length > 0 %}
{% set totalUploads = 0 %}
{% for gallery in galeries %}
{% for categoryUploadGroup in gallery.categoryUploadGroups %}
{% set totalUploads = totalUploads + categoryUploadGroup.UploadGroup.upload|length %}
{% endfor %}
{% endfor %}
{% if totalUploads > 1 %}
<section class="page-section" id="gallery">
<div class="product-gallery-wrapper">
<div class="product-gallery">
{% for gallery in galeries %}
{% for categoryUploadGroup in gallery.categoryUploadGroups %}
{% for upload in categoryUploadGroup.UploadGroup.upload %}
<div class="product-gallery__slide">
<a href="{{ asset(upload.path) }}" class="glightbox" data-gallery="productGallery">
<img class="gallery-item__img" src="{{ asset(get_upload_background(upload)) }}" alt="{{ upload.description }}">
</a>
</div>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
</div>
</section>
{% else %}
<section class="page-section" id="gallery">
<div class="product-gallery-wrapper">
<div class="basic-box--centered">
{% for gallery in galeries %}
{% for categoryUploadGroup in gallery.categoryUploadGroups %}
{% for upload in categoryUploadGroup.UploadGroup.upload %}
<a href="{{ asset(upload.path) }}" class="glightbox" data-gallery="productGallery">
<img class="gallery-item__img" src="{{ asset(get_upload_background(upload)) }}" alt="{{ upload.description }}">
</a>
{% endfor %}
{% endfor %}
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% endif %}
{# 3D MODELS SECTION #}
{% if models|length > 0 %}
{% for model in models %}
{{ model.text|raw }}
{% endfor %}
{% endif %}
{# END 3D MODELS SECTION #}
{# PARAMETERS SECTION #}
{% if detailedParameters|length > 0 %}
<section class="page-section" id="parameters">
<div class="container">
<h2>Parametry</h2>
<div class="parameters mt-8">
{% for parameterGroupName, detailedParameter in detailedParameters %}
<div class="parameters__type">
<h3 class="parameters__type-title">
{{ parameterGroupName }}
</h3>
<div class="parameters__type-value">
{% if detailedParameter.filter == "range" %}
Od {{ min(detailedParameter.values) }} do {{ max(detailedParameter.values) }} {% if detailedParameter.unit %}{{ detailedParameter.unit }}{% endif %}
{% else %}
{% if detailedParameter.unit %}
{{ detailedParameter.values|map(v => v ~ ' ' ~ detailedParameter.unit)|join(', ') }}
{% else %}
{{ detailedParameter.values|join(', ') }}
{% endif %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{# END PARARETERS SECTION #}
{% if controls|length > 0 %}
{% for control in controls %}
{{ control.text|raw }}
{% endfor %}
{% endif %}
{% if services|length > 0 %}
<section class="page-section" id="service">
{% for service in services %}
{{ service.text|raw }}
{% endfor %}
</section>
{% endif %}
{% if colors|length > 0 %}
<section class="page-section" id="colors">
<div class="container">
<h2>{% trans %}Široká nabídka barev{% endtrans %}</h2>
{% for color in colors %}
{% if colors|length > 1 %}
{{ color.html|raw }}
{% else %}
<h3 class="mt-bigger h4">
{% if color.html %}
{{ color.html|raw }}
{% else %}
{% trans %}Barvy lamel{% endtrans %}
{% endif %}
</h3>
{% endif %}
<div class="colors">
{% for categoryUploadGroup in color.categoryUploadGroups %}
{% for upload in categoryUploadGroup.UploadGroup.upload %}
<div class="color">
<a href="{{ asset(upload.path) }}" class="glightbox" data-gallery="colors" data-glightbox="title:{{ upload.description }}">
<img src="{{ asset(get_upload_small(upload)) }}" loading="lazy" alt="{{ upload.description }}" class="color__image">
</a>
<div class="color__code">{{ upload.description }}</div>
</div>
{% endfor %}
{% endfor %}
</div>
{% endfor %}
</div>
</section>
{% endif %}
<section class="page-section bg-fancy" id="price">
<div class="container">
<div class="narrow text-center">
<h2>{% trans %}Orientační cena{% endtrans %}</h2>
<p>{% trans %}Pro orientační cenovou nabídku nám prosím vyplňte kontaktní formulář. Po návštěvě našeho technika, zaměříme daný prostor a cenovou nabídku upřesníme. Předem děkujeme za vyplnění kontaktního formuláře.{% endtrans %}</p>
</div>
<a href="#inquirySection" class="button button--secondary button--centered mt-6">{% trans %}Nezávazně poptat{% endtrans %}</a>
</div>
</section>
{% if parameters|length > 0 %}
<section class="page-section" id="parameters">
<div class="container">
<h2>{% trans %}Podrobné specifikace{% endtrans %}</h2>
<div class="mt-big">
{% for informationBlock in parameters %}
<details class="accordion">
<summary class="accordion__summary">
<h3 class="h4">{{ informationBlock.title }}</h3>
</summary>
<div class="accordion__content">
{{ informationBlock.text|raw }}
</div>
</details>
{% endfor %}
</div>
</div>
</section>
{% endif %}
{% set to_download = get_product_uploads(product, 1, null, true) %}
{% if to_download|length > 0 %}
<section class="page-section mt-biggest" id="files">
<div class="container">
<h2>{% trans %}Dokumenty ke stažení{% endtrans %}</h2>
<ul class="files-grid mt-5">
{% for upload in to_download %}
<li class="files-grid__item">
<a href="{{ upload.path }}" class="files-grid__link" target="_blank">
<div class="files-grid__link-icon">
<svg>
<use href="{{ asset('/build/svg/_icons.svg#download') }}"></use>
</svg>
</div>
{{ upload.title | default(upload.name) }}
</a>
</li>
{% endfor %}
</ul>
</div>
</section>
{% endif %}
{% if related_products|length > 0 %}
<section class="page-section mt-biggest" id="relatedProducts">
<div class="container">
<h2>{% trans %}Podobné produkty{% endtrans %}</h2>
{{ include('/shop/product/_product_tiles.html.twig', {products: related_products}) }}
</div>
</section>
{% endif %}
{{ render( path('inquiry_form', {
'formType': constant('App\\Enum\\InquiryObjectType::NON_BINDING_INQUIRY_INCLUDED').value,
'selectedProduct': product.id,
})) }}
{% if articles|length > 0 %}
<section class="page-section" id="articles">
<div class="container">
<h2 class="text-center">{% trans %}Zajímavosti ze světa žaluzií{% endtrans %}</h2>
<div class="blog-article-cards mt-big">
{% for article in articles %}
<a href="#" class="blog-article-card">
<div class="blog-article-card__image-wrap">
<img src="{{ asset('/build/img/blog-1.jpg') }}" alt="Blog 1" class="blog-article-card__image">
</div>
<time class="blog-article-card__date" datetime="10.2.2023">10.2.2023</time>
<h3 class="blog-article-card__title">
{% trans %}Co ovlivňuje cenu žaluzií?{% endtrans %}
</h3>
{# <p>{% trans %}Tacimates et dolorum an suscipit sea sed utroque id instructior in similique mel ea populo quien.{% endtrans %}</p> #}
</a>
{% endfor %}
</div>
<a href="#" class="button button--primary button--centered mt-bigger">{% trans %}Další články{% endtrans %}</a>
</div>
</section>
{% endif %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('mount-showroom-availability') }}
{{ encore_entry_script_tags('mount-product-color-selection') }}
{# <script src="{{ asset('/build/js/glightbox.js') }}"></script> #}
{# <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script> #}
{# {{ encore_entry_script_tags('app') }} #}
{# <script defer>
document.addEventListener("DOMContentLoaded", () => {
var lightbox = GLightbox();
lightbox.on('open', (target) => {
});
});
</script> #}
{% endblock %}