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