vendor/shopware/storefront/Resources/views/storefront/component/product/card/box-standard.html.twig line 1

  1. {% block component_product_box %}
  2.     {% if product %}
  3.         {% set name = product.translated.name %}
  4.         {% set id = product.id %}
  5.         {% set cover = product.cover.media %}
  6.         {% set variation = product.variation %}
  7.         {% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
  9.         <div class="card product-box box-{{ layout }}">
  10.             {% block component_product_box_content %}
  11.                 <div class="card-body">
  12.                     {% block component_product_box_badges %}
  13.                         {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
  14.                     {% endblock %}
  16.                     {% block component_product_box_image %}
  17.                         <div class="product-image-wrapper">
  18.                             {# fallback if display mode is not set #}
  19.                             {% set displayMode = displayMode ?: 'standard' %}
  21.                             {# set display mode 'cover' for box-image with standard display mode #}
  22.                             {% if layout == 'image' and displayMode == 'standard' %}
  23.                                 {% set displayMode = 'cover' %}
  24.                             {% endif %}
  26.                             {% block component_product_box_image_link %}
  27.                                 <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  28.                                    title="{{ name }}"
  29.                                    class="product-image-link is-{{ displayMode }}">
  30.                                     {% block component_product_box_image_link_inner %}
  31.                                         {% if cover.url %}
  32.                                             {% set attributes = {
  33.                                                 'class': 'product-image is-'~displayMode,
  34.                                                 'alt': (cover.translated.alt ?: name),
  35.                                                 'title': (cover.translated.title ?: name),
  36.                                                 'loading': 'lazy'
  37.                                             } %}
  39.                                             {% if displayMode == 'cover' or displayMode == 'contain' %}
  40.                                                 {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  41.                                             {% endif %}
  43.                                             {% block component_product_box_image_thumbnail %}
  44.                                                 {% sw_thumbnails 'product-image-thumbnails' with {
  45.                                                     media: cover,
  46.                                                     sizes: sizes
  47.                                                 } %}
  48.                                             {% endblock %}
  49.                                         {% else %}
  50.                                             {% block component_product_box_image_placeholder %}
  51.                                                 <div class="product-image-placeholder">
  52.                                                     {% sw_icon 'placeholder' style {
  53.                                                         'size': 'fluid'
  54.                                                     } %}
  55.                                                 </div>
  56.                                             {% endblock %}
  57.                                         {% endif %}
  58.                                     {% endblock %}
  59.                                 </a>
  60.                             {% endblock %}
  62.                             {% if config('core.cart.wishlistEnabled') %}
  63.                                 {% block component_product_box_wishlist_action %}
  64.                                     {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  65.                                         appearance: 'circle',
  66.                                         productId: id
  67.                                     } %}
  68.                                 {% endblock %}
  69.                             {% endif %}
  70.                         </div>
  71.                     {% endblock %}
  73.                     {% block component_product_box_info %}
  74.                         <div class="product-info">
  75.                             {% block component_product_box_rating %}
  76.                                 {% if config('core.listing.showReview') %}
  77.                                     <div class="product-rating">
  78.                                         {% if product.ratingAverage %}
  79.                                             {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
  80.                                                 points: product.ratingAverage,
  81.                                                 style: 'text-primary'
  82.                                             } %}
  83.                                         {% endif %}
  84.                                     </div>
  85.                                 {% endif %}
  86.                             {% endblock %}
  88.                             {% block component_product_box_name %}
  89.                                 <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  90.                                    class="product-name"
  91.                                    title="{{ name }}">
  92.                                     {{ name }}
  93.                                 </a>
  94.                             {% endblock %}
  96.                             {% block component_product_box_variant_characteristics %}
  97.                                 <div class="product-variant-characteristics">
  98.                                     <div class="product-variant-characteristics-text">
  99.                                         {% if not displayParent %}
  100.                                             {% for variation in product.variation %}
  101.                                                 {{ variation.group }}:
  102.                                                 <span class="product-variant-characteristics-option">
  103.                                                     {{ variation.option }}
  104.                                                 </span>
  106.                                                 {% if product.variation|last != variation %}
  107.                                                     {{ " | " }}
  108.                                                 {% endif %}
  109.                                             {% endfor %}
  110.                                         {% endif %}
  111.                                     </div>
  112.                                 </div>
  113.                             {% endblock %}
  115.                             {% block component_product_box_description %}
  116.                                 <div class="product-description">
  117.                                     {{ product.translated.description|striptags|raw }}
  118.                                 </div>
  119.                             {% endblock %}
  121.                             {% block component_product_box_price %}
  122.                                 {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  123.                             {% endblock %}
  125.                             {% block component_product_box_action %}
  126.                                 {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  127.                             {% endblock %}
  128.                         </div>
  129.                     {% endblock %}
  130.                 </div>
  131.             {% endblock %}
  132.         </div>
  133.     {% endif %}
  134. {% endblock %}