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