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

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