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

  1. {% block moorl_foundation_listing %}
  2.     {% if not config %}
  3.         {% set config = element.fieldConfig.elements %}
  4.     {% endif %}
  5.     {% if not config %}
  6.         {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
  7.             type: 'danger',
  8.             content: 'moorl-foundation.search.missingConfiguration'|trans|sw_sanitize
  9.         } %}
  10.     {% endif %}
  12.     {# Set listing title by a page entity #}
  13.     {% set listingHeaderTitle = listingHeaderTitle ?? element.translated.config.listingHeaderTitle.value %}
  15.     {% set itemCss = [
  16.         "padding:#{config.itemPadding.value}",
  17.         "background-color:#{config.itemBackgroundColor.value}",
  18.         "height:#{config.itemHeight.value}",
  19.         "--content-highlight-color:#{config.contentHighlightColor.value}",
  20.         "--content-background-color:#{config.contentBackgroundColor.value}",
  21.         "--content-color:#{config.contentColor.value}",
  22.     ] %}
  23.     {% set contentCss = [
  24.         "padding:#{config.contentPadding.value}",
  25.         "background-color:#{config.contentBackgroundColor.value}",
  26.         "color:#{config.contentColor.value}",
  27.         "text-align:#{config.textAlign.value}",
  28.     ] %}
  30.     {% set listingCss = [] %}
  31.     {% if config.listingLayout.value == 'grid' %}
  32.         {% set listingCss = listingCss|merge([
  33.             "grid-template-columns:repeat(auto-fit, minmax(#{config.itemWidth.value}, 1fr))",
  34.             "grid-gap:#{config.gapSize.value}",
  35.         ]) %}
  36.     {% elseif config.listingLayout.value == 'list' %}
  37.         {% set listingCss = listingCss|merge([
  38.             "grid-gap:#{config.gapSize.value}",
  39.         ]) %}
  40.     {% elseif config.listingLayout.value == 'slider' %}
  41.         {% set listingCss = listingCss|merge([
  42.             "height:#{config.itemHeight.value}",
  43.         ]) %}
  44.     {% elseif config.listingLayout.value == 'standard' %}
  45.         {% set itemCss = itemCss|merge([
  46.             "height:#{config.itemHeight.value}",
  47.         ]) %}
  48.         {% set listingCss = listingCss|merge([
  49.             "justify-content:#{config.listingJustifyContent.value}",
  50.         ]) %}
  51.     {% endif %}
  53.     {% set listingContent %}
  54.         {% if config.listingLayout.value == 'standard' %}
  55.             {% set listingColumns = 'cms-listing-col col-sm-6 col-lg-4 col-xl-3' %}
  57.             {% if section and section.type == 'sidebar' %}
  58.                 {% set listingColumns = 'cms-listing-col col-sm-6 col-lg-6 col-xl-4' %}
  59.             {% endif %}
  60.         {% else %}
  61.             {% set listingColumns = null %}
  62.         {% endif %}
  64.         {% for item in searchResult %}
  65.             {% block moorl_foundation_listing_item %}
  66.                 {% sw_include '@MoorlFoundation/plugin/moorl-foundation/listing-item.html.twig' %}
  67.             {% endblock %}
  68.         {% endfor %}
  69.     {% endset %}
  71.     <div class="cms-element-moorl-listing">
  72.         {% if listingHeaderTitle %}
  73.             <div class="h2 moorl-listing-header-title">
  74.                 {{ listingHeaderTitle }}
  75.             </div>
  76.         {% endif %}
  78.         {% if listingHeaderLink %}
  79.             <div class="moorl-listing-header-link">
  80.                 <a class=""
  81.                    href="{{ listingHeaderLink }}"
  82.                    title="{{ "moorl-foundation.search.moreButton"|trans }}">
  83.                     {{ "moorl-foundation.search.moreButton"|trans }}
  84.                 </a>
  85.             </div>
  86.         {% endif %}
  88.         {% if config.listingLayout.value == 'slider' %}
  89.             {# Note: Tiny Slider breaks if the parent element is display: grid with fr based template columns #}
  90.             {% set listingCss = listingCss|merge([
  91.                 "margin-right:-#{config.gapSize.value}",
  92.             ]) %}
  94.             {% set productSliderOptions = {
  95.                 productboxMinWidth: config.itemWidth.value,
  96.                 slider: {
  97.                     navPosition: 'bottom',
  98.                     speed: config.speed.value ?: 400,
  99.                     autoplay: config.autoplay.value ? true : false,
  100.                     autoplayHoverPause: config.autoplayHoverPause.value ? true : false,
  101.                     autoplayTimeout: config.autoplayTimeout.value ?: 3500,
  102.                     mode: config.mode.value ? config.mode.value : "carousel",
  103.                     gutter: (config.gapSize.value|number_format * 1),
  104.                     animateIn: config.mode.value == 'gallery' ? config.animateIn.value ?: null,
  105.                     animateOut: config.mode.value == 'gallery' ? config.animateOut.value ?: null,
  106.                     nav: config.navigationDots.value ? true : false,
  107.                     controls: config.navigationArrows.value ? true : false,
  108.                     mouseDrag: config.mouseDrag.value ? true : false,
  109.                     autoplayButtonOutput: false,
  110.                     swipeAngle: false,
  111.                     autoHeight: false,
  112.                     autoplayButtonOutput: false,
  113.                     navAsThumbnails: config.navigationDots.value == 'thumbnails' ? true : false,
  114.                     navContainer: config.navigationDots.value == 'thumbnails' ? "#thumbnails#{element.id}" : null
  115.                 }
  116.             } %}
  118.             {% set sliderClasses = ['base-slider','moorl-slider','product-slider'] %}
  119.             {% set controlsPrevClasses = ['base-slider-controls-prev','image-slider-controls-prev'] %}
  120.             {% set controlsNextClasses = ['base-slider-controls-next','image-slider-controls-next'] %}
  121.             {% if config.navigationArrows.value == "outside" %}
  122.                 {% set sliderClasses = sliderClasses|merge(['has-nav-outside']) %}
  123.                 {% set controlsPrevClasses = controlsPrevClasses|merge(['is-nav-prev-outside']) %}
  124.                 {% set controlsNextClasses = controlsNextClasses|merge(['is-nav-next-outside']) %}
  125.             {% elseif config.navigationArrows.value == "inside" %}
  126.                 {% set controlsPrevClasses = controlsPrevClasses|merge(['is-nav-prev-inside']) %}
  127.                 {% set controlsNextClasses = controlsNextClasses|merge(['is-nav-next-inside']) %}
  128.             {% endif %}
  129.             {% if config.navigationDots.value == "outside" %}
  130.                 {% set sliderClasses = sliderClasses|merge(['has-dots-outside']) %}
  131.             {% endif %}
  133.             <div class="{{ sliderClasses|join(' ') }}"
  134.                  data-product-slider="true"
  135.                  data-product-slider-options='{{ productSliderOptions|json_encode }}'>
  136.                 <ul class="moorl-listing-slider"
  137.                     style="{{ listingCss|join(';')|raw }}"
  138.                     data-product-slider-container="true">
  139.                     {{ listingContent }}
  140.                 </ul>
  142.                 {% if config.navigationDots.value == "thumbnails" %}
  143.                     <div class="moorl-listing-slider-thumbnails" style="margin-top: {{ config.gapSize.value }}">
  144.                         {% block moorl_foundation_listing_slider_thumbnails %}
  145.                             <ul id="thumbnails{{ element.id }}">
  146.                                 {% for item in searchResult %}
  147.                                     <li>
  148.                                         {% block moorl_foundation_listing_slider_thumbnails_item %}
  149.                                             {% sw_thumbnails 'moorl-listing-slider-thumbnail' with {
  150.                                                 media: item.media,
  151.                                                 attributes: {alt: '',title: ''}
  152.                                             } %}
  153.                                         {% endblock %}
  154.                                     </li>
  155.                                 {% endfor %}
  156.                             </ul>
  157.                         {% endblock %}
  158.                     </div>
  159.                 {% endif %}
  161.                 {% if config.navigationArrows.value %}
  162.                     <div class="">
  163.                         <div class="base-slider-controls"
  164.                              data-product-slider-controls="true">
  165.                             <button class="{{ controlsPrevClasses|join(' ') }}">
  166.                                 {% block moorl_foundation_listing_slider_controls_items_prev_icon %}
  167.                                     {% sw_icon 'arrow-head-left' %}
  168.                                 {% endblock %}
  169.                             </button>
  170.                             <button class="{{ controlsNextClasses|join(' ') }}">
  171.                                 {% block moorl_foundation_listing_slider_controls_items_next_icon %}
  172.                                     {% sw_icon 'arrow-head-right' %}
  173.                                 {% endblock %}
  174.                             </button>
  175.                         </div>
  176.                     </div>
  177.                 {% endif %}
  178.             </div>
  179.         {% elseif config.listingLayout.value == 'standard' %}
  180.             <ul class="row cms-listing-row js-listing-wrapper moorl-listing-standard"
  181.                 style="{{ listingCss|join(';')|raw }}">
  182.                 {{ listingContent }}
  183.             </ul>
  184.         {% elseif config.listingLayout.value == 'search-suggest' %}
  185.             <ul class="moorl-search-suggest-list">
  186.                 {{ listingContent }}
  187.             </ul>
  188.         {% else %}
  189.             <ul class="js-listing-wrapper moorl-listing-{{ config.listingLayout.value }}"
  190.                 style="{{ listingCss|join(';')|raw }}">
  191.                 {{ listingContent }}
  192.             </ul>
  193.         {% endif %}
  194.     </div>
  195. {% endblock %}