{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}{% block base_flashbags %} {{ parent() }}{% endblock %}{% block base_main_inner %} {% block base_main_container %} {{ parent() }} {% endblock %}{% endblock %}{% if page.product.extensions.landingPageLayout.landingPage %} {% set classesForBreadcrumb = 'product-detail-campaign-page' %} {% set classDisplayNone = 'display-none' %}{% endif %}{% block base_breadcrumb %} <div class="breadcrumb cms-breadcrumb container {{ classesForBreadcrumb }}" style=""> {% sw_include '@Storefront/storefront/layout/breadcrumb.html.twig' with { context: context, category: page.product.seoCategory, pageTitle: page.product.name } only %} {% if page.product.extensions.landingPageLayout.landingPage %} {% block product_program_and_details_switch_links_block %} <div class="product-program-detail-page-switch-container" > <div class="product-program-detail-page-switch-links"> <a id="product-programm-btn" class="nav-link main-navigation-link active"> <div class="main-navigation-link-text"> <span itemprop="name">Das Programm</span> </div> </a> <a id="product-detail-btn" class="nav-link main-navigation-link"> <div class="main-navigation-link-text"> <span itemprop="name">Details</span> </div> </a> </div> </div> {% endblock %} {% endif %} </div> {# add here landingpage layout #} {% block landing_page_of_product_page_block %} <div class="landing-page-container" id="landing-page-container"> {% if page.product.extensions.landingPageLayout.landingPage %} {% block page_content %} <div class="cms-page"> {% block page_content_blocks %} {% sw_include "@Storefront/storefront/page/content/detail.html.twig" with {'cmsPage': page.product.extensions.landingPageLayout.landingPage, 'isProductDetail':true } %} {% endblock %} </div> {% endblock %} {% endif %} </div> {% endblock %}{% endblock %}{% block page_product_detail %} <div id="product-detail" class="product-detail {{ classDisplayNone }}" itemscope itemtype="https://schema.org/Product"> {% block page_product_detail_inner %} {% block page_product_detail_content %} {% set column = page.product.translated.customFields.product_detail_column %} {% set shortDescription = page.product.translated.customFields.product_short_description %} {% if column is null %} {% set column = "2" %} {% endif %} <div class="product-detail-content"> <div class="container "> {% block page_product_detail_headline %} {% if theme_config('log-detail-headline-position') == 'top' %} <div class="row align-items-center product-detail-headline"> {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %} </div> {% endif %} {% 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="{% if column == 3 %}col-lg-4{% else %}col-lg-5{% endif %} product-detail-media"> {% if page.product.media %} {% if column == 3 %} {% set zoomConfig = true %} {% else %} {% set zoomConfig = false %} {% endif %} {% if theme_config('log-detail-media-thumbnails-position') == 'bottom' %} {% set galleryPositionConfig = 'underneath' %} {% else %} {% set galleryPositionConfig = 'left' %} {% endif %} {% if theme_config('log-detail-media-thumbnails-enable') == 0 %} {% set thumbnailsConfig = false %} {% else %} {% set thumbnailsConfig = true %} {% endif %} {% if theme_config('log-detail-media-navigation-enable') == 0 %} {% set navigationArrowsConfig = false %} {% else %} {% set navigationArrowsConfig = 'inside' %} {% endif %} {% if theme_config('log-detail-media-paging-enable') == 0 %} {% set navigationDotsConfig = false %} {% else %} {% set navigationDotsConfig = 'inside' %} {% endif %} {% if column == 3 %} {% set minHeightConfig = '420px' %} {% else %} {% set minHeightConfig = '500px' %} {% endif %} {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with { 'mediaItems': mediaItems, 'zoom': zoomConfig, 'zoomModal': true, 'displayMode': 'contain', 'gutter': 5, 'minHeight': minHeightConfig, 'navigationArrows': 'outside', 'navigationDots': navigationDotsConfig, 'galleryPosition': galleryPositionConfig, 'isProduct': true, 'thumbnails': thumbnailsConfig, 'fallbackImageTitle': page.product.translated.name, 'startIndexThumbnails': page.product.cover.position + 1, 'startIndexSlider': page.product.cover.position + 1 } %} {% endif %} </div> {% endblock %} {% block page_product_detail_buy %} {% if column == 3 %} <div class="col-lg-4 js-magnifier-zoom-image-container product-detail-mid"> <div class="product-detail-mid-inner"> <div class="cube-category"> {% if customFields.custom_product_fields_digital == 1 %} Digital Cube {% else %} Product Cube {% endif %} </div> {% if theme_config('log-detail-headline-position') == 'buybox' %} {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %} {% endif %} {% if shortDescription and theme_config('log-detail-show-short-description') == 'true' %} {% sw_include '@Storefront/storefront/page/product-detail/short-description.html.twig' with { shortDescription: page.product.translated.customFields.product_short_description } only %} {% endif %} {% if theme_config('log-detail-buybox-reviews') == 'true' %} {% sw_include '@Storefront/storefront/page/product-detail/reviews.html.twig' %} {% endif %} <div class="product-detail-delivery-information"> {% sw_include '@Storefront/storefront/component/delivery-information.html.twig' %} </div> {% if page.product.productNumber %} <div class="product-detail-ordernumber-container"> {% block page_product_detail_ordernumber_label %} <span class="product-detail-ordernumber-label"> {{ "detail.productNumberLabel"|trans|sw_sanitize }} </span> {% endblock %} {% block page_product_detail_ordernumber %} <meta itemprop="productID" content="{{ page.product.id }}"/> <span class="product-detail-ordernumber" itemprop="sku"> {{ page.product.productNumber }} </span> {% endblock %} </div> {% endif %} </div> </div> {% endif %} <div class="{% if column == 3 %}col-lg-4{% else %}col-lg-7{% endif %} product-detail-buy"> <div class="product-detail-buy-inner"> {% if column == 2 %} <div class="cube-category"> {% if customFields.custom_product_fields_digital == 1 %} Digital Cube {% else %} Product Cube {% endif %} </div> {% block page_product_detail_buy_headline %} {% if theme_config('log-detail-headline-position') == 'buybox' %} {% sw_include '@Storefront/storefront/page/product-detail/headline.html.twig' %} {% endif %} {% endblock %} <div class="highlight-properties-description-desktop d-none d-lg-block"> {% for group in page.product.extensions.highlightProperties %} <div class="highlight-properties"> {% for property in group.options %} <span class="property-name">+ {{property.translated.name}}</span> {% endfor %} </div> {% endfor %} <p>{{page.product.translated.customFields.custom_product_fields_product_box_teasertext_desktop}}</p> {% block page_product_detail_buy_short_description %} {% if shortDescription and theme_config('log-detail-show-short-description') == 'true' %} {% sw_include '@Storefront/storefront/page/product-detail/short-description.html.twig' with { shortDescription: page.product.translated.customFields.product_short_description } only %} {% endif %} {% endblock %} {% sw_include '@Storefront/storefront/page/product-detail/properties.html.twig' %} </div> {% endif %} {% block page_product_detail_buy_widget %} {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %} {% endblock %} </div> <div class="highlight-properties-description-mobile d-lg-none"> {% for group in page.product.extensions.highlightProperties %} <div class="highlight-properties"> {% for property in group.options %} <span class="property-name">+ {{property.translated.name}}</span> {% endfor %} </div> {% endfor %} <p>{{page.product.translated.customFields.custom_product_fields_product_box_teasertext_desktop}}</p> {% block page_product_detail_buy_short_description_mobile %} {% if shortDescription and theme_config('log-detail-show-short-description') == 'true' %} {% sw_include '@Storefront/storefront/page/product-detail/short-description.html.twig' with { shortDescription: page.product.translated.customFields.product_short_description } only %} {% endif %} {% endblock %} {% sw_include '@Storefront/storefront/page/product-detail/properties.html.twig' %} </div> </div> {% endblock %} </div> {% endblock %} </div> </div> {% endblock %} {% block page_product_detail_tabs %} <div class="container "> <div class="row"> <div class="col-lg-8 col-12 product-detail-tabs jumbotron bg-light"> <div class="container"> {% if page.product.customFields.custom_product_fields_infotext != null %} <div class="infotext"> <h5 class="product-detail-name" itemprop="name"> {{ page.product.translated.name }} </h5> <h2>{{ page.product.customFields.custom_product_fields_infotext|raw }}</h2> </div> {% endif %} {% if theme_config('log-detail-tabs') == 'accordion' %} {% sw_include '@Storefront/storefront/page/product-detail/accordion.html.twig' %} {% elseif theme_config('log-detail-tabs') == 'anchor' %} {% sw_include '@Storefront/storefront/page/product-detail/anchor.html.twig' %} {% else %} {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %} {% endif %} </div> </div> <div class="col-lg-4 col-12 jumbotron bg-light sidebar-product-page" style=""> <div class="d-none d-lg-block"> {% sw_include '@Storefront/storefront/page/product-detail/log-sidebar.html.twig' %} </div> {% if page.product.extensions.sidebarMedia.count %} <div class="d-block d-lg-none"> {% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with { 'mediaItems': page.product.extensions.sidebarMedia, 'zoom': false, 'zoomModal': false, 'displayMode': 'contain', 'gutter': 5, 'minHeight': '500px', 'navigationArrows': 'outside', 'navigationDots': 'inside', 'galleryPosition': 'underneath', 'isProduct': false, 'thumbnails': false, 'fallbackImageTitle': page.product.translated.name, 'startIndexThumbnails': 0, 'startIndexSlider': 0 } %} </div> {% endif %} </div> </div> </div> {% endblock %} {% block page_product_detail_cross_selling %} {% if page.crossSellings %} <div class="product-detail-tabs product-detail-cross-selling"> <div class="container"> {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with { crossSellings: page.crossSellings, 'elMinWidth': { 'value': '400px' } } only %} </div> </div> {% endif %} {% endblock %} {% endblock %}{% endblock %}{% block page_product_detail_buy_inner %} {{ parent() }}{% endblock %}