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

Open in your IDE?
  1. {% block element_mst_manufacturer_slider %}
  3. <div class="cms-element-mst-manufacturer-slider">
  4.    
  5.     {# ERROR MESSAGES #}
  6.     {% if element.getExtension('slider-data').all()|length == 0 %}
  7.         <div role="alert" class="alert alert-info alert-has-icon">
  8.             <span class="icon icon-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  9.   <path fill="#758CA3" fill-rule="evenodd" d="M12,7 C12.5522847,7 13,7.44771525 13,8 C13,8.55228475 12.5522847,9 12,9 C11.4477153,9 11,8.55228475 11,8 C11,7.44771525 11.4477153,7 12,7 Z M13,16 C13,16.5522847 12.5522847,17 12,17 C11.4477153,17 11,16.5522847 11,16 L11,11 C11,10.4477153 11.4477153,10 12,10 C12.5522847,10 13,10.4477153 13,11 L13,16 Z M24,12 C24,18.627417 18.627417,24 12,24 C5.372583,24 6.14069502e-15,18.627417 5.32907052e-15,12 C-8.11624501e-16,5.372583 5.372583,4.77015075e-15 12,3.55271368e-15 C18.627417,5.58919772e-16 24,5.372583 24,12 Z M12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 Z"></path>
  10. </svg></span>
  11.             <div class="alert-content-container">
  12.             <div class="alert-content">
  13.                 <h3>MSTManufacturerSlider</h3>
  14.                 No manufacturers found<br>
  15.                 <h2>Please check the following:</h2>
  16.                 - are there logos assigned to them?<br>
  17.                 - are there products assigned to them?<br>
  18.                 - are there sold items for the manufacturers yet?<br>
  19.                 - try another ordering type for your manufacturers<br>
  20.                 - different language? Open the shopping experience element and configure it for this language!
  21.             </div>
  22.             </div>
  23.         </div>
  24.     {% endif %}
  26.     {# SLIDER TITLE #}
  27.     {% block element_mst_manufacturer_slider_title %}    
  28.         {% if element.config.title.value %}
  29.             <div class="cms-element-title">
  30.                 <p class="cms-element-title-paragraph"><h2>{{ element.config.title.value }}</h2></p>
  31.             </div>
  32.         {% endif %}
  33.     {% endblock %}
  35.     {% block element_mst_manufacturer_slider_inner %}
  36.    
  37.         <div class="mst-manufacturer-slider-wrapper" id="mst-manufacturer-slider-wrapper-{{ element.id }}" style="display: none;">
  38.             
  39.             {# SLIDER ARROWS #}
  40.             {% if element.config.showSliderArrows.value %}
  41.             <style>
  42.                 #mst-manufacturer-slider-{{ element.id }}-iw {
  43.                     margin: 0 {{ element.config.arrowsMargin.value }}px 0 {{ element.config.arrowsMargin.value }}px;
  44.                     overflow: hidden;
  45.                 }
  46.                 #mst-manufacturer-slider-controls-{{ element.id }} li { 
  47.                     color: {{ element.config.arrowsFgColor.value ? element.config.arrowsFgColor.value : '#666' }};
  48.                     {% if element.config.arrowsBgColor.value %}
  49.                         background-color: {{ element.config.arrowsBgColor.value }}
  50.                     {% endif %}
  51.                 }
  53.                 {% if element.config.arrowsHoColor.value %}
  54.                 #mst-manufacturer-slider-controls-{{ element.id }} li:hover {
  55.                    background-color: {{ element.config.arrowsHoColor.value }};
  56.                 }
  57.                 {% endif %}
  58.             </style>
  60.             <ul id="mst-manufacturer-slider-controls-{{ element.id }}" class="controls">
  61.                  {% set sliderArrows = element.config.arrowDesign.value|split(';') %}
  62.                 <li class="prev"><i class="mss-icon-{{ sliderArrows[0] }}"></i></li>
  63.                 <li class="next"><i class="mss-icon-{{ sliderArrows[1] }}"></i></li>           
  64.             </ul>
  65.             {% endif %}
  67.             {# NAVIGATION DOT COLORS #}
  68.             {% if element.config.showSliderDots.value %}
  69.             <style>
  70.                 {% if element.config.dotsInactiveColor.value %}
  71.                 #mst-manufacturer-slider-{{ element.id }}-ow .tns-nav button {
  72.                     background-color: {{ element.config.dotsInactiveColor.value }};
  73.                 }
  74.                 {% endif %}
  75.                 {% if element.config.dotsActiveColor.value %}
  76.                 #mst-manufacturer-slider-{{element.id}}-ow .tns-nav button.tns-nav-active {
  77.                     background-color: {{ element.config.dotsActiveColor.value }};
  78.                 }
  79.                 {% endif %}
  80.             </style>
  81.             {% endif %}
  83.             {# SLIDER #} 
  84.             <div class="mst-manufacturer-slider-{{ element.id }} mst-manufacturer-slider tns-transition-linear" 
  85.                 id="mst-manufacturer-slider-{{ element.id }}" 
  86.                 data-mst-manufacturer-slider-element
  87.                 data-element-id="{{ element.id }}"
  88.                 data-config="{{ element.config|json_encode }}"
  89.                 >
  91.             {% for el in element.getExtension('slider-data').all() %}
  92.                 
  93.                 {# link to manufacturer's link or to search page #}
  94.                 {% if element.config.linkToManufacturerLink.value == true %}
  95.                     {% set url = el.get('link') %}
  96.                 {% else %}
  97.                     {% set url = absolute_url(path('frontend.home.page')) ~ 'search?manufacturer=' ~ el.getId() ~ '&p=1&search=' ~ el.get('name')|url_encode %}
  98.                 {% endif %}
  100.                 <div class="item">
  101.                     <div class="mss-logo-container img-{{ loop.index }}">
  102.                         <a href="{{ url }}">
  103.                         {% if el.getMedia.getUrl is not empty %}
  104.                         <div class="mss-logo-centered {% if element.config.logosInGray.value == true %}mss-logo-in-gray{% endif %}" style="
  105.                             background-image: url('{{ el.getMedia.getUrl }}');
  106.                             height: {{ element.config.sliderLogoHeight.value }}px;
  107.                             ">
  108.                         </div>
  109.                         {% else %}
  110.                             <div class="mss-text-centered mss-no-logo-wrapper" style="height: {{ element.config.sliderLogoHeight.value }}px;">
  111.                                 <span class="mss-no-logo" >{{ el.getName() }}</span>
  112.                             </div>
  113.                         {% endif %}
  114.                         </a>
  115.                     </div>
  116.                 </div>
  117.             {% endfor %}
  118.             </div>
  119.      
  120.         </div>
  122.     {% endblock %}
  123. </div>
  125. {% endblock %}