{% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}{% block component_product_box_content %} <div class="card-body"> <div class="row"> <div class="col-4 col-md-3 col-xl-auto"> {% 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-cover"> {% 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), 'loading': 'lazy' } %} {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %} {% 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 %} </div> {% endblock %} </div> <div class="col-8 col-md-5 col-xl-6 product-inner"> {% 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 %} {% if product.variation %} <div class="product-variant-characteristics"> <ul class="product-variant-characteristics-list"> <li> <span class="product-variant-characteristics-label"> {{ "detail.productNumberLabel"|trans|sw_sanitize }} </span> <span class="product-variant-characteristics-option"> {{ product.productNumber }} </span> </li> {% if not displayParent %} {% for variation in product.variation %} <li class="product-variant-characteristics-list-entry"> <span class="product-variant-characteristics-label">{{ variation.group }}:</span> <span class="product-variant-characteristics-option">{{ variation.option }}</span> </li> {% endfor %} {% endif %} </ul> </div> {% else %} <div class="product-variant-characteristics"> <ul class="product-variant-characteristics-list mb-1"> <li> <span class="product-variant-characteristics-label"> {{ "detail.productNumberLabel"|trans|sw_sanitize }} </span> <span class="product-variant-characteristics-option"> {{ product.productNumber }} </span> </li> </ul> </div> <p class="product-desc"> {{ product.translated.description|striptags|raw }} </p> {% endif %} {% endblock %} </div> <div class="col-12 col-md-4 col-xl-auto flex-grow-1 product-inner"> {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %} {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %} <div class="product-actions-sub"> {% if config('core.cart.wishlistEnabled') %} {% block component_product_box_wishlist_action %} {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with { showText: true, size: 'md', productId: product.id } %} {% endblock %} {% endif %} {% sw_include '@Storefront/storefront/component/product/card/compare-button.html.twig' ignore missing %} </div> </div> </div> </div>{% endblock %}