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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-product-slider.html.twig' %}
  3. {% block element_product_slider %}
  4.     {% set currentSalesChannel = context.salesChannel.id %}
  5.     {% set pickedSaleschannel =  element.config.salesChannel.value %}
  6.     {% set shouldDisplayEl = pickedSaleschannel is same as(currentSalesChannel) or pickedSaleschannel is same as('') %}
  8.     {% if shouldDisplayEl %}
  9.         {% if not sliderConfig %}
  10.             {% set sliderConfig = element.fieldConfig.elements %}
  11.         {% endif %}
  12.         <div class="cms-element-{{ element.type }}{% if sliderConfig.displayMode.value == "standard" and sliderConfig.verticalAlign.value %} has-vertical-alignment{% endif %}">
  13.             {% block element_product_slider_alignment %}
  14.                 {% if config.verticalAlign.value %}
  15.                     <div class="cms-element-alignment{% if sliderConfig.verticalAlign.value == "center" %} align-self-center{% elseif sliderConfig.verticalAlign.value == "flex-end" %} align-self-end{% else %} align-self-start{% endif %}">
  16.                 {% endif %}
  18.                 {% set productSliderOptions = {
  19.                     productboxMinWidth: sliderConfig.elMinWidth.value ? sliderConfig.elMinWidth.value : '',
  20.                     slider: {
  21.                         gutter: 30,
  22.                         autoplayButtonOutput: false,
  23.                         nav: false,
  24.                         mouseDrag: false,
  25.                         controls: sliderConfig.navigation.value ? true : false,
  26.                         autoplay: sliderConfig.rotate.value ? true : false
  27.                     }
  28.                 } %}
  30.                 {% if not sliderConfig.navigation.value %}
  31.                     {% set productSliderOptions = productSliderOptions|replace_recursive({
  32.                         slider: {
  33.                             mouseDrag: true
  34.                         }
  35.                     }) %}
  36.                 {% endif %}
  38.                 {% block element_product_slider_slider %}
  39.                     {% if sliderConfig.navigation.value %}
  40.                         {% set productSliderOptions = {
  41.                             productboxMinWidth:'300',
  42.                             slider: {
  43.                                 gutter: 20,
  44.                                 nav: false,
  45.                                 mouseDrag: true,
  46.                                 autoplay: false,
  47.                                 prevButton:".slider-controls-prev-button-#{element.id}",
  48.                                 nextButton:".slider-controls-next-button-#{element.id}",
  49.                                 controls: true,
  50.                             }
  51.                         } %}
  52.                     {% else %}
  53.                         {% set productSliderOptions = {
  54.                             productboxMinWidth:'300',
  55.                             slider: {
  56.                                 gutter: 20,
  57.                                 nav: false,
  58.                                 mouseDrag: true,
  59.                                 autoplay: false,
  60.                                 controls:false,
  61.                             }
  62.                         } %}
  63.                     {% endif %}
  64.                     <div class="base-slider product-slider{% if sliderConfig.border.value %} has-border{% endif %}{% if sliderConfig.navigation.value %} has-nav{% endif %}"
  65.                          data-product-slider="true"
  66.                          data-product-slider-options="{{ productSliderOptions|json_encode }}">
  68.                         {% block element_product_slider_title %}
  69.                             {% if sliderConfig.title.value %}
  70.                                 <div class="cms-element-title">
  71.                                     <p class="cms-element-title-paragraph">{{ sliderConfig.title.value }}</p>
  72.                                 </div>
  73.                             {% endif %}
  74.                         {% endblock %}
  76.                         {% block element_product_slider_inner %}
  77.                             {% block element_product_slider_element %}
  78.                                 <div class="product-slider-container"
  79.                                      data-product-slider-container="true">
  80.                                     {% for product in element.data.products.elements %}
  81.                                         {% block element_product_slider_inner_item %}
  82.                                             <div class="product-slider-item">
  83.                                                 {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with {
  84.                                                     'layout': sliderConfig.boxLayout.value,
  85.                                                     'displayMode': sliderConfig.displayMode.value
  86.                                                 } %}
  87.                                             </div>
  88.                                         {% endblock %}
  89.                                     {% endfor %}
  90.                                 </div>
  91.                             {% endblock %}
  93.                             {% block element_product_slider_controls %}
  94.                                 {% if sliderConfig.navigation.value %}
  95.                                     {% set productSliderOptions = productSliderOptions|replace_recursive({
  96.                                         slider: {
  99.                                         }
  100.                                     }) %}
  101.                                     <div class="slider-controls-wrapper d-flex align-items-center justify-content-between">
  102.                                         <div class="slider-controls slider-controls-{{ element.id }} w-100">
  103.                                             <div class="d-flex align-items-center justify-content-center">
  104.                 <span class="slider-controls-button slider-controls-prev-button-{{ element.id }}">
  105.      {% sw_icon 'arrow_left'  style {
  106.          'namespace': 'Tuerschild_2',
  107.      } %}                  </span>
  108.                                                 <span class="slider-controls-button slider-controls-next-button-{{ element.id }} arrow-right-rotate">
  109.      {% sw_icon 'arrow_left'  style {
  110.          'namespace': 'Tuerschild_2',
  111.      } %}                   </span>
  112.                                             </div>
  113.                                             <a href="{{ "slider.allProducts"|trans }}" class="slider-controls-link">Alle
  114.                                                 Produkte</a>
  115.                                         </div>
  116.                                     </div>
  117.                                 {% endif %}
  118.                             {% endblock %}
  119.                         {% endblock %}
  120.                     </div>
  121.                 {% endblock %}
  122.                 {% if config.verticalAlign.value %}
  123.                     </div>
  124.                 {% endif %}
  125.             {% endblock %}
  126.         </div>
  127.     {% endif %}
  128. {% endblock %}