{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
{% block base_content %}
<div class="cms-section-sidebar cms-section-sidebar-mobile-hidden full-width row">
{# orig:
<div class="cms-section-sidebar-sidebar-content col-md-3 col-lg-2 col-xl-2">
<div class="cms-element-{{ element.type }}">
{% set navigationResult1 = page.header.navigation.tree %}
{% set activeResult1 = page.header.navigation.active %}
<div class="category-navigation-box">
{% sw_include '@Storefront/storefront/layout/sidebar/category-navigation.html.twig' with {
navigationTree: page.header.navigation.tree,
activeResult: page.header.navigation.active
} only %}
</div>
</div>
</div>
#}
{% sw_include '@Storefront/storefront/layout/sidebar/overlay-categories.html.twig' %}
{% block page_product_detail %}
{# Albert: breadcrumb uit product-detail-content gehaald, zodat hij centreert t.o.v. de pagina #}
<div class="cms-section-sidebar-main-content col-12">
{% block page_product_detail_breadcrumb_ideabooks %}
{% deprecated '@deprecated tag:v6.4.0 - Breadcrumb will be handled by "base_breadcrumb" in "storefront/base.html.twig"' %}
<div class="breadcrumb product-breadcrumb container">
{# @deprecated tag:v6.4.0 parameter `navigationTree`, `categoryTree` and `product` will be removed #}
{% sw_include '@Storefront/storefront/component/product/breadcrumb.html.twig' with {
context: context,
category: page.product.seoCategory,
navigationTree: page.header.navigation.tree,
categoryTree: page.product.categoryTree|last,
product: page.product
} only %}
</div>
{% endblock %}
</div>
<div class="cms-section-sidebar-main-content col-12">
{# row toegevoegd om bootstrap cols te laten werken #}
<div class="product-detail row"
itemscope
itemtype="https://schema.org/Product">
{% block page_product_detail_inner %}
{% block page_product_detail_content %}
<div class="product-detail-content col-sm-12 col-md-7 col-lg-9 offset-md-1">{# extra linkermarge op md en lg met offset-md-1 #}
{% block page_product_detail_breadcrumb %}
{# Albert: breadcrumb uit product-detail-content gehaald, zodat hij centreert t.o.v. de pagina #}
{# {{ parent() }} #}
{% endblock %}
{% block page_product_detail_headline %}
{{ parent() }}
{% 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-11 product-detail-media">
{% if page.product.media %}
{# Albert: zoom uit #}
{% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
'mediaItems': mediaItems,
'zoom': false,
'zoomModal': true,
'displayMode': 'contain',
'gutter': 5,
'minHeight': '430px',
'navigationArrows': 'inside',
'navigationDots': 'inside',
'galleryPosition': 'left',
'isProduct': true,
'fallbackImageTitle': page.product.translated.name,
'startIndexThumbnails': page.product.cover.position + 1,
'startIndexSlider': page.product.cover.position + 1
} %}
{% endif %}
</div>
{% endblock %}
</div>
<div class="row product-detail-main">
{% block page_product_detail_buy %}
<div class="col-lg-11 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 %}
<div class="product-detail-tabs product-detail-cross-selling col-sm-12 col-md-4 col-lg-2">
{{ parent() }}
</div>
{% endblock %}
{% endblock %}
</div>
</div>
{% endblock %}
</div>
{% endblock %}