custom/plugins/SalvanaPferde2022/src/Resources/views/storefront/component/product/card/box-product-motion-teaser-right.html.twig line 1

Open in your IDE?
  1. {% if product %}
  2.   {% set name = product.translated.name %}
  3.   {% set id = product.id %}
  4.   {% set cover = product.cover.media %}
  6.   {% if product.translated.customFields.wndev_motion_image %}
  7.       {% set motionImageID = product.translated.customFields.wndev_motion_image %}
  9.       {# fetch media as batch - optimized for performance #}
  10.       {% set mediaCollection = searchMedia([motionImageID], context.context) %}
  12.       {# extract single media object #}
  13.       {% set motionImage = mediaCollection.get(motionImageID) %}
  14.   {% endif %}
  16.   <div class="box-{{ layout }} col-12">
  18.     {% block component_product_box_content %}
  19.       <div class="card-body row">
  20.         {% block component_product_box_rich_snippets %}
  21.           {% sw_include '@Storefront/storefront/component/product/card/meta.html.twig' %}
  22.         {% endblock %}
  24.         {% block component_product_box_info %}
  25.           <div class="product-info col-12 col-md-5 col-xl-4">
  27.             {% block component_product_box_name %}
  28.               <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  29.                  class="product-name"
  30.                  title="{{ name }}">
  31.                 {{ name }}
  32.               </a>
  33.             {% endblock %}
  34.             <div class="row">
  35.               {% if product.translated.customFields.wndev_listing_text %}
  36.                 <div class="sub-title-wrapper col-12">
  37.                   <p class="sub-title m-0">{{ product.translated.customFields.wndev_listing_text }}</p>
  38.                 </div>
  39.               {% endif %}
  40.               {% if product.translated.customFields.wndev_listing_custom_list %}
  41.                 <div class="custom-listing-list-wrapper d-none d-sm-block col-12">
  42.                   {{ product.translated.customFields.wndev_listing_custom_list|raw }}
  43.                 </div>
  44.               {% endif %}
  45.             </div>
  47.             <div class="row">
  48.               {% if product.translated.customFields.wndev_vlog_badge %}
  49.                 <div class="col-6">
  50.                   <div class="vlog-badge-wrapper">
  51.                     {% set VlogBadgeID = product.translated.customFields.wndev_vlog_badge %}
  53.                     {# fetch media as batch - optimized for performance #}
  54.                     {% set mediaCollection = searchMedia([VlogBadgeID], context.context) %}
  56.                     {# extract single media object #}
  57.                     {% set VlogBadge = mediaCollection.get(VlogBadgeID) %}
  59.                     {% sw_thumbnails 'vlog-badge-listing' with {
  60.                       media: VlogBadge,
  61.                       attributes: {
  62.                         'class': 'vlog-badge-image',
  63.                         'alt': (VlogBadge.alt ?: ''),
  64.                         'title': (VlogBadge.title ?: ''),
  65.                         'data-object-fit': 'cover'
  66.                       }
  67.                     } %}
  68.                   </div>
  69.                 </div>
  70.               {% endif %}
  71.               <div class="col-6 col-lg-12">
  72.                 <div class="product-action text-right text-lg-left">
  73.                   <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  74.                      class="btn btn-primary"
  75.                      title="{{ "listing.boxProductDetails"|trans|striptags }}">
  76.                     {{ "listing.boxProductDetails"|trans|sw_sanitize }}
  77.                   </a>
  78.                 </div>
  79.               </div>
  80.             </div>
  81.           </div>
  82.         {% endblock %}
  86.         {% block component_product_box_image %}
  87.           <div class="product-image-wrapper col-12 d-flex"
  88.                {% if product.translated.customFields.wndev_motion_image %} style="background-image: url('{{ motionImage.url }}');"{% endif %}>
  89.             {% block component_product_box_badges %}
  90.               {% sw_include '@Storefront/storefront/component/product/card/badges.html.twig' %}
  91.             {% endblock %}
  93.             {# fallback if display mode is not set #}
  94.             {% set displayMode = displayMode ?: 'standard' %}
  96.             {# set display mode 'cover' for box-image with standard display mode #}
  97.             {% if layout == 'image' and displayMode == 'standard' %}
  98.               {% set displayMode = 'cover' %}
  99.             {% endif %}
  101.             <a href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
  102.                title="{{ name }}"
  103.                class="product-image-link is-{{ displayMode }}">
  104.               {% if cover.url %}
  105.                 {% set attributes = {
  106.                   'class': 'product-image is-'~displayMode,
  107.                   'alt': (cover.translated.alt ?: name),
  108.                   'title': (cover.translated.title ?: name)
  109.                 } %}
  111.                 {% if displayMode == 'cover' or displayMode == 'contain' %}
  112.                   {% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
  113.                 {% endif %}
  115.                 {% sw_thumbnails 'product-image-thumbnails' with {
  116.                   media: cover,
  117.                   sizes: {
  118.                     'xs': '501px',
  119.                     'sm': '315px',
  120.                     'md': '427px',
  121.                     'lg': '333px',
  122.                     'xl': '284px'
  123.                   }
  124.                 } %}
  125.               {% else %}
  126.                 <div class="product-image-placeholder">
  127.                   {% sw_icon 'placeholder' style {
  128.                     'size': 'fluid'
  129.                   } %}
  130.                 </div>
  131.               {% endif %}
  132.             </a>
  133.           </div>
  134.         {% endblock %}
  136.       </div>
  137.     {% endblock %}
  138.   </div>
  139. {% endif %}