custom/plugins/MoorlFoundation/src/Resources/views/plugin/moorl-foundation/listing-item.html.twig line 1

Open in your IDE?
  1. {% if not schemaOrgType %}
  2.     {% set schemaOrgType = 'Thing' %}
  3. {% endif %}
  5. {% set itemContent %}
  6.     {% block moorl_foundation_listing_item %}
  7.         {% if config.listingLayout.value == 'search-suggest' %}
  8.             {# Clone of "storefront/layout/header/search-suggest.html.twig" #}
  9.             {% block moorl_listing_search_suggest_item %}
  10.                 <li class="search-suggest-product js-result">
  11.                     <a href="{{ url }}"
  12.                        title="{{ title }}"
  13.                        class="search-suggest-product-link">
  14.                         <div class="row align-items-center {{ gridNoGuttersClass }}">
  15.                             <div class="col-auto search-suggest-product-image-container">
  16.                                 {% if media.url %}
  17.                                     {% sw_thumbnails 'search-suggest-product-image-thumbnails' with {
  18.                                         media: media,
  19.                                         sizes: {
  20.                                             'default': '100px'
  21.                                         },
  22.                                         attributes: {
  23.                                             'class': 'search-suggest-product-image',
  24.                                             'alt': (media.translated.alt ?: ''),
  25.                                             'title': (media.translated.title ?: '')
  26.                                         }
  27.                                     } %}
  28.                                 {% else %}
  29.                                     {% sw_icon 'placeholder' style {
  30.                                         'size': 'lg'
  31.                                     } %}
  32.                                 {% endif %}
  33.                             </div>
  34.                             <div class="col search-suggest-product-name">
  35.                                 {{ title }}
  36.                             </div>
  37.                             <div class="col-auto text-muted">
  38.                                 {{ meta }}
  39.                             </div>
  40.                         </div>
  41.                     </a>
  42.                 </li>
  43.             {% endblock %}
  44.         {% else %}
  45.             <div class="moorl-listing-item-image">
  46.                 {% block moorl_listing_item_image %}
  47.                     {% if media.url %}
  48.                         {% set imageCss = [] %}
  49.                         {% if config.itemLayout.value == 'avatar' %}
  50.                             {% set imageCss = imageCss|merge([
  51.                                 "height:#{config.itemWidth.value}",
  52.                                 "width:#{config.itemWidth.value}",
  53.                             ]) %}
  54.                         {% endif %}
  56.                         {% sw_thumbnails 'moorl-listing-item-image-thumbnails' with {
  57.                             media: media,
  58.                             attributes: {
  59.                                 'itemprop': 'image',
  60.                                 'alt': title,
  61.                                 'class': "is-#{config.displayMode.value}",
  62.                                 'style': imageCss|join(';'),
  63.                                 'title': ''
  64.                             }
  65.                         } %}
  66.                     {% elseif config.itemLayout.value == 'image-or-title' %}
  67.                         <div itemprop="name" class="moorl-listing-item-title" title="{{ title }}">
  68.                             {{ title|raw }}
  69.                         </div>
  70.                     {% else %}
  71.                         {% sw_icon 'placeholder' style {
  72.                             'size': 'fluid'
  73.                         } %}
  74.                     {% endif %}
  75.                 {% endblock %}
  76.             </div>
  78.             {% if config.itemLayout.value != 'image-or-title' %}
  79.                 <div class="moorl-listing-item-content" style="{{ contentCss|join(';') }}">
  80.                     <div class="">
  81.                         {% block moorl_foundation_listing_item_content %}
  82.                             <div itemprop="name" class="moorl-listing-item-title" title="{{ title }}">
  83.                                 {% block moorl_foundation_listing_item_title %}
  84.                                     {{ title|raw }}
  85.                                 {% endblock %}
  86.                             </div>
  88.                             {% if meta %}
  89.                                 <div class="moorl-listing-item-meta">
  90.                                     {% block moorl_foundation_listing_item_meta %}
  91.                                         {{ meta }}
  92.                                     {% endblock %}
  93.                                 </div>
  94.                             {% endif %}
  96.                             {% if description %}
  97.                                 <div itemprop="description" class="moorl-listing-item-description">
  98.                                     {% block moorl_foundation_listing_item_description %}
  99.                                         {{ description|raw }}
  100.                                     {% endblock %}
  101.                                 </div>
  102.                             {% endif %}
  104.                             {% if config.hasButton.value %}
  105.                                 <a itemprop="mainEntityOfPage"
  106.                                    href="{{ url }}" {% if config.urlNewTab.value %}target="_blank"
  107.                                    rel="noopener"{% endif %}
  108.                                    title="{{ config.buttonLabel.value }}"
  109.                                    class="{{ config.buttonClass.value }} moorl-listing-item-button">
  110.                                     {% block moorl_foundation_listing_item_button_label %}
  111.                                         {{ config.buttonLabel.value ?? "moorl-foundation.search.moreButton"|trans }}
  112.                                     {% endblock %}
  113.                                 </a>
  114.                             {% endif %}
  115.                         {% endblock %}
  116.                     </div>
  117.                 </div>
  118.             {% endif %}
  119.         {% endif %}
  120.     {% endblock %}
  121. {% endset %}
  123. {% if config.listingLayout.value == 'search-suggest' %}
  124.     {{ itemContent }}
  125. {% elseif config.itemLayout.value == 'custom' %}
  126.     <li class="{{ listingColumns }}">
  127.         {% sw_include config.itemLayoutTemplate.value %}
  128.     </li>
  129. {% elseif config.hasButton.value or not url %}
  130.     <li class="{{ listingColumns }}"
  131.         itemscope
  132.         itemtype="https://schema.org/{{ schemaOrgType }}">
  133.         <div class="moorl-listing-item-wrapper{% if config.itemHasBorder.value %} has-border{% endif %}"
  134.              style="{{ itemCss|join(';')|raw }}">
  135.             <div class="moorl-listing-item-{{ config.itemLayout.value }}">
  136.                 {{ itemContent }}
  137.             </div>
  138.         </div>
  139.     </li>
  140. {% else %}
  141.     <li class="{{ listingColumns }}"
  142.         itemscope
  143.         itemtype="https://schema.org/{{ schemaOrgType }}">
  144.         <a itemprop="mainEntityOfPage" href="{{ url }}" {% if config.urlNewTab.value %}target="_blank"
  145.            rel="noopener"{% endif %}
  146.            class="moorl-listing-item-wrapper{% if config.itemHasBorder.value %} has-border{% endif %}"
  147.            style="{{ itemCss|join(';')|raw }}"
  148.            title="{{ title }}">
  149.             <div class="moorl-listing-item-{{ config.itemLayout.value }}">
  150.                 {{ itemContent }}
  151.             </div>
  152.         </a>
  153.     </li>
  154. {% endif %}