{% extends "@Storefront/storefront/component/product/card/box-standard.html.twig" %}
{% block component_product_box_description %}
{% endblock %}
{% block component_product_box_badges %}
{% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
{% if config('core.cart.wishlistEnabled') %}
{% block component_product_box_wishlist_action_custom %}
{% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
appearance: 'circle',
productId: id
} %}
{% endblock %}
{% endif %}
{% endblock %}
{% block component_product_box_price %}
{% endblock %}
{% block component_product_box_variant_characteristics %}
{% endblock %}
{% block component_product_box_action %}
{% set isListPrice = product.calculatedPrice.listPrice.percentage > 0 %}
{% set listPrice = product.calculatedPrice.listPrice.price %}
<div class="flex-grow-1"></div>
<span class="list-price-line-through">
{% if isListPrice %}
{{ "listing.strikePriceText"|trans|sw_sanitize }} {{ listPrice|currency }}{{ "general.star"|trans|sw_sanitize }}</span>
{% endif %}
</span>
<div class="product-action-wrapper {% if isListPrice and not displayFrom %} with-list-price{% endif %}">
{% block component_product_box_price_custom %}
<div class="product-price-wrapper">
{% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
</div>
{% endblock %}
{% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
</div>
{% endblock %}
{% block component_product_box_rating %}
{% endblock %}
{% block component_product_box_image %}
<div class="product-image-wrapper">
{# fallback if display mode is not set #}
{% set displayMode = displayMode ?: 'standard' %}
{# set display mode 'cover' for box-image with standard display mode #}
{% if layout == 'image' and displayMode == 'standard' %}
{% set displayMode = 'cover' %}
{% endif %}
<a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
title="{{ name }}"
class="position-relative product-image-link is-{{ displayMode }}">
{% if cover.url %}
{% set attributes = {
'class': 'product-image is-'~displayMode,
'alt': (cover.translated.alt ?: name),
'title': (cover.translated.title ?: name)
} %}
{% if displayMode == 'cover' or displayMode == 'contain' %}
{% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
{% endif %}
{% set secondCoverId = product.customFields.custom_second_product_cover_image %}
{% if secondCoverId %}
{% set media = searchMedia([secondCoverId], context.context) %}
{% set secondCover = media.get(product.customFields.custom_second_product_cover_image) %}
{% endif %}
{% if secondCover %}
{% sw_thumbnails 'product-image-thumbnails' with {
media: secondCover,
sizes: {
'xs': '501px',
'sm': '315px',
'md': '427px',
'lg': '333px',
'xl': '284px'
},
attributes:{
'class':'product-image is-standard second-cover'
}
} %}
{% endif %}
{% sw_thumbnails 'product-image-thumbnails' with {
media: cover,
sizes: {
'xs': '501px',
'sm': '315px',
'md': '427px',
'lg': '333px',
'xl': '284px'
}
} %}
{% else %}
<div class="product-image-placeholder">
{% sw_icon 'placeholder' style {
'size': 'fluid'
} %}
</div>
{% endif %}
</a>
{% if config('core.cart.wishlistEnabled') %}
{% block component_product_box_wishlist_action %}
{% endblock %}
{% endif %}
</div>
{% endblock %}