{% sw_extends "@Storefront/storefront/component/product/card/box-standard.html.twig" %}{% block component_product_box_content %} {% set previewVariants = product.extensions.atlVariantPreview.variants %} {% set hoverMediaId = product.translated.customFields.atl_katana_theme_product_hover_media %} {% if previewVariants is not empty %} {% set previewVariantsOptions = { productId: product.id, allowBuyInListing: config('core.listing.allowBuyInListing') } %} <div data-atl-katana-variant-preview="true" data-atl-katana-variant-preview-options="{{ previewVariantsOptions|json_encode }}"> {{ parent() }} </div> {% else %} {{ parent() }} {% endif %}{% endblock %}{% block component_product_box_image %} {% set coverMedia = [cover] %} {% set coverMediaIds = [cover.id] %} {# Allow either preview variants or hover media #} {% if previewVariants is not empty %} {% for variant in previewVariants %} {% if variant.cover.media.id not in coverMediaIds %} {% set coverMediaIds = coverMediaIds|merge([variant.cover.media.id]) %} {% set coverMedia = coverMedia|merge([variant.cover.media]) %} {% endif %} {% endfor %} {% elseif hoverMediaId %} {% set hoverMedia = searchMedia([hoverMediaId], context.context) %} {% set hoverMediaEntity = hoverMedia.get(hoverMediaId) %} {% set coverMedia = coverMedia|merge([hoverMediaEntity]) %} {% endif %} {# fallback if display mode is not set #} {% set displayMode = displayMode ?: 'contain' %} {# set display mode 'cover' for box-image with standard display mode #} {% if layout == 'image' and displayMode == 'standard' %} {% set displayMode = 'cover' %} {% endif %} <div class="product-image-wrapper is-{{ displayMode }}"> <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}" title="{{ name }}" class="product-image-link is-{{ displayMode }}"{% if hoverMediaEntity %} data-atl-katana-hover-media="true"{% endif %}> {% if cover.url %} {% for media in coverMedia %} {% set attributes = { 'class': 'product-image is-'~displayMode~ (product.cover.media.id != media.id ? ' is-inactive' : ''), 'alt': (media.translated.alt ?: name), 'title': (media.translated.title ?: name), 'data-media-id': media.id } %} {% if displayMode == 'cover' or displayMode == 'contain' %} {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %} {% endif %} {% sw_thumbnails 'product-image-thumbnails' with { media: media, sizes: sizes, load: product.cover.media.id == media.id } %} {% endfor %} {% else %} <div class="product-image-placeholder"> {% sw_icon 'placeholder' style { 'size': 'fluid' } %} </div> {% endif %} </a> {% block component_product_box_image_action %} {% if theme_config('atl-cms-product-box-action') == 'hover' %} {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %} {% endif %} {% endblock %} </div>{% endblock %}{% block component_product_box_info %} <div class="product-info"> {% if config('core.cart.wishlistEnabled') %} {% block component_product_box_wishlist_action %} {{ parent() }} {% endblock %} {% endif %} {% block component_product_box_name %} {{ parent() }} {% block component_product_box_product_number %} {% set showProductNumber = product.productNumber is not empty %} {% if theme_config('atl-cms-product-box-use-placeholders') == 'true' %} {% set showProductNumber = true %} {% endif %} {% if theme_config('atl-cms-product-box-product-number') == 'below-title' and showProductNumber %} <div class="product-number"> {% if product.productNumber is not empty %} <span class="product-ordernumber-label"> {{ "detail.productNumberLabel"|trans|sw_sanitize }} </span> <span class="product-ordernumber"> {{ product.productNumber }} </span> {% endif %} </div> {% endif %} {% endblock %} {% block component_product_box_delivery_information %} {% set showDeliveryInformation = product.deliveryTime is not empty %} {% if theme_config('atl-cms-product-box-use-placeholders') == 'true' %} {% set showDeliveryInformation = true %} {% endif %} {% if theme_config('atl-cms-product-box-delivery-information') == 'below-title' and showDeliveryInformation %} <div class="product-delivery-information"> {% sw_include '@Storefront/storefront/component/wishlist/delivery-information.html.twig' %} </div> {% endif %} {% endblock %} {% endblock %} {% block component_product_box_rating %} {% set showRatings = product.ratingAverage is not empty %} {% if theme_config('atl-cms-product-box-use-placeholders') == 'true' %} {% set showRatings = true %} {% endif %} {% if theme_config('atl-cms-product-box-ratings') == 'default' and showRatings %} {{ parent() }} {% endif %} {% endblock %} {% block component_product_box_variant_characteristics %} {% set showVariantCharacteristics = product.variation is not empty %} {% if theme_config('atl-cms-product-box-use-placeholders') == 'true' %} {% set showVariantCharacteristics = true %} {% endif %} {% if theme_config('atl-cms-product-box-characteristics') == 'default' and showVariantCharacteristics %} {{ parent() }} {% endif %} {% endblock %} {% block component_product_box_description %} {% set showDescription = product.translated.description is not empty %} {% if theme_config('atl-cms-product-box-use-placeholders') == 'true' %} {% set showDescription = true %} {% endif %} {% if theme_config('atl-cms-product-box-description') == 'default' and showDescription %} {{ parent() }} {% endif %} {% endblock %} {% block component_product_box_price %} {{ parent() }} {% endblock %} {% block component_product_box_variant_preview %} {% if previewVariants is not empty %} {% sw_include '@Storefront/storefront/skin/global/component/product/card/variant-preview.html.twig' %} {% endif %} {% endblock %} {% block component_product_box_action %} {% if theme_config('atl-cms-product-box-action') == 'default' %} {{ parent() }} {% endif %} {% endblock %} </div>{% endblock %}