{% extends 'pageTemplateProducts.html.twig' %}
{% block content %}
{% set productName = product.getName() %}
<div class="section">
<div class="main-content flex-col">
<div class="col xs-12 m-5">
{% 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-7">
<div class="product-info-container text-only">
<div class="product-title-container">
<h1>{{ productName |trademark }}</h1>
</div>
<div class="product-variation-container">
{% if variants %}
<ul class="product-variants">
{% for variant in variants %}
<li {% if variant.getId() == product.getId() %} class="active" {% endif %}>
{% set detailViewUri = pimcore_url(
{
"name": variant.getUrlTitle(),
"articlenumber": variant.getArticleNumber()
},
"shopHandlerProductDetail"
) %}
<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>
{% endif %}
</div>
<div class="product-short-description-container">
<span class="no-padding">{{ product.getTextContentByType("shortTextRepresentation", document) | raw }}</span>
</div>
<div class="product-price-container">
{% set priceInfo = product.getOSPriceInfo() %}
{% set price = product.getOSPrice() %}
{% set oldPrice = product.getPriceOld() %}
{% set currency = price.getCurrency() %}
{% if oldPrice!=0 %}
<div class="product-price old">
{{ currency.toCurrency(oldPrice) }}
</div>
{% endif %}
<div class="product-price">
{{ price }}
</div>
</div>
{% if product.getDeliverability() == 'unavailable' %}
{% else %}
<div class="product-action-wrapper">
{% set jsSubmitClass = '' %}
{% if enabledWebsiteFeatures is defined and enabledWebsiteFeatures['sidebarCart'] is defined and enabledWebsiteFeatures['sidebarCart'] == true %}
{% set jsSubmitClass = 'js-submit-ajax' %}
{% endif %}
<form method="post" class="{{ jsSubmitClass }}" action="{{ pimcore_url({"action": "add"}, "shopHandlerCart") }}">
<div class="product-action-container">
<div class="product-quantity">
<input type="number" name="quantity" value="1" min="1"/>
<input type="hidden" name="article" value="{{ product.getArticleNumber() }}">
</div>
<div class="product-action-button">
<button class="button btn-default">
{{ 'Add to Cart'|trans }}
</button>
</div>
</div>
{% for message in app.flashes('error') %}
{% if message.message %}
{% if message.id == product.id %}
<div class="error-message inline">
{{ message.message }}
</div>
{% endif %}
{% else %}
<div class="error-message inline">
{{ message }}
</div>
{% endif %}
{% endfor %}
{% if enabledWebsiteFeatures is defined and enabledWebsiteFeatures['sidebarCart'] is defined and enabledWebsiteFeatures['sidebarCart'] == true %}
<div class="error-messages-container error-message" style="display: none;"></div>
{% endif %}
</form>
{% if oldPrice and minimumPrice30DaysAllCountries[country] is defined and minimumPrice30DaysAllCountries[country] %}
<div style="margin-bottom: 10px;">
{{ 'minPriceLast30Days' | trans }} {{ currency.toCurrency(minimumPrice30DaysAllCountries[country]) }}
</div>
{% endif %}
</div>
{% endif %}
<div class="product-additional-information-container">
<div class="product-additional-information-row">
{% if product.getDeliverability() != 'unavailable' %}
<div class="product-ability">
{{ product.getDeliverability() |trans }}
</div>
<div>
{{ 'Delivery Time' |trans }} {{ product.getDeliverytime() |trans }}
</div>
{% else %}
<div class="product-ability">
{{ product.getDeliverability() |trans }}
</div>
{% endif %}
</div>
<div class="product-additional-information-row">
<div>
{% set ammount = product.getAmmount() %}
Inhalt:
{{ ammount.getValue() }} {{ ammount.getUnit().getAbbreviation() |trans }}
{% if showReferencePrice and ammount.getUnit().getAbbreviation() != 'stk' %}
{% set pricereference = product.getPriceReferenceNew() %}
{% if(pricereference>0) %}
({{ currency.toCurrency(pricereference) }}
{% if(pricereference) %} /
{% set value = product.getAmmount().getUnit().abbreviation | lower %}
{% if value == 'mg' or value == 'g' or value == 'kg' %}
kg
{% endif %}
{% if value == 'ml' or value == 'l' %}
l
{% endif %}
{% if value == 'stk' %}
Stk
{% endif %}
{% endif %})
{% endif %}
{% endif %}
</div>
<div>
{% if product.getDeliveryCostHint() != '' %}
<a href="{{ 'Versandlink' |trans }}" target="_blank">{{ product.getDeliveryCostHint() }}</a>
{% else %}
{{ 'inkl. MwSt.,' |trans }} <a href="{{ 'Versandlink' |trans }}" target="_blank">{{ ' zzgl. Versand' |trans }}</a>
{% endif %}
</div>
</div>
{% if product.getDeliverability() == 'unavailable' %}
<div class="product-additional-information-row">
{% include 'Partials/productStockInformCustomer.html.twig' %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if(isProductFood) %}
{% include 'Partials/FitsPerfectly.html.twig' %}
{% endif %}
<div class="section">
<div class="main-content flex-col">
<div class="col xs-12 m-6 l-8">
<div class="text-only">
<div class="text">
<h4>{{ 'Produkt' |trans }}</h4>
<span class="no-padding">{{ product.getTextContentByType("longTextRepresentation", document) | raw | trademark }}</span>
<div class="product-additional-information">
<div class="information-item">
<div>
<p>{{ 'SKU:' |trans }}</p>
</div>
<div>
<p>{{ product.getArticleNumber() }}</p>
</div>
</div>
{% if product.getWeight() %}
<div class="information-item">
<div>{{ 'Gewicht:' |trans }} </div>
<div>
<p>{{ product.getWeight() }} kg</p>
</div>
</div>
{% endif %}
{% if product.getWidth() and product.getHeight()and product.getDepth() %}
<div class="information-item">
<div>{{ 'Maße in cm (B/H/L):' |trans }} </div>
<div>
<p>{{ product.getWidth() }} / {{ product.getHeight() }} / {{ product.getDepth() }} </p>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="col xs-12 m-6 l-4">
{% if isProductFood %}
<div class="sales-description-wrapper">
{{ product.getSalesDescription() }}
</div>
<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>
</div>
{% include 'Partials/ScovilleScale.html.twig' %}
{% set relatedProducts = product.getrelatedProducts %}
{% if relatedProducts %}
{% if relatedProducts|length > 3 %}
<div class="section panel has-slider">
{% else %}
<div class="section panel">
{% endif %}
<div class="main-content flex-col box-align-center">
{% if relatedProducts %}
{% include 'Partials/relatedProducts.html.twig' %}
{% endif %}
</div>
</div>
{% endif %}
{% endblock %}