vendor/store.shopware.com/solidadvancedsliderelements/src/Resources/views/storefront/element/cms-element-solid-ase-content-slider.html.twig line 1

Open in your IDE?
  1. {% block element_solid_ase_content_slider %}
  2.   {% set config = element.fieldConfig.elements %}
  3.   <div class="cms-element-solid-ase-content-slider
  4.     solid-ase-content-slider-{{ element.id }}
  5.     solid-ase-content-slider-{{ config.sliderSettings.value.animation }}
  6.     solid-ase-content-slider-{{ config.settings.value.sizingMode }}
  7.     {{ config.sliderSettings.value.center and
  8.       config.settings.value.inactiveLowerOpacity ?
  9.       'solid-ase-content-slider-inactive-lower-opacity' }}
  10.     solid-ase-content-slider-{{ config.settings.value.layoutVariant }}
  11.     {{ config.settings.value.contentAnimation != 'none' ?
  12.       ('solid-ase-content-slider-content-' ~
  13.       config.settings.value.contentAnimation) | raw }}
  14.     {{ config.sliderSettings.value.controls ?
  15.       'solid-ase-content-slider-controls' }}
  16.     {{ config.sliderSettings.value.controls ?
  17.       ('solid-ase-content-slider-controls-' ~
  18.       config.settings.value.controlsVariant) | raw }}
  19.     {{ config.sliderSettings.value.controls ?
  20.       ('solid-ase-content-slider-controls-' ~
  21.         config.settings.value.controlsPosition) | raw }}
  22.     {{ config.sliderSettings.value.nav ? 'solid-ase-content-slider-nav' }}
  23.     {{ config.sliderSettings.value.nav ? ('solid-ase-content-slider-nav-' ~
  24.       config.settings.value.navVariant) | raw }}
  25.     {{ config.sliderSettings.value.nav ? ('solid-ase-content-slider-nav-' ~
  26.       config.settings.value.navSize) | raw }}
  27.     {{ config.sliderSettings.value.nav ? ('solid-ase-content-slider-nav-' ~
  28.       config.settings.value.navPosition) | raw }}">
  29.     {% set dataAttributes = '' %}
  30.     {# data attributes #}
  31.     {% for key, value in config.sliderSettings.value %}
  32.       {% if not value == false %}
  33.         {% if loop.index0 > 0 %}
  34.           {% set dataAttributes = dataAttributes ~ ' ' %}
  35.         {% endif %}
  36.         {% set dataAttributes = dataAttributes ~ 'data-' ~
  37.           key | camelCaseToKebabCase ~ '="' ~ value ~ '"' %}
  38.       {% endif %}
  39.     {% endfor %}
  40.     {% if config.slides.value %}
  41.       {% set slides = config.slides.value | filter(slide => slide.active) %}
  42.       {# slide clones #}
  43.       {% set maxItems = config.sliderSettings.value.items %}
  44.       {% if config.sliderSettings.value.itemsMode == 'responsive-custom' %}
  45.         {% set maxItems = max(config.sliderSettings.value.itemsMobile,
  46.           config.sliderSettings.value.itemsTablet,
  47.           config.sliderSettings.value.itemsDesktop) %}
  48.       {% endif %}
  49.       {% if config.sliderSettings.value.loop %}
  50.         {% if 'gallery' in config.sliderSettings.value.animation %}
  51.           {% if slides | length == 1 %}
  52.             {% set cloneCount = maxItems * 2 - 1 %}
  53.           {% elseif slides | length == maxItems %}
  54.             {% set cloneCount = slides | length %}
  55.           {% else %}
  56.             {% if slides | length % maxItems != 0 %}
  57.               {% set cloneCount = slides | length *
  58.                 (maxItems - 1) %}
  59.             {% endif %}
  60.           {% endif %}
  61.         {% elseif slides | length <= maxItems %}
  62.           {% set minCloneCount =  maxItems - slides |
  63.             length + 1 %}
  64.           {% set cloneTimes = (minCloneCount / slides | length) |
  65.             round(0, 'ceil') %}
  66.           {% set cloneCount = slides | length * cloneTimes %}
  67.         {% endif %}
  68.       {% endif %}
  69.       {% if cloneCount %}
  70.         {% for i in 0..cloneCount - 1 %}
  71.           {% set slides = slides |
  72.             merge({ (i + slides | length): slides[i] }) %}
  73.         {% endfor %}
  74.       {% endif %}
  75.       {% block element_solid_ase_content_slider_slides %}
  76.         {# slides #}
  77.         <ul class="solid-ase-content-slider is-loading"
  78.           data-element-id="{{ element.id }}"
  79.           {{ dataAttributes | raw }}>
  80.           {% for slide in slides %}
  81.             {% block element_solid_ase_content_slider_slide %}
  82.               <li class="slide solid-ase-content-slider-slide-{{ slide.id }}">
  83.                 <div class="slide-container"
  84.                   {{ slide.backgroundColor ? ('style="background-color: ' ~
  85.                     slide.backgroundColor ~ ';"') | raw }}>
  86.                   {% block element_solid_ase_content_slider_slide_background_media %}
  87.                     {# background-media #}
  88.                     {% if slide.backgroundMedia %}
  89.                       {% set mediaCollection =
  90.                         searchMedia([slide.backgroundMedia], context.context) %}
  91.                       {% set backgroundMedia =
  92.                         mediaCollection.get(slide.backgroundMedia) %}
  93.                       <div class="background-media-container">
  94.                         {% if 'video' in backgroundMedia.mimeType %}
  95.                           <video autoplay muted playsinline loop>
  96.                             <source
  97.                             src="{{ backgroundMedia.url }}"
  98.                             type="{{ backgroundMedia.mimeType }}">
  99.                           </video>
  100.                         {% else %}
  101.                           {% sw_thumbnails 'solid-ase-content-slider-slides' with {
  102.                             media: backgroundMedia,
  103.                             columns: 1,
  104.                             sizes: {},
  105.                             attributes: {
  106.                               'class': slide.backgroundSizingMode ~ ' ' ~
  107.                                 (slide.backgroundSizingMode == 'cover' ? slide.backgroundAnimation) ~ ' ' ~
  108.                                 (slide.backgroundSizingMode == 'contain' ? slide.backgroundPosition),
  109.                               'alt': (backgroundMedia.translated.alt ?: ''),
  110.                               'title': (backgroundMedia.translated.title ?: '')
  111.                             }
  112.                           } %}
  113.                         {% endif %}
  114.                       </div>
  115.                     {% endif %}
  116.                   {% endblock %}
  117.                   {% block element_solid_ase_content_slider_slide_content_container %}
  118.                     {# content-container #}
  119.                     <div class="content-container">
  120.                       {% if config.sliderSettings.value.items == 1 %}
  121.                         {% set class = 'col-sm-9 col-md-8 col-lg-6 col-xl-5' %}
  122.                       {% elseif config.sliderSettings.value.items == 2 %}
  123.                         {% set class = 'col-sm-9 col-lg-10' %}
  124.                       {% elseif config.sliderSettings.value.items >= 3 %}
  125.                         {% set class = 'col-sm-9 col-lg-10 col-xl-12' %}
  126.                       {% endif %}
  127.                       <div class="{{ class }} content">
  128.                         {% if slide.contentType == 'default' %}
  129.                           {% if slide.smallHeadline %}
  130.                             <p class="small-headline">
  131.                               {{ slide.smallHeadline }}
  132.                             </p>
  133.                           {% endif %}
  134.                           {% if slide.headline %}
  135.                             <p class="h1 headline">
  136.                               {{ slide.headline }}
  137.                             </p>
  138.                           {% endif %}
  139.                           {% if slide.text %}
  140.                             <p class="text">
  141.                               {{ slide.text }}
  142.                             </p>
  143.                           {% endif %}
  144.                           {% if slide.buttonLabel and slide.buttonLink %}
  145.                             <a class="btn
  146.                               btn-{{ config.settings.value.buttonVariant }}"
  147.                               {{ slide.buttonLink ? ('href="' ~ slide.buttonLink ~ '"') | raw }}
  148.                               {{ slide.buttonTargetBlank ? 'target="_blank" rel="noopener"' }}
  149.                               {{ slide.buttonTitle ? ('title="' ~ slide.buttonTitle  ~ '"') | raw }}>
  150.                               {{ slide.buttonLabel }}
  151.                             </a>
  152.                           {% endif %}
  153.                         {% elseif slide.contentType == 'custom' %}
  154.                           {{ slide.customContent | raw }}
  155.                         {% endif %}
  156.                       </div>
  157.                     </div>
  158.                   {% endblock %}
  159.                   {% block element_solid_ase_content_slider_slide_link %}
  160.                     {% if slide.link %}
  161.                       {% if slide.contentType == 'default' and slide.headline %}
  162.                         {% set label = slide.headline %}
  163.                       {% elseif slide.name %}
  164.                         {% set label = slide.name %}
  165.                       {% endif %}
  166.                       <a class="stretched-link" aria-label="{{ label }}"
  167.                         href="{{ slide.link }}"
  168.                         {{ slide.linkTargetBlank ? 'target="_blank" rel="noopener"' }}
  169.                         {{ slide.linkTitle ? ('title="' ~ slide.linkTitle ~ '"') | raw }}>
  170.                       </a>
  171.                     {% endif %}
  172.                   {% endblock %}
  173.                 </div>
  174.               </li>
  175.             {% endblock %}
  176.           {% endfor %}
  177.         </ul>
  178.       {% endblock %}
  179.       {% block element_solid_ase_content_slider_controls %}
  180.         {# controls #}
  181.         {% if config.sliderSettings.value.controls %}
  182.           <div class="solid-ase-content-slider-controls-container">
  183.             {% block element_solid_ase_content_slider_control_prev %}
  184.               <button class="btn btn-primary solid-ase-content-slider-control
  185.                 solid-ase-content-slider-control-prev">
  186.                 <span class="icon">
  187.                   {% if config.settings.value.controlsIconVariant == 'caret' %}
  188.                     {{ source('@Storefront/assets/icon/default/arrow-head-left.svg',
  189.                       ignore_missing = true) }}
  190.                   {% elseif config.settings.value.controlsIconVariant == 'caret-circle' %}
  191.                     {{ source('@Storefront/assets/icon/default/arrow-circle-left.svg',
  192.                       ignore_missing = true) }}
  193.                   {% elseif config.settings.value.controlsIconVariant == 'arrow' %}
  194.                     {{ source('@Storefront/assets/icon/default/arrow-left.svg',
  195.                       ignore_missing = true) }}
  196.                   {% endif %}
  197.                 </span>
  198.               </button>
  199.             {% endblock %}
  200.             {% block element_solid_ase_content_slider_control_next %}
  201.               <button class="btn btn-primary solid-ase-content-slider-control
  202.                 solid-ase-content-slider-control-next">
  203.                 <span class="icon">
  204.                   {% if config.settings.value.controlsIconVariant == 'caret' %}
  205.                     {{ source('@Storefront/assets/icon/default/arrow-head-right.svg',
  206.                       ignore_missing = true) }}
  207.                   {% elseif config.settings.value.controlsIconVariant == 'caret-circle' %}
  208.                     {{ source('@Storefront/assets/icon/default/arrow-circle-right.svg',
  209.                       ignore_missing = true) }}
  210.                   {% elseif config.settings.value.controlsIconVariant == 'arrow' %}
  211.                     {{ source('@Storefront/assets/icon/default/arrow-right.svg',
  212.                       ignore_missing = true) }}
  213.                   {% endif %}
  214.                 </span>
  215.               </button>
  216.             {% endblock %}
  217.           </div>
  218.         {% endif %}
  219.       {% endblock %}
  220.     {% endif %}
  221.   </div>
  222. {% endblock %}