{% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}
{% block component_product_box %}
{% if product %}
{% set name = product.translated.name %}
{% set id = product.id %}
{% set cover = product.cover.media %}
{% set variation = product.variation %}
{% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
{% set productUrl = seoUrl('frontend.detail.page', { 'productId': id }) %}
<div class="product-box box-{{ layout }} h-full">
{% block component_product_box_content %}
<div class="relative h-full flex flex-col">
{% block component_product_box_badges %}
{% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
{% endblock %}
{% block component_product_box_rich_snippets %}
{# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #}
{% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %}
{% endblock %}
{% block component_product_box_image %}
<div class="product-image-wrapper relative">
{% block component_product_box_image_link %}
<a href="{{ productUrl }}"
title="{{ name }}"
class="product-image-link is-{{ displayMode }} block ratio ratio_product_image">
{% block component_product_box_image_link_inner %}
{% 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 %}
{% block component_product_box_image_thumbnail %}
{% sw_thumbnails 'product-image-thumbnails' with {
media: cover,
sizes: sizes
} %}
{% endblock %}
{% else %}
{% block component_product_box_image_placeholder %}
{% sw_icon 'placeholder' style {
'size': 'fluid'
} %}
{% endblock %}
{% endif %}
{% endblock %}
</a>
{% endblock %}
{% if config('core.cart.wishlistEnabled') %}
<div class="absolute top-2 right-2">
{% block component_product_box_wishlist_action %}
{% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
appearance: 'circle',
productId: id
} %}
{% endblock %}
</div>
{% endif %}
</div>
{% endblock %}
{% block component_product_box_info %}
<div class="product-info flex flex-col h-full p-2">
{% block component_product_box_rating %}
{% if config('core.listing.showReview') %}
<div class="product-rating lg:col-span-full">
{% if product.ratingAverage %}
{% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
points: product.ratingAverage,
style: 'text-primary'
} %}
{% endif %}
</div>
{% endif %}
{% endblock %}
{% if product.manufacturer.translated.name %}
{% block component_product_box_brand_name %}
<div class="product-brand-name font-accent font-medium text-xs mb-2">
{{ product.manufacturer.translated.name }}
</div>
{% endblock %}
{% endif %}
{% block component_product_box_name %}
<a href="{{ productUrl }}"
class="product-name block text-xs font-bold lg:text-sm"
title="{{ name }}">
{{ name }}
</a>
{% endblock %}
{% block component_product_box_variant_characteristics %}
{% if product.variation %}
<div class="product-variant-characteristics text-xs mt-1 lg:col-span-full">
<div class="product-variant-characteristics-text">
{% if not displayParent %}
{% for variation in product.variation %}
{{ variation.group }}:
<span class="product-variant-characteristics-option">
{{ variation.option }}
</span>
{% if product.variation|last != variation %}
{{ " | " }}
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
{% endif %}
{% endblock %}
{% block component_product_box_price %}
<div class="product-price-info pt-1 mt-auto lg:row-start-2 lg:col-end-3 lg:pt-0 lg:mt-0">
{% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
{% endif %}
{% endblock %}