custom/plugins/TcinnThemeWareClean/src/Resources/views/storefront/component/product/card/box-standard.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}
  3. {# TODO: prüfen... #}
  5. {# ---------------- START: SET TEMPLATE VARS ---------------- #}
  7. {# ThemeWare: Set theme variables #}
  8. {% set twtProductBoxImageHoverType = theme_config('twt-product-box-image-hover-type') %}
  9. {% set twtProductBoxManufacturerShow = theme_config('twt-product-box-manufacturer-show') %}
  10. {% set twtProductBoxOrdernumberShow = theme_config('twt-product-box-ordernumber-show') %}
  11. {% set twtProductBoxProductReviewRatingShow = theme_config('twt-product-box-product-review-rating-show') %}
  12. {% set twtProductBoxShortDescriptionShow = theme_config('twt-product-box-short-description-show') %}
  14. {# ---------------- END: SET TEMPLATE VARS ---------------- #}
  16. {# ThemeWare: Adjustments on the product box #}
  17. {% block component_product_box_content %}
  18.     {# Default block #}
  19.     {{ parent() }}
  20. {% endblock %}
  23. {# ThemeWare: Adjustments on the product box name #}
  24. {% block component_product_box_name %}
  25.     {# Default block #}
  26.     {{ parent() }}
  28.     {# ThemeWare: Hersteller ergänzen. #}
  29.     {# TODO... see below #}
  30. {% endblock %}
  33. {# ThemeWare: Adjustments on the product-rating #}
  34. {# HC-Architecture @Doku #}
  35. {% block component_product_box_rating %}
  36.     {% if twtProductBoxProductReviewRatingShow == 2 %}
  37.         {# Default block #}
  38.         {{ parent() }}
  40.     {% elseif twtProductBoxProductReviewRatingShow == 3 %}
  41.         {# ThemeWare: Rating immer anzeigen falls konfiguriert. #}
  42.         {% if config('core.listing.showReview') %}
  43.             <div class="product-rating">
  44.                 {#% if product.ratingAverage %#}
  45.                     {% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
  46.                         points: product.ratingAverage,
  47.                         style: 'text-primary'
  48.                     } %}
  49.                 {#% endif %#}
  50.                 {# TODO: "Dieses Produkt wurde noch nicht bewertet" #}
  51.             </div>
  52.         {% endif %}
  53.     {% endif %}
  54. {% endblock %}
  57. {# ThemeWare: Adjustments on the product box description #}
  58. {% block component_product_box_description %}
  59.     {# ThemeWare: Zusatzfeld "Kurzbeschreibung" #}
  60.     {% if twtProductBoxShortDescriptionShow == 2 and product.translated.customFields.twt_clean_pro_custom_field__product__short_description is not empty %}
  61.         <div class="product-description">
  62.             {{ product.translated.customFields.twt_clean_pro_custom_field__product__short_description|raw }}
  63.         </div>
  64.     {% else %}
  65.         {# Default block #}
  66.         {{ parent() }}
  68.     {% endif %}
  70.     {# ThemeWare: Produktnummer ergänzen. #}
  71.     {% if product.productNumber and twtProductBoxOrdernumberShow == 2 %}
  72.         {% block twt_product_box_ordernumber %}
  73.             <div class="product-ordernumber twt-product-ordernumber">
  74.                 <span class="product-ordernumber-label">
  75.                     {{ "twt.listing.ordernumberLabel"|trans|sw_sanitize }}
  76.                 </span>
  77.                 <span class="product-ordernumber">
  78.                     {{ product.productNumber }}
  79.                 </span>
  80.             </div>
  81.         {% endblock %}
  82.     {% endif %}
  84.     {# ThemeWare: Hersteller ergänzen. #}
  85.     {% if product.manufacturer and twtProductBoxManufacturerShow == 2 %}
  86.         {% block twt_product_box_manufacturer %}
  87.             <div class="product-manufacturer twt-product-manufacturer">
  88.                 <span class="product-manufacturer-label">
  89.                     {{ "twt.listing.manufacturerLabel"|trans|sw_sanitize }}
  90.                 </span>
  91.                 <span class="product-manufacturer">
  92.                     {{ product.manufacturer.translated.name }}
  93.                 </span>
  94.             </div>
  95.         {% endblock %}
  96.     {% endif %}
  97. {% endblock %}
  100. {# TODO: HC-Architecture... #}
  101. {# ThemeWare: Adjustments on the product image #}
  102. {% block component_product_box_image %}
  103.     {# ThemeWare: Add hover image for crossfading the cover image #}
  104.     {# Check if cross-fade hover-type is configured - otherwise use default block #}
  105.     {# @TODO: Add configuration "custom field", "2nd image" and "custom field + 2nd image" #}
  106.     {% if twtProductBoxImageHoverType == 10 %}
  107.         {# Check whether the custom field #}
  108.         {% set customMedia = false %}
  109.         {% set crossfade = false %}
  111.         {# Custom field product media #}
  112.         {% if product.translated.customFields.twt_clean_pro_custom_field__product__hover_image is not empty and mediaCollection is not empty %}
  113.             {% set customMedia = true %}
  114.             {% set crossfade = true %}
  115.         {% endif %}
  117.         {# Get hoverMedia via custom field >>> #}
  118.         {# Simplify ID access #}
  119.         {% set hoverMediaId = product.translated.customFields.twt_clean_pro_custom_field__product__hover_image %}
  121.         {# Get access to media of product #}
  122.         {% set hoverMedia = mediaCollection.get(hoverMediaId) %}
  123.         {# <<< Get hoverMedia via custom field #}
  126.         <div class="product-image-wrapper{% if crossfade == true %} twt-is-crossfade{% endif %}"> {# <<< ThemeWare: Add css class if possible @TODO: remove if possible #}
  127.             {# fallback if display mode is not set #}
  128.             {% set displayMode = displayMode ?: 'standard' %}
  130.             {# set display mode 'cover' for box-image with standard display mode #}
  131.             {% if layout == 'image' and displayMode == 'standard' %}
  132.                 {% set displayMode = 'cover' %}
  133.             {% endif %}
  135.             <a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}"
  136.                title="{{ name }}"
  137.                class="product-image-link is-{{ displayMode }}">
  138.                 {% if cover.url %}
  139.                     {% set attributes = {
  140.                         'class': 'product-image is-'~displayMode,
  141.                         'alt': (cover.translated.alt ?: name),
  142.                         'title': (cover.translated.title ?: name)
  143.                     } %}
  145.                     {% if displayMode == 'cover' or displayMode == 'contain' %}
  146.                         {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  147.                     {% endif %}
  150.                     {# ThemeWare: Add hoverMedia for crossfading the cover image >>> #}
  151.                     {% if crossfade == true %}
  152.                         {# Check if custom field is set and apply it if available... #}
  153.                         {% if customMedia == true %}
  154.                             {# Check hover type... #}
  155.                             {% sw_thumbnails 'product-image-thumbnails' with {
  156.                                 media: hoverMedia,
  157.                                 sizes: sizes,
  158.                                 attributes: {
  159.                                     'class': 'product-image is-'~displayMode~' twt-crossfade-image is-custom'
  160.                                 }
  161.                             } %}
  162.                         {% endif %}
  163.                     {% endif %}
  164.                     {# <<< Add hoverMedia for crossfading the cover image #}
  167.                     {% block component_product_box_image_thumbnail %}
  168.                         {% sw_thumbnails 'product-image-thumbnails' with {
  169.                             media: cover,
  170.                             sizes: sizes
  171.                         } %}
  172.                     {% endblock %}
  173.                 {% else %}
  175.                     {% block component_product_box_image_placeholder %}
  176.                         <div class="product-image-placeholder">
  177.                             {% sw_icon 'placeholder' style {
  178.                                 'size': 'fluid'
  179.                             } %}
  180.                         </div>
  181.                     {% endblock %}
  182.                 {% endif %}
  183.             </a>
  185.             {% if config('core.cart.wishlistEnabled') %}
  186.                 {% block component_product_box_wishlist_action %}
  187.                     {% sw_include '@Storefront/storefront/component/product/card/wishlist.html.twig' with {
  188.                         appearance: 'circle',
  189.                         productId: id
  190.                     } %}
  191.                 {% endblock %}
  192.             {% endif %}
  193.         </div>
  194.     {% else %}
  196.         {# Default block #}
  197.         {{ parent() }}
  198.     {% endif %}
  199. {% endblock %}