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

Open in your IDE?
  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_rich_snippets %}
  17. {# @deprecated tag:v6.5.0 - Block will be removed completely including the template it references #}
  18. {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %}
  19. {% endblock %}
  21. {% block component_product_box_image %}
  22. <div class="product-image-wrapper">
  23. {# fallback if display mode is not set #}
  24. {% set displayMode = displayMode ?: 'standard' %}
  26. {# set display mode 'cover' for box-image with standard display mode #}
  27. {% if layout == 'image' and displayMode == 'standard' %}
  28. {% set displayMode = 'cover' %}
  29. {% endif %}
  31. {% block component_product_box_image_link %}
  32. <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  33. title="{{ name }}"
  34. class="product-image-link is-{{ displayMode }}">
  35. {% block component_product_box_image_link_inner %}
  36. {% if cover.url %}
  37. {% set attributes = {
  38. 'class': 'product-image is-'~displayMode,
  39. 'alt': (cover.translated.alt ?: name),
  40. 'title': (cover.translated.title ?: name)
  41. } %}
  43. {% if displayMode == 'cover' or displayMode == 'contain' %}
  44. {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  45. {% endif %}
  47. {% block component_product_box_image_thumbnail %}
  48. {% sw_thumbnails 'product-image-thumbnails' with {
  49. media: cover,
  50. sizes: sizes
  51. } %}
  52. {% endblock %}
  53. {% else %}
  54. {% block component_product_box_image_placeholder %}
  55. <div class="product-image-placeholder">
  56. {% sw_icon 'placeholder' style {
  57. 'size': 'fluid'
  58. } %}
  59. </div>
  60. {% endblock %}
  61. {% endif %}
  62. {% endblock %}
  63. </a>
  64. {% endblock %}
  66. {% if config('core.cart.wishlistEnabled') %}
  67. {% block component_product_box_wishlist_action %}
  68. {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  69. appearance: 'circle',
  70. productId: id
  71. } %}
  72. {% endblock %}
  73. {% endif %}
  74. </div>
  75. {% endblock %}
  77. {% block component_product_box_info %}
  78. <div class="product-info">
  79. {% block component_product_box_rating %}
  80. {% if config('core.listing.showReview') %}
  81. <div class="product-rating">
  82. {% if product.ratingAverage %}
  83. {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
  84. points: product.ratingAverage,
  85. style: 'text-primary'
  86. } %}
  87. {% endif %}
  88. </div>
  89. {% endif %}
  90. {% endblock %}
  92. {% block component_product_box_name %}
  93. <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  94. class="product-name"
  95. title="{{ name }}">
  96. {{ name }}
  97. </a>
  98. {% endblock %}
  100. {% block component_product_box_variant_characteristics %}
  101. <div class="product-variant-characteristics">
  102. <div class="product-variant-characteristics-text">
  103. {% if not displayParent %}
  104. {% for variation in product.variation %}
  105. {{ variation.group }}:
  106. <span class="product-variant-characteristics-option">
  107. {{ variation.option }}
  108. </span>
  110. {% if product.variation|last != variation %}
  111. {{ " | " }}
  112. {% endif %}
  113. {% endfor %}
  114. {% endif %}
  115. </div>
  116. </div>
  117. {% endblock %}
  119. {% block component_product_box_description %}
  120. <div class="product-description">
  121. {{ product.translated.description|striptags|raw }}
  122. </div>
  123. {% endblock %}
  125. {% block component_product_box_price %}
  126. {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  127. {% endblock %}
  129. {% block component_product_box_action %}
  130. {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  131. {% endblock %}
  132. </div>
  133. {% endblock %}
  134. </div>
  135. {% endblock %}
  136. </div>
  137. {% endif %}
  138. {% endblock %}