{% extends 'pageTemplateProducts.html.twig' %}
{% block content %}
{% set productName = product.name %}
<div class="section">
<div class="product-container-top">
<div class="main-content flex-col box-center">
{% if prevProduct and nextProduct %}
<div class="xs-12 flex-col product-nav">
<div class="product-nav-left">
{% set detailViewUriPrevProduct = pimcore_url(
{
"name": prevProduct.urlTitle,
"articlenumber": prevProduct.articleNumber,
"productCategoryId": productCategoryId
},
"shopHandlerProductDetailMautner"
) %}
{% set detailViewUriNextProduct = pimcore_url(
{
"name": nextProduct.urlTitle,
"articlenumber": nextProduct.articleNumber,
"productCategoryId": productCategoryId
},
"shopHandlerProductDetailMautner"
) %}
<a href="{{ detailViewUriPrevProduct}}">
<span>{{ prevProduct.name|trademark }}</span>
{% set prevProductImage = prevProduct.getDetailViewRepresentationNew() |objectFallbackImage %}
{{ prevProductImage.getThumbnail("productDetailNavImage" ~ bundleName).getHtml() |raw }}
</a>
</div>
<div class="product-nav-right">
<a href="{{ detailViewUriNextProduct}}">
<span>{{ nextProduct.name|trademark }}</span>
{% set nextProductImage = nextProduct.getDetailViewRepresentationNew() |objectFallbackImage %}
{{ nextProductImage.getThumbnail("productDetailNavImage" ~ bundleName).getHtml() |raw }}
</a>
</div>
</div>
{% endif %}
<div class="xs-12 l-10 flex-col">
<div class="col xs-12 m-6 image">
{% set galleryItems = product.getGallery().getItems() %}
{% if(galleryItems|length > 0) %}
<div class="product-item-image-wrapper slider slick-slider has-slider">
{% else %}
<div class="slider slick-slider">
{% endif %}
<div class="product-image-item">
{% set productDetailImage = product.getDetailViewRepresentationNew() |objectFallbackImage %}
{{ productDetailImage.getThumbnail("productImageDetail" ~bundleName).getHtml() |raw }}
</div>
{% if(product.getGallery) %}
{% for gallery in product.getGallery %}
{% if gallery != null %}
<div class="product-image-item">
{{ gallery.getImage().getThumbnail("productGalleryDetail" ~bundleName).getHtml() |raw }}
</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
<div class="col xs-12 m-6 text">
<div class="product-info-container text-only">
<div class="product-short-description-container">
<span class="no-padding">{{ product.getTextContentByType("shortTextRepresentation", document) | raw }}</span>
</div>
<div class="product-title-container">
<h1>{{ productName |trademark }}</h1>
</div>
{% if variants %}
<div class="product-variation-container">
<ul class="product-variants">
{% for variant in variants %}
<li {% if highlightedProductId == variant.getId %} class="active" {% endif %}>
{% set detailViewUri = pimcore_url(
{
"name": variant.getUrlTitle(),
"articlenumber": variant.getArticleNumber(),
"productCategoryId": productCategoryId
},
"shopHandlerProductDetailMautner"
) %}
<a href="{{ detailViewUri }}">
<span class="product-variation-size">
{{ variant.getVariantQualifier() }}
</span>
<span class="product-variation-thumbnail">
<img src="{{ variant.getProductImage().getThumbnail("productDetailImageVariants" ~bundleName) }}"
alt="{% if variant.getProductImage().getMetadata() is not empty %}{{ variant.getProductImage().getMetadata().0.data }}{% else %}{{ productName }}{% endif %}"/>
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
<span class="no-padding">{{ product.getTextContentByType("longTextRepresentation", document) | raw | trademark }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="text-image textpic-intext nowrap align-right">
<div class="main-content flex-col box-center">
<div class="xs-12 l-10 flex-col">
<div class="col xs-12 m-6 text">
{% if isProductFood %}
<div id="tabber-xyz" class="tabber" data-tab-type="default">
<ul class="tabs resp-tabs-list tab-id">
<li>{{ 'Nährwerte' |trans }}</li>
<li>{{ 'Zutaten' |trans }}</li>
</ul>
<div class="resp-tabs-container tab-id">
<div class="tab-content">
{% include 'Partials/NutritionFactsDefault.html.twig' %}
</div>
<div class="tab-content">
{% include 'Partials/IngredientsDefault.html.twig' %}
</div>
</div>
</div>
{% endif %}
</div>
<div class="col xs-12 m-6 image">
{% if product.getAdditionalImage() %}
{{ product.getAdditionalImage().getThumbnail("textImage" ~ bundleName).getHtml()|raw }}
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if product.getHeadlineTop %}
{% include 'Partials/StageSpecificProducts.html.twig' %}
{% endif %}
{% if(isProductFood) %}
{% include 'Partials/FitsPerfectly.html.twig' %}
{% endif %}
{% set relatedProducts = product.getrelatedProducts %}
{% if relatedProducts %}
{% include 'Partials/relatedProducts.html.twig' %}
{% endif %}
{% set magazineSelect = product.getMagazinSelect() %}
{% if magazineSelect is not empty %}
{% include 'Partials/relatedMagazines.html.twig' %}
{% endif %}
{% endblock %}