{% sw_extends '@Storefront/storefront/page/product-detail/index.html.twig' %}
{% block page_product_detail_buy %}
<div class="col-lg-5 position-relative">
<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">
{% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
points: page.product.ratingAverage,
style: 'text-primary'
} %}
( {{ page.reviews.total }} )
</div>
<div class="product-detail-buy">
{% sw_include '@Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
</div>
<div class="row align-items-center product-detail-actions mx-0">
<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="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 %}
<span>
Auf Merkliste
</span>
</div>
</div>
</div>
{% if page.product.calculatedPrices|length > 1 %}
{% block page_product_detail_price_block %}
<div class="product-block-prices">
{% 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 %}
{% block page_product_detail_price_block_table_body_row %}
<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"/>
{% if loop.last %}
{{ "detail.priceDataInfoFrom"|trans|sw_sanitize }}
<span class="product-block-prices-quantity">{{ price.quantity }}</span> {{ "detail.quantity"|trans|sw_sanitize }}
{% else %}
{{ "detail.priceDataInfoUntil"|trans|sw_sanitize }}
<span class="product-block-prices-quantity">{{ price.quantity }}</span> {{ "detail.quantity"|trans|sw_sanitize }}
{% endif %}
</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>
</td>
</tr>
{% endblock %}
{% endfor %}
{% endblock %}
</tbody>
{% endblock %}
</table>
{% endblock %}
</div>
{% endblock %}
{% endif %}
</div>
</div>
{% endblock %}
{% block page_product_detail_tabs %}
<div class="product-detail-tabs col-lg-7">
{% sw_include '@Storefront/storefront/page/product-detail/tabs.html.twig' %}
</div>
{% endblock %}
{% block page_product_detail_media %}
<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',
'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 %}
{% block page_product_detail_cross_selling %}
{% endblock %}