{% 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') %}
{{ dump(page.product) }}
<div class="col-lg-5 position-relative">
<div class="product-detail-buy-box">
<div class="title_wishlist">
<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>
{% 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="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 %}
</button>
{% endblock %}
{% endblock %}
</div>
<p class="sw-cms-el-buy-box__product-number">{{ page.product.productNumber }}</p>
{% if page.product.customFields.custom_product_icons_icon %}
<div class="icons-container flex">
{% for icon in page.product.customFields.custom_product_icons_icon %}
{% if loop.index0 <= 9 %}
{% if icon == 'icon_fire' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_fire.svg'), 'asset') }}"
alt="Icon Brandklasse B1">
<span class="tooltiptext">Brandklasse B1</span>
</div>
{% endif %}
{% if icon == 'icon_paper' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_paper.svg'), 'asset') }}"
alt="Icon Papiereinleger zur Selbtsbeschriftung">
<span class="tooltiptext">Papiereinleger zur Selbstbeschriftung</span>
</div>
{% endif %}
{% if icon == 'icon_plates' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_plates.svg'), 'asset') }}"
alt="Icon Beschriftungsplatten wechselbar">
<span class="tooltiptext">Beschriftungsplatten wechselbar</span>
</div>
{% endif %}
{% if icon == 'icon_glue_and_screw' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_glue_and_screw.svg'), 'asset') }}"
alt="Icon Klebe- und Schraubmontage">
<span class="tooltiptext">Klebe- und Schraubmontage</span>
</div>
{% endif %}
{% if icon == 'icon_screw_countersunk' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_screw_countersunk.svg'), 'asset') }}"
alt="Icon Schraubmontage mit Senkkopfschrauben">
<span class="tooltiptext">Schraubmontage mit Senkkopfschrauben</span>
</div>
{% endif %}
{% if icon == 'icon_screw_flathead' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_screw_flathead.svg'), 'asset') }}"
alt="Icon Schraubmontage mit Flachkopfschrauben">
<span class="tooltiptext">Schraubmontage mit Flachkopfschrauben</span>
</div>
{% endif %}
{% if icon == 'icon_glue' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_glue.svg'), 'asset') }}"
alt="Klebemontage">
<span class="tooltiptext">Klebemontage</span>
</div>
{% endif %}
{% if icon == 'icon_feeder_changer' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_feeder_changer.svg'), 'asset') }}"
alt="Icon Einlegerwechsel mittels Haftsauger">
<span class="tooltiptext">Einlegerwechsel mittels Haftsauger</span>
</div>
{% endif %}
{% if icon == 'icon_paper_secured' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_paper_secured.svg'), 'asset') }}"
alt="Icon Einleger gesichert">
<span class="tooltiptext">Einleger gesichert</span>
</div>
{% endif %}
{% if icon == 'icon_direct_printing' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_direct_printing.svg'), 'asset') }}"
alt="Icon Direktdruck">
<span class="tooltiptext">Direktdruck</span>
</div>
{% endif %}
{% if icon == 'icon_tactile_labeling' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_tactile_labeling.svg'), 'asset') }}"
alt="Icon Taktile Beschriftung möglich">
<span class="tooltiptext">Taktile Beschriftung möglich</span>
</div>
{% endif %}
{% if icon == 'icon_stock' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_stock.svg'), 'asset') }}"
alt="Lagerartikel, rascher Versand">
<span class="tooltiptext">Lagerartikel, rascher Versand</span>
</div>
{% endif %}
{% if icon == 'icon_feeder_changer_tools' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_feeder_changer_tools.svg'), 'asset') }}"
alt="Icon Einlegerwechsel mittels Werkzeug">
<span class="tooltiptext">Einlegerwechsel mittels Werkzeug</span>
</div>
{% endif %}
{% if icon == 'icon_escape_sign' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_escape_sign.svg'), 'asset') }}"
alt="Icon Noirmgröße Fluchtwegschilder">
<span class="tooltiptext">Normgröße Fluchtwegschilder</span>
</div>
{% endif %}
{% if icon == 'icon_sustainable' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_sustainable.svg'), 'asset') }}"
alt="Icon Umweltfreundliches Produkt">
<span class="tooltiptext">Umweltfreundliches Produkt</span>
</div>
{% endif %}
{% if icon == 'icon_outdoor' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_outdoor.svg'), 'asset') }}"
alt="Icon Außenanwendung">
<span class="tooltiptext">Außenanwendung</span>
</div>
{% endif %}
{% if icon == 'icon_feeder_changer_without_tools' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_feeder_changer_without_tools.svg'), 'asset') }}"
alt="Icon Einlegerwechsel ohne Werkzeug">
<span class="tooltiptext">Einlegerwechsel ohne Werkzeug</span>
</div>
{% endif %}
{% if icon == 'icon_opening_right' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_opening_right.svg'), 'asset') }}"
alt="Icon Öffnungsseite">
<span class="tooltiptext">Öffnungsseite</span>
</div>
{% endif %}
{% if icon == 'icon_led' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_led.svg'), 'asset') }}"
alt="Icon LED Beleuchtung">
<span class="tooltiptext">LED Beleuchtung</span>
</div>
{% endif %}
{% if icon == 'icon_flange' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_flange.svg'), 'asset') }}"
alt="Icon Flanschmontage">
<span class="tooltiptext">Flanschmontage</span>
</div>
{% endif %}
{% if icon == 'icon_quiver' %}
<div class="tooltipcontainer">
<img class="icon" height="20px" width="auto"
src="{{ asset(('bundles/schildersysteme/icons/icon_quiver.svg'), 'asset') }}"
alt="Icon Köchermontage">
<span class="tooltiptext">Köchermontage</span>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
{% endif %}
<div class="product-detail-buy">
{% set EXTENSION_NAME = constant('LenzPlatformCustomerDiscount\\Core\\Content\\Product\\SalesChannel\\Price\\CustomerDiscountProductPriceCalculator::MODIFICATION_APPLIED') %}
{% if page.product.price.hasExtension(EXTENSION_NAME) %}
{% set x = page.product.price.getExtension(EXTENSION_NAME).all %}
{% if x.priceBlocked == true and config('LenzPlatformCustomerDiscount.config.showDiscountExcludedNotice') == true %}
{% set alertText = "lenzPlatformCustomerDiscount.productDetail.noDiscountAlertMessage"|trans %}
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"info",
content: alertText
} %}
{% elseif x.priceBlocked == false and config('LenzPlatformCustomerDiscount.config.showDiscountNotice') == true %}
{% set alertText = "lenzPlatformCustomerDiscount.productDetail.discountAlertMessage"|trans({"%percent%": x.percent}) %}
{% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
type:"success",
content: alertText
} %}
{% endif %}
{% endif %}
{% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
</div>
{% if page.product.calculatedPrices|length > 1 and page.product.customFields.custom_units_piece_per_pu == 1 and page.product.customFields.price_on_request_six_group!=1 %}
{% block page_product_detail_price_block %}
<div class="product-block-prices">
<span class="mass-discount">Mengenrabatte</span>
{% 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">
</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 %}
<th scope="col" class="product-block-prices-cell">
Rabatt
</th>
</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 %}
{% set unitPrice = page.product.calculatedPrice.unitPrice|trim %}
{% set quantityPrice = price.unitPrice|trim %}
{% if ((1-(quantityPrice/unitPrice))*100)|round !=0 %}
{% block page_product_detail_price_block_table_body_row %}
{% if page.product.calculatedPrices.elements[loop.index0 -1].quantity != 0 %}
<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.index0 -1].quantity + 1}}</span> {{ "detail.quantity"|trans|sw_sanitize }}
</th>
{% endblock %}
{% block page_product_detail_price_block_table_body_cell_price %}
<td class="product-block-prices-cell">
{% 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.referencePrice.price|currency }}{{ "general.star"|trans|sw_sanitize }}
/ {{ price.referencePrice.referenceUnit }} {{ price.referencePrice.unitName }}
</td>
{% endif %}
{% endblock %}
<td class="product-block-prices-cell discount_percent_table">
{% set unitPrice = page.product.calculatedPrices.elements[0].unitPrice|trim %}
{% set quantityPrice = price.unitPrice|trim %}
- {{ ((1-(quantityPrice/unitPrice))*100)|round }}
%
</td>
</tr>
{% endif %}
{% endblock %}
{% endif %}
{% endfor %}
{% endblock %}
</tbody>
{% endblock %}
</table> {% endblock %}
</div>
{% if page.product.calculatedPrices|length > 1 and page.product.customFields.variants|length>0 %}
{% set bestprice = false %}
{% for variant in page.product.customFields.variants|filter((variant) => variant.availableStock == true) %}
{% if variant.customFields.custom_units_piece_per_pu != 1 %}
{% set bestprice = true %}
{% endif %}
{% endfor %}
{% if bestprice == true %}
<a class="best-price-cta" href="#best-price">
Verpackungseinheiten zum Bestpreis
<img src="{{ asset(('bundles/schildersysteme/icons/arrow_down.svg'), 'asset') }}"
width="10"
height="10" alt="">
</a>
{% endif %}
{% endif %}
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}
{% endblock %}