{% 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 %} <div class="card product-box box-{{ layout }}"> {% block component_product_box_content %} <div class="card-body"> {% 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"> {# 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 %} {% block component_product_box_image_link %} <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product-image-link is-{{ displayMode }}"> {% 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 %} <div class="product-image-placeholder"> {% sw_icon 'placeholder' style { 'size': 'fluid' } %} </div> {% endblock %} {% endif %} {% endblock %} </a> {% endblock %} {% if config('core.cart.wishlistEnabled') %} {% block component_product_box_wishlist_action %} {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with { appearance: 'circle', productId: id } %} {% endblock %} {% endif %} </div> {% endblock %} {% block component_product_box_info %} <div class="product-info"> {% block component_product_box_rating %} {% if config('core.listing.showReview') %} <div class="product-rating"> {% if product.ratingAverage %} {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with { points: product.ratingAverage, style: 'text-primary' } %} {% endif %} </div> {% endif %} {% endblock %} {% block component_product_box_name %} <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}" class="product-name" title="{{ name }}"> {{ name }} </a> {% endblock %} {% block component_product_box_variant_characteristics %} <div class="product-variant-characteristics"> <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> {% endblock %} {% block component_product_box_description %} <div class="product-description"> {{ product.translated.description|striptags|raw }} </div> {% endblock %} {% block component_product_box_price %} {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %} {% endblock %} {% block component_product_box_action %} {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %} {% endblock %} </div> {% endblock %} </div> {% endblock %} </div> {% endif %}{% endblock %}