custom/static-plugins/NdFashion/src/Resources/views/storefront/element/cms-element-manufacturer-overview.html.twig line 1

Open in your IDE?
  1. {% block element_manufacturer_overview %}
  2.     {% set manufacturers = element.data.get('manufacturersSorted') %}
  3.     {% block element_manufacturer_overview_upper_nav %}
  4.         <section class="brand-listing-navigation lg:hidden">
  5.             <ul class="brand-listing-nav-list flex overflow-x-auto divide-x divide-grey-400">
  6.                 {% for key, value in manufacturers %}
  7.                     <li class="brand-listing-nav-item nav-item_{{ key }} flex border-y border-y-grey-400 first:border-l first:border-l-grey-400 last:!border-r last:border-r-grey-400 first:ml-box last:mr-box">
  8.                         <a href="#brand_{{ key }}"
  9.                            class="brand-listing-nav-trigger flex items-center justify-center uppercase font-medium text-black w-12 h-12 transition hover:bg-blue-500 hover:text-white"
  10.                            id="trigger_{{ key }}">{{ key }}</a>
  11.                     </li>
  12.                 {% endfor %}
  13.             </ul>
  14.         </section>
  15.     {% endblock %}
  17.     {% block element_manufacturer_overview_main_container %}
  18.         <section data-element="{{ element.type }}" class="boxed-layout section-p-y">
  19.             <ul class="max-w-[1710px] w-full lg:px-10 mx-auto columns-1 sm:columns-2 md:columns-3 lg:columns-4 grid-gap-10 pb-5 lg:py-5">
  20.                 {% for index, merken in manufacturers %}
  21.                     {# {% for index, merken in alphabet %} #}
  22.                     {% if merken %}
  23.                         <li class="grid grid-cols-[max-content_1fr] items-start grid-gap-6 mb-6 break-inside-avoid lg:grid-gap-4">
  24.                             <div class="w-8 relative h-full">
  25.                                 <div class="flex justify-center items-center w-8 h-8 bg-grey-200 font-medium scroll-mt-4 text-black"
  26.                                      id="brand_{{ index }}">
  27.                                     {{ index }}
  28.                                 </div>
  29.                                 <span class="w-[2px] h-[calc(100%_-_32px)] bg-grey-200 inline-block absolute top-8 left-1/2 transform -translate-x-1/2"></span>
  30.                             </div>
  31.                             <ul class="brand-list grid grid-gap-y-6">
  32.                                 {% if merken %}
  33.                                     {% for index, brand in merken %}
  34.                                         <li class="brand-listing-item first:pt-2" data-id="{{ brand.id }}">
  35.                                             <a {% if brand.url %} href="{{ brand.url }}" {% endif %}
  36.                                                     class="inline-block text-base font-light leading-none text-black{% if brand.url %} btn-underline{% endif %}"
  37.                                                     title="{{ brand.name }}">
  38.                                                 {{ brand.name }}
  39.                                             </a>
  40.                                         </li>
  41.                                     {% endfor %}
  42.                                 {% else %}
  43.                                     <li class="no-brands-found text-sm py-2">
  44.                                         {{ "pages.brands.notFound"|trans|sw_sanitize }}
  45.                                     </li>
  46.                                 {% endif %}
  47.                             </ul>
  48.                         </li>
  49.                     {% endif %}
  50.                 {% endfor %}
  51.             </ul>
  52.         </section>
  53.     {% endblock %}
  54. {% endblock %}