custom/plugins/OttCmsAdvanced/src/Resources/views/storefront/element/cms-element-slider.html.twig line 1

Open in your IDE?
  1. {% block element_image %}
  2.     {% set config = element.config %}
  4.     {% set sliderSettings = config.sliderSettings.value %}
  5.     {% set gutter = sliderSettings.gutter %}
  6.     {% set responsive = sliderSettings.responsive %}
  7.     {% set settingsControls = sliderSettings.controls %}
  8.     {% set autoplay = sliderSettings.autoplay %}
  10.     {% set appearance = config.appearance.value %}
  11.     {% set isAppearanceImage = config.isAppearanceImage.value %}
  12.     {% set isAppearanceTestimonial = config.isAppearanceTestimonial.value %}
  14.     {% set slides = config.slides.value %}
  16.     {% set link = config.link.value %}
  17.     {% set linkTargetBlank = config.linkTargetBlank.value %}
  19.     {% set nav = false %}
  21.     {% set controls = settingsControls.show %}
  22.     {% set controlsPosition = settingsControls.position %}
  23.     {% set controlsPositionOutside = 'outside' === controlsPosition %}
  24.     {% set controlsType = settingsControls.type %}
  25.     {% set controlsIcon = settingsControls.icon %}
  26.     {% set controlsColor = settingsControls.color %}
  27.     {% set controlsColorHover = settingsControls.colorHover %}
  29.     {% set ottCmsSliderOptions = {
  30.         slider: {
  31.             controls,
  32.             nav,
  33.             responsive,
  34.             gutter,
  35.             autoplay,
  36.         }
  37.     } %}
  39.     <style>
  40.         {% if controlsColorHover %}
  41.             .OttCmsSlider__controls [class^="base-slider-controls-"]:hover {
  42.                 color: {{ controlsColorHover }};
  43.             }
  44.         {% endif %}
  45.     </style>
  47.     {% set mediaIds = [] %}
  48.     {% set hasSlideWithImageRoundedBorder = false %}
  50.     {% for slide in slides %}
  51.         {% if slide.imageRoundedBorder %}
  52.             {% set hasSlideWithImageRoundedBorder = true %}
  53.         {% endif %}
  55.         {% if isAppearanceImage %}
  56.             {% if slide.image is not null %}
  57.                 {% set mediaIds = mediaIds|merge([slide.image]) %}
  58.             {% endif %}
  60.             {% if slide.badgeImage is not null %}
  61.                 {% set mediaIds = mediaIds|merge([slide.badgeImage]) %}
  62.             {% endif %}
  63.         {% endif %}
  64.     {% endfor %}
  66.     {% if mediaIds is not empty %}
  67.         {% set mediaCollection = searchMedia(mediaIds, context.context) %}
  68.     {% endif %}
  70.     <div class="OttCmsSlider OttCmsSlider--appearance-{{ appearance }}{% if controlsPositionOutside %} OttCmsSlider__has-controls-outside{% endif %}{% if hasSlideWithImageRoundedBorder %} OttCmsSlider__has-image-rounded-border{% endif %}"
  71.          data-ott-cms-slider="true"
  72.          data-ott-cms-slider-options="{{ ottCmsSliderOptions|json_encode }}"
  73.     >
  74.         {% if '' != config.headline.value %}
  75.             <h1 class="OttCmsSlider__headline">{{ config.headline.value }}</h1>
  76.         {% endif %}
  78.         <div class="OttCmsSlider__container" data-base-slider-container="true">
  79.             {% for slide in slides %}
  80.                 {% sw_include '@Storefront/storefront/ott-cms-slider/slide/' ~ appearance ~ '.html.twig' %}
  81.             {% endfor %}
  82.         </div>
  84.         {% if controls %}
  85.             <div class="OttCmsSlider__controls is-position-{{ controlsPosition }}"
  86.                  data-base-slider-controls="true"
  87.                  {% if '' != controlsColor %}
  88.                      style="color: {{ controlsColor }}"
  89.                 {% endif %}
  90.             >
  91.                 <button class="base-slider-controls-prev">
  92.                     {% if 'arrowHead' == controlsIcon %}
  93.                         {% block ott_cmsadvanced_slider_arrow_head_left %}
  94.                             {% sw_icon 'arrow-head-left' %}
  95.                         {% endblock %}
  96.                     {% elseif 'arrow' == controlsIcon %}
  97.                         {% block ott_cmsadvanced_slider_arrow_left %}
  98.                             {% sw_icon 'arrow-left' %}
  99.                         {% endblock %}
  100.                     {% elseif 'arrow2' == controlsIcon %}
  101.                         {% block ott_cmsadvanced_slider_arrow2_left %}
  102.                             {% sw_icon 'arrow2-left' style {
  103.                                 'namespace': 'OttCmsAdvanced',
  104.                                 'pack': 'ottscho-it',
  105.                             } %}
  106.                         {% endblock %}
  107.                     {% endif %}
  108.                 </button>
  110.                 <button class="base-slider-controls-next">
  111.                     {% if 'arrowHead' == controlsIcon %}
  112.                         {% block ott_cmsadvanced_slider_arrow_head_right %}
  113.                             {% sw_icon 'arrow-head-right' %}
  114.                         {% endblock %}
  115.                     {% elseif 'arrow' == controlsIcon %}
  116.                         {% block ott_cmsadvanced_slider_arrow_right %}
  117.                             {% sw_icon 'arrow-right' %}
  118.                         {% endblock %}
  119.                     {% elseif 'arrow2' == controlsIcon %}
  120.                         {% block ott_cmsadvanced_slider_arrow2_right %}
  121.                             {% sw_icon 'arrow2-right' style {
  122.                                 'namespace': 'OttCmsAdvanced',
  123.                                 'pack': 'ottscho-it',
  124.                             } %}
  125.                         {% endblock %}
  126.                     {% endif %}
  127.                 </button>
  128.             </div>
  129.         {% endif %}
  130.     </div>
  131. {% endblock %}