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

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/element/cms-element-manufacturer-overview.html.twig' %}
  3. {% block element_manufacturer_overview_upper_nav %}
  4.     <section class="brand-listing-navigation overflow-x-auto">
  5.         <ul class="brand-listing-nav-list flex divide-grey-400 justify-center w-max lg:w-full">
  6.             {% for key, value in manufacturers %}
  7.             <li class="brand-listing-nav-item nav-item_{{ key }}">
  8.                 <a href="#brand_{{ key }}"
  9.                    class="brand-listing-nav-trigger flex items-center justify-center uppercase text-base text-display text-grey-600 transition hover:text-grey-200 p-3"
  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" id="brand-listing-container">
  19.                 {% if manufacturers|length > 0 %}
  20.                 <span id="brand-listing-count" class="hidden">{{ manufacturers|length }}</span>
  21.                 <ul class="max-w-[1710px] w-full pl-6 lg:pb-10 mx-auto columns-1 sm:columns-2 md:columns-3 grid-gap-10 pb-5 lg:py-5">
  22.                         {% for index, merken in manufacturers %}
  23.                             {# {% for index, merken in alphabet %} #}
  24.                             {% if merken %}
  25.                                 <li class="brand-listing-collection items-start grid-gap-6 mb-6 break-inside-avoid lg:grid-gap-4 md:mr-8">
  26.                                     <div class="relative h-full flex">
  27.                                         <div class="flex justify-center items-center w-6 h-6 scroll-mt-4 text-black absolute -left-[34px] top-[10px] text-2xl font-display"
  28.                                              id="brand_{{ index }}">
  29.                                             {{ index }}
  30.                                         </div>
  31.                                         <span class="w-full h-[1px] bg-grey-200 my-6"></span>
  32.                                     </div>
  33.                                     <ul class="brand-list grid">
  34.                                         {% if merken %}
  35.                                             {% for index, brand in merken %}
  36.                                                 <li class="brand-listing-item py-2" data-id="{{ brand.id }}">
  37.                                                     <a {% if brand.url %} href="{{ brand.url }}" {% endif %}
  38.                                                             class="inline-block text-sm font-bold font-accent uppercase tracking-wider text-black{% if brand.url %} btn-underline{% endif %}"
  39.                                                             title="{{ brand.name }}">
  40.                                                         {{ brand.name }}
  41.                                                     </a>
  42.                                                 </li>
  43.                                             {% endfor %}
  44.                                         {% else %}
  45.                                             <li class="no-brands-found text-sm py-2">
  46.                                                 {{ "pages.brands.notFound"|trans|sw_sanitize }}
  47.                                             </li>
  48.                                         {% endif %}
  49.                                     </ul>
  50.                                 </li>
  51.                             {% endif %}
  52.                         {% endfor %}
  53.                 </ul>
  54.             {% else %}
  55.                 <span id="brand-listing-count" class="hidden">0</span>
  56.                 <div class="text-lg text-center mx-auto my-20">{{ "pages.brands.notFound"|trans|sw_sanitize }}</div>
  57.             {% endif %}
  58.     </section>
  59. {% endblock %}