{% set reviewTabId = "#review-tab-" ~ page.product.id %}{% block block_gallery_buybox %} {% block block_gallery_buybox_column_left %} {% set element = block.slots.getSlot('left') %} {% set config = element.fieldConfig.elements %} <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': false, 'zoomModal': true, 'displayMode': 'contain', 'gutter': 5, 'minHeight': '430px', 'galleryPosition': 'left', 'isProduct': true, 'fallbackImageTitle': page.product.translated.name, 'startIndexThumbnails': page.product.cover.position, 'startIndexSlider': page.product.cover.position } %} {% endif %} </div> {% endblock %} {% block block_gallery_buybox_column_right %} {% set element = block.slots.getSlot('right') %} <div class="col-lg-5 position-relative"> <div class=" product-detail-buy-box-wrapper "> <div class="product-detail-buy-box"> <div><h1 class="product-detail-name" itemprop="name"> {{ page.product.translated.name }} {% if page.product.calculatedCheapestPrice.listPrice.percentage %} <span class="badge badge-danger"> {{ "detail.listPricePercentage"|trans({'%price%': page.product.calculatedCheapestPrice.listPrice.percentage|round })|sw_sanitize }} </span> {% endif %} </h1> </div> <div class="product-detail-review-wrapper d-flex justify-content-between align-items-center"> <span> {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with { points: page.product.ratingAverage, style: 'text-primary' } %} ( {{ element.data.totalReviews }} ) </span> <span> {{ page.product.productNumber }} </span> </div> <div class="product-detail-buy"> {% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %} </div> {% set remoteClickOptions = { selector: reviewTabId, scrollToElement: true } %} {% if page.product.calculatedPrices|length > 1 %} {% block page_product_detail_price_block %} <div class="product-block-prices test2"> {% block page_product_detail_price_block_table %} <table class="table product-block-prices-grid"> {% block page_product_detail_price_block_table_head %} <thead class="product-block-prices-head"> {% block page_product_detail_price_block_table_head_inner %} <tr class="product-block-prices-row"> <th scope="col" class="product-block-prices-cell"> {{ "detail.dataColumnQuantity"|trans|sw_sanitize }} </th> <th scope="col" class="product-block-prices-cell"> {{ "detail.dataColumnPrice"|trans|sw_sanitize }} </th> {% if page.product.calculatedPrice.referencePrice %} <th scope="col" class="product-block-prices-cell"> {{ "detail.dataColumnReferencePrice"|trans|sw_sanitize }} </th> {% endif %} </tr> {% endblock %} </thead> {% endblock %} {% block page_product_detail_price_block_table_body %} <tbody class="product-block-prices-body"> {% block page_product_detail_price_block_table_body_inner %} {% for price in page.product.calculatedPrices %} {% block page_product_detail_price_block_table_body_row %} {% if loop.first %} {% else %} <tr class="product-block-prices-row" itemprop="offers" itemscope itemtype="https://schema.org/Offer"> {% block page_product_detail_price_block_table_body_cell_quantity %} <th scope="row" class="product-block-prices-cell product-block-prices-cell-thin"> <meta itemprop="priceCurrency" content="{{ page.header.activeCurrency.id }}"/> <meta itemprop="price" content="{{ price.unitPrice }}"/> <link itemprop="availability" href="https://schema.org/InStock"/> {{ "detail.priceDataInfoFrom"|trans|sw_sanitize }} <span class="product-block-prices-quantity"> {{ page.product.calculatedPrices.elements[loop.index -2].quantity + 1}}</span> </th> {% endblock %} {% block page_product_detail_price_block_table_body_cell_price %} <td class="product-block-prices-cell price"> {% sw_include '@Storefront/storefront/component/product/block-price.html.twig' with { price: price } only %} </td> {% endblock %} {% block page_product_detail_price_block_table_body_cell_reference_price %} {% if price.referencePrice is not null %} <td class="product-block-prices-cell product-block-prices-cell-thin price"> {{ price.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }} / {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }} </td> {% endif %} {% endblock %} </tr> {% endif %} {% endblock %} {% endfor %} {% endblock %} </tbody> {% endblock %} </table> {% endblock %} {% if context.taxState == "gross" %} {% set taxText = "general.grossTaxInformation"|trans|sw_sanitize %} {% else %} {% set taxText = "general.netTaxInformationFirstPart"|trans|sw_sanitize %} {% set taxTextLink = "general.netTaxInformationSecondPart"|trans|sw_sanitize %} {% endif %} <span class="product-detail-tax-link">{{ taxText }} <a href="{{ path('frontend.cms.page',{ id: shopware.config.core.basicInformation.shippingPaymentInfoPage }) }}" title="{{ taxTextLink }}" data-toggle="modal" data-url="{{ path('frontend.cms.page',{ id: shopware.config.core.basicInformation.shippingPaymentInfoPage }) }}"> {{ taxTextLink }} </a> </span> </div> {% endblock %} {% endif %} <div class="row align-items-center product-detail-actions mx-0"> <div class="col-12 col-sm-4"> <div class="product-detail-action"> <span style="position:relative; top:-1px;">{% sw_icon 'phone' style { 'namespace': 'Tuerschild_2', } %} </span> <a class="product-detail-action-call-link" href="tel:{{ "detail.contactNumber"|trans|sw_sanitize }}">{{ "detail.contactNumber"|trans|sw_sanitize }}</a> </div> </div> <div class="col-12 col-sm-4 d-flex align-items-center justify-content-sm-center"> <div class="text-center product-detail-action"> <span style="position:relative; top:-2px;">{% sw_icon 'rating' style { 'namespace': 'Tuerschild_2', } %} </span> <span data-toggle="tab" class="product-detail-reviews-link product-detail-tab-navigation-link" data-toggle="tab" data-offcanvas-tabs="true" data-remote-click="true" data-remote-click-options='{{ remoteClickOptions|json_encode }}' role="tab" aria-controls="review-tab-pane" aria-selected="true"> {{ "detail.evaluate"|trans|sw_sanitize }} </span> </div> </div> <div class="col-12 col-sm-4 d-flex align-items-center justify-content-sm-end"> <div class="text-right product-detail-action"> {% block component_product_wishlist %} {% set addToWishlistOptions = { productId: page.product.id, router: { add: { afterLoginPath: path('frontend.wishlist.add.after.login', { productId: page.product.id }), path: path('frontend.wishlist.product.add', { productId: page.product.id }), token: sw_csrf('frontend.wishlist.product.add', {"mode": "token"}) }, remove: { path: path('frontend.wishlist.product.remove', { productId: page.product.id }), token: sw_csrf('frontend.wishlist.product.remove', {"mode": "token"}), } } } %} {% set size = size ?? 'md' %} {% block component_product_wishlist_button %} <button class="d-flex align-items-center product-wishlist-{{ productId }} product-wishlist-action{% if appearance == 'circle' %}-circle{% endif %} product-wishlist-not-added product-wishlist-loading" title="{{ "listing.toggleWishlist"|trans|sw_sanitize }}" data-add-to-wishlist="true" data-add-to-wishlist-options="{{ addToWishlistOptions|json_encode }}" > {% block component_product_wishlist_icon %} {% sw_icon 'heart-fill' style { 'class': 'wishlist icon-wishlist-added', 'size': size } %} {% sw_icon 'heart' style {'class': 'wishlist icon-wishlist-not-added', 'size': size } %} {% endblock %} <span class="product-detail-favorite-text">{{ "detail.favorite"|trans|sw_sanitize }}</span> </button> {% endblock %} {% endblock %} </div> </div> </div> </div> </div> </div> {% endblock %}{% endblock %}