{% extends "layout/default.html.twig" %}
{% block content %}
{{ jld_root(product, true, true) }}
{% set brickAttributes = product.getObjectBrickAttributes() %}
{% set brand = null %}
{% if product.brand %}
{% set brand = product.brand.getTitle(app.request.locale) %}
{% endif %}
{% set detailUrl = linkGenerator(product) %}
{% set productCategory = product.category %}
{% if productCategory.getDisplayTitle(app.request.locale) != '' %}
{% set catTitle = productCategory.getDisplayTitle(app.request.locale) ~ '-' %}
{% else %}
{% set catTitle = '' %}
{% endif %}
{% do elements_canonical(detailUrl, false) %}
{% do elements_opengraph().setUrl(detailUrl) %}
{% do elements_head_title().setTitle((product.seoTitle ?: catTitle ~ product.title ~ ' ' ~ 'von'|trans ~ ' ' ~ brand), true) %}
{% do elements_head_meta().setDescription((product.seoDescription ?: 'Jetzt über das {Category}Modell {Producttitle} von {Brand} informieren, Produktbroschüren lesen und Kuhn-Händler ganz einfach kontaktieren'|trans({'{Category}':catTitle, '{Producttitle}':product.title, '{Brand}':brand})), true) %}
{% do elements_opengraph().setDescription(product.seoDescription ?: product.shortText) %}
{% do elements_opengraph().addImage(product.mainImage()) %}
<main id="main-content" role="main" class="main-content content-block js-content-visibility content-visibility--auto">
<section class="container">
{% do breadcrumbHelper().add({
'parentId': document.getId(),
'url': detailUrl,
'label': product.title,
}) %}
{{ include('navigation/breadcrumb.html.twig') }}
</section>
<section class="container content-block">
<div class="row gy-4">
<div class="col-md-6 order-md-0 order-1">
{% set imageGallery = [product.mainImage]|merge(product.imageGallery.items)|merge(brickAttributes['images']|default([])) %}
{% if imageGallery is not empty %}
{{ include('includes/product/detail-slider.html.twig', {
'imageGallery': imageGallery,
}) }}
{% endif %}
{% if product.getShortText(app.request.locale) %}
{{ include('includes/area-templates/wysiwyg.html.twig', {
className: 'mt-100',
content: product.getShortText(app.request.locale),
}) }}
{% endif %}
{% if product.getDescription(app.request.locale) %}
{{ include('includes/area-templates/wysiwyg.html.twig', {
className: not product.getShortText(app.request.locale) ? 'mt-100' : 'mt-0',
content: product.getDescription(app.request.locale),
}) }}
{% endif %}
{% if brickAttributes['attributes']['th'] is defined and brickAttributes['attributes']['td'] is defined %}
<section class="{{ not product.getShortText(app.request.locale) ? 'mt-100' }} mb-5 content-block-small">
{{ include('includes/product/detail-table-vertical.html.twig', {
'th': brickAttributes['attributes']['th'],
'td': brickAttributes['attributes']['td'],
}) }}
</section>
{% endif %}
{% if product.internalBrand == 'palfinger' %}
{% if brickAttributes and brickAttributes['table'] is defined and brickAttributes['table']['head'] and brickAttributes['table']['body'] %}
<section class="mb-5 content-block-small">
{{ include('includes/product/detail-table-horizontal.html.twig', {
'th': ['']|merge(brickAttributes['table']['head']),
'td': brickAttributes['table']['body'],
}) }}
</section>
{% endif %}
{% endif %}
{% if product.getVideos() %}
<div class="container-small">
{% for video in product.getVideos().items %}
{% if video.video is not empty or video.videoUrl is not empty %}
{% if video.video is not empty %}
{{ include('includes/media/video.html.twig', {
video: video.video,
aspectRatio: '16x9',
imageThumbnail: 'media-area',
isLightbox: true,
attributes: {
'playsinline': true,
},
removeAttribute: ['controls']
}) }}
{% endif %}
{% if video.videoUrl is not empty and video.video is empty %}
<div class="d-block video__container js-video ratio ratio-16x9">
{% set sourceExternalVideo = video.videoUrl %}
{% set videoUrl = video.videoUrl %}
{% set videoDescription = videoDescription|default('') %}
{% embed('@ElementsCmsTools/consent-overlay.html.twig') with {
'classNames': {
'wrapper': 'consent ratio-item',
'overlay': 'consent__overlay ratio-item',
'template': 'ratio-item',
},
'service': 'marketing',
'buttonText': 'cookies.Marketingcookies akzeptieren'|trans,
'overlayText': 'cookies.Um das Video anzusehen, müssen Sie die Cookies akzeptieren'|trans
} %}
{% block consentIframe %}
<a href="" data-src='{{ sourceExternalVideo }}' class="js-lightbox__item ratio-item">
<img src="{{ elements_videoHelper().getYoutubePoster(videoUrl|split('/')|last) }}" class="ratio-item media-video shadow" alt="{{ videoDescription }}"/>
<button type="button" class="box-shadow-hover btn-play">
<span class="btn-play__icon icon icon-play" aria-label="{{ 'global.openVideoPlayer'|trans }}"></span>
<span class="btn-play__text">{{ 'global.playVideo'|trans }}</span>
</button>
</a>
{% endblock %}
{% endembed %}
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
<div class="col-md-4 offset-md-1 order-md-1 order-0">
{{ include('includes/product/detail-sideInfo.html.twig', {
'product': product,
'parent': document,
'parentUrl': document.fullPath,
'brand': brand,
'model': product.getTitle(app.request.locale) ?: product.getTitle('de'),
'category': product.category,
'contact': contactForProduct(product),
'downloads': product.getDownloads(app.request.locale) ?: product.getDownloads('en'),
'detailUrl': detailUrl,
}) }}
</div>
</div>
</section>
{% if document.getProperty('productTeaser') %}
{{ pimcore_inc(document.getProperty('productTeaser')) }}
{% endif %}
</main>
{{ pimcore_placeholder('jsFile').set("js/content") }}
{% endblock %}