custom/plugins/AlexMax/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. {% set config = context.extensions.WodkaHoverOnListingSW6 %}
  4. {% block component_product_box %}
  5.   {% if context.extensions.WodkaHoverOnListingSW6 is not defined %}
  6.     {{ parent() }}
  7.   {% else %}
  8.     {% set config = context.extensions.WodkaHoverOnListingSW6 %}
  9.     {% if config.active and config.activeFlipDescription %}
  10.       {% if product %}
  11.         {% set name = product.translated.name %}
  12.         {% set id = product.id %}
  13.         {% set cover = product.cover.media %}
  14.         {% set variation = product.variation %}
  15.         <div class="card product-box box-{{ layout }} flip-box">
  16.           <div class="card-body flip-box-inner">
  17.             <div class="flip-box-front">
  19.               {# Clickable all product block #}
  20.               {% block component_product_box_badges %}
  21.                 {% if config.active and config.clickableProductBlock %}
  22.                   <a class="" href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}">
  23.                     {{ parent() }}
  24.                   </a>
  25.                 {% else %}
  26.                   {{ parent() }}
  27.                 {% endif %}
  28.               {% endblock %}
  30.               {% block component_product_box_rich_snippets %}
  31.                 {{ parent() }}
  32.               {% endblock %}
  34.               {% block component_product_box_image %}
  35.                 {% if config.active and product.cover %}
  36.                   {% set hover = null %}
  37.                   {% if product.extensions.hover is defined %}
  38.                     {% set hover = product.extensions.hover %}
  39.                   {% elseif product.media and product.media|length > 1 %}
  40.                     {% set break = false %}
  41.                     {% set hoverPosition = 0 %}
  42.                     {% if product.cover.position == 0 %}
  43.                       {% set hoverPosition = 1 %}
  44.                     {% endif %}
  45.                     {% for productMedia in product.media %}
  46.                       {% if not break %}
  47.                         {% if productMedia.position == hoverPosition %}
  48.                           {% set hover = productMedia.media %}
  49.                           {% set break = true %}
  50.                         {% endif %}
  51.                       {% endif %}
  52.                     {% endfor %}
  54.                     {# Product media position is sometimes broken and its value is 1 for all product media #}
  55.                     {% if not hover %}
  56.                       {% set break = false %}
  57.                       {% for productMedia in product.media %}
  58.                         {% if not break %}
  59.                           {% if productMedia.media and product.cover.mediaId != productMedia.mediaId %}
  60.                             {% set hover = productMedia.media %}
  61.                             {% set break = true %}
  62.                           {% endif %}
  63.                         {% endif %}
  64.                       {% endfor %}
  65.                     {% endif %}
  66.                   {% endif %}
  68.                   {% if hover.url %}
  69.                     <div class="wd--hover-on-listing-container">
  70.                       {% if config.imageSliderActive and product.cover and product.media %}
  71.                         {% set autoplay = false %}
  72.                         {% set useJsFunction = false %}
  74.                         {% if not config.navigationDotsPosition and not config.navigationArrowsPosition %}
  75.                           {% set autoplay = true %}
  76.                         {% else %}
  77.                           {% if config.autoplay %}
  78.                             {% set autoplay = false %}
  79.                             {% set useJsFunction = true %}
  80.                           {% else %}
  81.                             {% set autoplay = false %}
  82.                           {% endif %}
  83.                         {% endif %}
  85.                         {% sw_include '@WodkaHoverOnListingSW6/storefront/element/listing-image-slider.html.twig' with {
  86.                           'productImages': product.media.media,
  87.                           'navigationDotsPosition': config.navigationDotsPosition,
  88.                           'navigationArrowsPosition': config.navigationArrowsPosition,
  89.                           'cover': product.cover.media,
  90.                           'autoplay': autoplay
  91.                         } %}
  92.                       {% else %}
  93.                         <div class="image--default">
  94.                           <div class="product-image-wrapper wd--hover-on-listing-product-image">
  95.                             {# fallback if display mode is not set #}
  96.                             {% set displayMode = displayMode ?: 'standard' %}
  98.                             {# set display mode 'cover' for box-image with standard display mode #}
  99.                             {% if layout == 'image' and displayMode == 'standard' %}
  100.                               {% set displayMode = 'cover' %}
  101.                             {% endif %}
  103.                             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  104.                                title="{{ name }}"
  105.                                class="product-image-link is-{{ displayMode }}">
  106.                               {% if cover.url %}
  107.                                 {% set attributes = {
  108.                                   'class': 'product-image is-'~displayMode,
  109.                                   'alt': (cover.translated.alt ?: name),
  110.                                   'title': (cover.translated.title ?: name)
  111.                                 } %}
  113.                                 {% if displayMode == 'cover' or displayMode == 'contain' %}
  114.                                   {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  115.                                 {% endif %}
  117.                                 {% sw_thumbnails 'product-image-thumbnails' with {
  118.                                   media: cover,
  119.                                   sizes: sizes
  120.                                 } %}
  121.                               {% else %}
  122.                                 <div class="product-image-placeholder">
  123.                                   {% sw_icon 'placeholder' style {
  124.                                     'size': 'fluid'
  125.                                   } %}
  126.                                 </div>
  127.                               {% endif %}
  129.                             </a>
  131.                           
  132.                           </div>
  133.                         </div>
  135.                         {# fallback if display mode is not set #}
  136.                         {% set displayMode = displayMode ?: 'standard' %}
  138.                         {# set display mode 'cover' for box-image with standard display mode #}
  139.                         {% if layout == 'image' and displayMode == 'standard' %}
  140.                           {% set displayMode = 'cover' %}
  141.                         {% endif %}
  143.                         <div class="image--hover">
  144.                           <div class="product-image-wrapper wd--hover-on-listing-product-image">
  145.                             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  146.                                title="{{ name }}"
  147.                                class="product-image-link is-{{ displayMode }}">
  148.                               {% set attributes = {
  149.                                 'class': 'product-image is-'~displayMode,
  150.                                 'alt': (hover.translated.alt ?: name),
  151.                                 'title': (hover.translated.title ?: name)
  152.                               } %}
  154.                               {% sw_thumbnails 'product-image-thumbnails' with {
  155.                                 media: hover,
  156.                                 sizes: {
  157.                                   'xs': '501px',
  158.                                   'sm': '315px',
  159.                                   'md': '427px',
  160.                                   'lg': '333px',
  161.                                   'xl': '284px'
  162.                                 }
  163.                               } %}
  164.                             </a>
  165.                           </div>
  166.                         </div>
  167.                       {% endif %}
  168.                     </div>
  169.                   {% else %}
  170.                     {{ parent() }}
  171.                   {% endif %}
  172.                 {% else %}
  173.                   {{ parent() }}
  174.                 {% endif %}
  175.               {% endblock %}
  177.               {% block component_product_box_info %}
  178.                 <div class="product-info">
  180.                   {% block component_product_box_name %}
  181.                     <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  182.                        class="product-name"
  183.                        title="{{ name }}">
  184.                       {{ name }}
  185.                     </a>
  186.                   {% endblock %}
  187.                   {% block component_product_box_price %}
  188.                     {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
  189.                   {% endblock %}
  191.                 {% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
  192.                 </div>
  193.               {% endblock %}
  194.               
  196.             </div>
  198.           </div>
  199.           
  200.         </div>
  201.       {% endif %}
  202.     {% else %}
  203.       {{ parent() }}
  204.     {% endif %}
  205.   {% endif %}
  206. {% endblock %}
  208. {# Clickable all product block #}
  209. {% block component_product_box_content %}
  210.   {% if config.active and config.clickableProductBlock %}
  211.     <a class="linkClickableProductBlock" href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"></a>
  212.     {{ parent() }}
  213.   {% else %}
  214.     {{ parent() }}
  215.   {% endif %}
  216. {% endblock %}