{% sw_extends '@Storefront/storefront/page/product-detail/index.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 row" itemscope itemtype="https://schema.org/Product"> {% block page_product_detail_inner %} {% block page_product_detail_content %} <div class="product-detail-content col-12"> {% block page_product_detail_headline %} <div class="row align-items-center product-detail-headline wa-mb-11"> {% 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-4 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': '130px', '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_information %} {# Meta info #} {# {% set lastCalculatedPrice = page.product.calculatedPrices|last %} #} {# <div itemtype="https://schema.org/Product" itemscope> <meta itemprop="name" content="{{ page.product.translated.name }}"> <meta itemprop="price" content="Ab {{ lastCalculatedPrice.unitPrice }}"> <div itemprop="offers" itemtype="https://schema.org/AggregateOffer" itemscope> <meta itemprop="lowPrice" content="{{ lastCalculatedPrice.unitPrice }}" /> <meta itemprop="offerCount" content="ab {{ lastCalculatedPrice.quantity }}" /> <meta itemprop="priceCurrency" content="EUR" /> </div> </div> #} {# --------- #} <div class="col-lg-4 product-detail-information"> <div class="wa-fs-22 wa-lh-30 wa-fw-medium wa-mb-17">Preisstaffelung nach Lizenzen</div> <ul class="list-unstyled"> {% set qtyIndexStarter = 1 %} {% for price in page.product.calculatedPrices %} <li class="col-xs-12 col-sm-7 col-md-7 col-lg-10 col-xl-8 mb-1 mt-1 wa-border-bottom-gray-1"> <div class="row justify-content-between wa-fs-14 wa-lh-28"> <span class="mr-1"> {{qtyIndexStarter}}{% if qtyIndexStarter != 'ab ' %}-{% endif %}{{price.quantity}} </span> <span> <strong>{{ price.unitPrice|currency }}</strong>/pro Lizenz </span> </div> </li> {% if loop.revindex == 2 %} {% set qtyIndexStarter = 'ab ' %} {% else %} {% set qtyIndexStarter = price.quantity + 1 %} {% endif %} {% endfor %} </ul> </div> {% endblock %} {% block page_product_detail_buy %} <div class="col-lg-4 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 col-12 col-lg-8"> {% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %} </div> {% endblock %} <div class="col-12 col-lg-4 product-detail-extra-content"> {% block page_product_detail_tabs_properties %} <div class="product-detail-properties d-flex flex-column"> <p class="m-0 mb-2 product-detail-properties-short-info wa-fw-semibold text-center"> {{ 'component.product.info.short_info'|trans|sw_sanitize }} </p> {% if page.product.customFields.custom_product_official_title %} <p class="my-1 product-detail-properties-official-title"> <span class="wa-fw-semibold mr-1">{{ 'component.product.info.official_title'|trans|sw_sanitize }}:</span> <span>{{ page.product.customFields.custom_product_official_title|raw }}</span> </p> {% endif %} {% for group in page.product.sortedProperties %} {% if group.id != "9ffabc4362c24478a348c6ed88da897d" %} {% block page_product_detail_properties_table_row %} <p class="my-1"> {% block page_product_detail_properties_item_label %} <span class="wa-fw-semibold mr-1">{{ group.translated.name|e }}:</span> {% endblock %} {% block page_product_detail_properties_item_value %} <span> {% apply spaceless %} {% for option in group.options %} {% set i = ( i | default(0) ) + 1 %} <span>{% if i > 1 %}, {% endif %}{{ option.translated.name|e }}</span> {% endfor %} {% endapply %} </span> {% endblock %} </p> {% endblock %} {% endif %} {% endfor %} </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-cross-selling"> {% sw_include '@Storefront/storefront/page/product-detail/cross-selling/tabs.html.twig' with { crossSellings: page.crossSellings } %} </div> {% endif %} {% endblock %} </div> {#TODO: If the products downloaded contain, than make here looping #} {# {% block page_product_detail_downloads %} {% set fileContents = [{name: "File 1", link: "#"},{name: "File 2", link: "#"}] %} {% if fileContents|length > 0 %} <div> <p class="wa-fs-24 wa-text-gray text-center text-md-left">Downloads</p> {% for file in fileContents %} <div class="row ml-2"> <div class="col-12 my-2"> <a href="{{ file.link }}" target="_blank"> <img src="{{ asset('bundles/wingsacademy/file-icon.svg', 'asset') }}"> <span class="ml-2 wa-fs-14 wa-text-gray">{{ file.name }}</span> </a> </div> </div> {% endfor %} </div> {% endif %} {% endblock %} #} {#TODO If the product contain reviews, than make here template for reviews #} {# {% block page_product_detail_review %} <div id="wa_page_product_detail_review" data-product-id="{{ page.product.id }}" class="product-detail-review-item"> TEST </div> {% endblock %} #} {% endblock %} </div> {% endblock %}{% endblock %}