{% sw_extends '@Storefront/storefront/base.html.twig' %}
{% block base_head %}
{% sw_include '@Storefront/storefront/page/product-detail/meta.html.twig' %}
{% endblock %}
{% block base_content %}
{% block page_product_detail %}
<div class="product-detail"
itemscope
itemtype="https://schema.org/Product">
{% block page_product_detail_inner %}
{% block page_product_detail_content %}
<div class="product-detail-content">
{% block page_product_detail_headline %}
<div class="row align-items-center product-detail-headline">
{% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %}
</div>
{% endblock %}
{% set mediaItems = page.product.media.media %}
{% block page_product_detail_main %}
<div class="row product-detail-main">
{% block page_product_detail_media %}
<div class="col-lg-7 product-detail-media">
{% if page.product.media %}
{% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
'mediaItems': mediaItems,
'zoom': true,
'zoomModal': true,
'displayMode': 'contain',
'gutter': 5,
'minHeight': '430px',
'navigationArrows': 'inside',
'navigationDots': 'inside',
'galleryPosition': 'left',
'isProduct': true,
'fallbackImageTitle': page.product.translated.name,
'startIndexThumbnails': 1,
'startIndexSlider': 1,
'keepAspectRatioOnZoom': false
} %}
{% endif %}
</div>
{% endblock %}
{% block page_product_detail_buy %}
<div class="col-lg-5 product-detail-buy">
{% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
{% block page_product_detail_tabs %}
<div class="product-detail-tabs">
{% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
</div>
{% endblock %}
{% block page_product_detail_cross_selling %}
{% if page.crossSellings.elements is defined and page.crossSellings.elements|filter(item => item.total > 0)|length > 0 %}
<div class="product-detail-tabs product-detail-cross-selling">
{% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with {
crossSellings: page.crossSellings
} %}
</div>
{% endif %}
{% endblock %}
{% endblock %}
</div>
{% endblock %}
{% endblock %}