templates/product/index.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/app.html.twig' %}
  3. {% block PAGE_CSS %}
  4. {% endblock %}
  6. {% block CONTENT_MID %}
  7.     <div x-data="{ showMobileFilter: false }">
  8.         <div x-cloak x-show="showMobileFilter" class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
  10.             <div x-transition:enter="transition-opacity ease-linear duration-300"
  11.                  x-transition:enter-start="opacity-0"
  12.                  x-transition:enter-end="opacity-100"
  13.                  x-transition:leave="transition-opacity ease-linear duration-300"
  14.                  x-transition:leave-start="opacity-100"
  15.                  x-transition:leave-end="opacity-0"
  16.                  class="fixed inset-0 bg-black bg-opacity-25"></div>
  18.             <div class="fixed inset-0 z-40 flex">
  20.                 <div x-transition:enter="transition ease-in-out duration-300 transform"
  21.                      x-transition:enter-start="translate-x-full"
  22.                      x-transition:enter-end="translate-x-0"
  23.                      x-transition:leave="transition ease-in-out duration-300 transform"
  24.                      x-transition:leave-start="translate-x-0"
  25.                      x-transition:leave-end="translate-x-full"
  26.                     class="relative ml-auto flex h-full w-full max-w-xs flex-col overflow-y-auto bg-white py-4 pb-6 shadow-xl">
  27.                     <div class="flex items-center justify-between px-4">
  28.                         <h2 class="text-lg font-medium text-gray-900">Filters</h2>
  29.                         <button @click="showMobileFilter = false" type="button" class="-mr-2 flex h-10 w-10 items-center justify-center p-2 text-gray-400 hover:text-gray-500">
  30.                             <span class="sr-only">Close menu</span>
  31.                             <!-- Heroicon name: outline/x-mark -->
  32.                             <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
  33.                                 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
  34.                             </svg>
  35.                         </button>
  36.                     </div>
  38.                     <!-- Filters -->
  40.                     <form id="mobileFilters" class="mt-4">
  41.                         <div class="space-y-2 px-4">
  42.                             {% if(currentFilter|length > 0) %}
  43.                                 {% for key,filter in currentFilter %}
  44.                                     {% if(filter is not null and filter is not empty) %}
  45.                                         {% if filter is iterable %}
  46.                                             {% for f in filter %}
  47.                                                 <button data-filter="{{ (key ~ f)|replace({' ': ''}) }}" type="button" class="removeMobileFilter w-full inline-flex items-center py-2 px-3 bg-gray-100 hover:bg-brand-50 text-sm font-medium text-gray-600 hover:text-brand-600 border border-transparent hover:border-brand-600 rounded-md space-x-2 cursor-pointer select-none transition ease duration-300 group text-left">
  48.                                                     <span class="flex-shrink-0">
  49.                                                         <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
  50.                                                             <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
  51.                                                         </svg>
  52.                                                     </span>
  53.                                                     <span>
  54.                                                         {{ ('general.filter.' ~ key)|lower|trans }}: {{ (f)|lower|trans }}
  55.                                                     </span>
  56.                                                 </button>
  57.                                             {% endfor %}
  58.                                         {% else %}
  59.                                             <button data-filter="{{ (key ~ filter)|replace({' ': ''}) }}" type="button" class="removeMobileFilter w-full inline-flex items-center py-2 px-3 bg-gray-100 hover:bg-brand-50 text-sm font-medium text-gray-600 hover:text-brand-600 border border-transparent hover:border-brand-600 rounded-md space-x-2 cursor-pointer select-none transition ease duration-300 group text-left">
  60.                                                 <span class="flex-shrink-0">
  61.                                                     <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
  62.                                                         <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
  63.                                                     </svg>
  64.                                                 </span>
  65.                                                 <span>
  66.                                                     {{ ('general.filter.' ~ key)|lower|trans }}: {{ (filter)|lower|trans }}
  67.                                                 </span>
  68.                                             </button>
  69.                                         {% endif %}
  70.                                     {% endif %}
  71.                                 {% endfor %}
  72.                             {% endif %}
  73.                         </div>
  75.                         <div class="mt-4">
  76.                             <div class="divide-y divide-gray-200">
  77.                                 {% if(filterDefinition.filters|length > 0) %}
  78.                                     {% for filter in filterDefinition.filters %}
  79.                                         {% set filterMarkup = filterService.filterFrontend(filter, productListing, currentFilter) %}
  80.                                         {{ filterMarkup | raw  }}
  81.                                     {% endfor %}
  82.                                 {% endif %}
  83.                             </div>
  84.                         </div>
  85.                     </form>
  86.                 </div>
  87.             </div>
  88.         </div>
  90.         <nav aria-label="Breadcrumb" class="pt-4">
  91.             <ol role="list" class="mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8">
  92.                 <li>
  93.                     <div class="flex items-center">
  94.                         <a href="/" class="mr-2 text-sm font-medium text-gray-900">Home</a>
  95.                         <svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="h-5 w-4 text-gray-300">
  96.                             <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
  97.                         </svg>
  98.                     </div>
  99.                 </li>
  101.                 <li class="text-sm">
  102.                     <a href="{{ navStartNode }}" aria-current="page" class="font-medium text-brand-600 hover:text-gray-600">{{ 'Produkte' | trans }}</a>
  103.                 </li>
  104.             </ol>
  105.         </nav>
  107.         <main class="mx-auto max-w-2xl px-4 lg:max-w-7xl lg:px-8">
  108.             <form id="filters">
  109.                 <div class="pt-12 pb-24 lg:grid lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
  110.                     <aside>
  111.                         <div class="flex items-baseline justify-between hidden lg:block">
  112.                             <h3 class="text-2xl mb-4 font-bold tracking-tight text-gray-900">Filter</h3>
  113.                         </div>
  115.                         <div class="space-y-2 hidden lg:block">
  116.                             {% if(currentFilter|length > 0) %}
  117.                                 {% for key,filter in currentFilter %}
  118.                                     {% if(filter is not null and filter is not empty and key not in ["productGroup", "parentCategoryIds", "materialThickness"]) %}
  119.                                         {% if filter is iterable %}
  120.                                             {% for f in filter %}
  121.                                                 <button data-filter="{{ (key ~ f)|replace({' ': ''}) }}" type="button" class="removeFilter w-full inline-flex items-center py-2 px-3 bg-gray-100 hover:bg-brand-50 text-sm font-medium text-gray-600 hover:text-brand-600 border border-transparent hover:border-brand-600 rounded-md space-x-2 cursor-pointer select-none transition ease duration-300 group text-left">
  122.                                                     <span class="flex-shrink-0">
  123.                                                         <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
  124.                                                             <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
  125.                                                         </svg>
  126.                                                     </span>
  127.                                                     <span>
  128.                                                         {{ ('general.filter.' ~ key)|lower|trans }}: {{ (f)|lower|trans }}
  129.                                                     </span>
  130.                                                 </button>
  131.                                             {% endfor %}
  132.                                         {% else %}
  133.                                             <button data-filter="{{ (key ~ filter)|replace({' ': ''}) }}" type="button" class="removeFilter w-full inline-flex items-center py-2 px-3 bg-gray-100 hover:bg-brand-50 text-sm font-medium text-gray-600 hover:text-brand-600 border border-transparent hover:border-brand-600 rounded-md space-x-2 cursor-pointer select-none transition ease duration-300 group text-left">
  134.                                                 <span class="flex-shrink-0">
  135.                                                     <svg class="h-2 w-2" stroke="currentColor" fill="none" viewBox="0 0 8 8">
  136.                                                         <path stroke-linecap="round" stroke-width="1.5" d="M1 1l6 6m0-6L1 7" />
  137.                                                     </svg>
  138.                                                 </span>
  139.                                                 <span>
  140.                                                     {{ ('general.filter.' ~ key)|lower|trans }}: {{ (filter)|lower|trans }}
  141.                                                 </span>
  142.                                             </button>
  143.                                         {% endif %}
  144.                                     {% endif %}
  145.                                 {% endfor %}
  146.                             {% endif %}
  147.                         </div>
  149.                         <div class="mt-4 hidden lg:block">
  150.                             <div class="divide-y divide-gray-200">
  151.                                 {% if(filterDefinition.filters|length > 0) %}
  152.                                     {% for filter in filterDefinition.filters %}
  153.                                         {% set filterMarkup = filterService.filterFrontend(filter, productListing, currentFilter) %}
  154.                                         {{ filterMarkup | raw  }}
  155.                                     {% endfor %}
  156.                                 {% endif %}
  157.                             </div>
  158.                         </div>
  159.                     </aside>
  161.                     <section aria-labelledby="product-heading" class="mt-6 lg:col-span-2 lg:mt-0 xl:col-span-3">
  162.                         <div class="flex justify-between mb-4 items-center">
  163.                             <h3 class="text-2xl font-bold tracking-tight text-gray-900">{{ 'Produkte' | trans }}</h3>
  164.                             <div class="flex items-center">
  165.                                 <button @click="showMobileFilter = true" type="button" class="mr-4 p-2 text-gray-400 hover:text-gray-500 sm:ml-6 lg:hidden">
  166.                                     <span class="sr-only">Filters</span>
  167.                                     <svg class="h-5 w-5" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
  168.                                         <path fill-rule="evenodd" d="M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z" clip-rule="evenodd" />
  169.                                     </svg>
  170.                                 </button>
  171.                                 <div class="relative inline-block text-left" x-data="{ isOpen: false }">
  172.                                     <div>
  173.                                         <button type="button" x-on:click="isOpen = ! isOpen" class="inline-flex w-full justify-center py-2 px-3 bg-gray-100 text-sm font-semibold text-gray-900 space-x-1.5 rounded-md focus:outline-none" id="menu-button" aria-expanded="true" aria-haspopup="true">
  174.                                             <span>{{ 'Sortieren nach' | trans }}</span>
  175.                                             <svg class="-mr-1 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
  176.                                                 <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
  177.                                             </svg>
  178.                                         </button>
  179.                                     </div>
  181.                                     <!--
  182.                                       Dropdown menu, show/hide based on menu state.
  184.                                       Entering: "transition ease-out duration-100"
  185.                                         From: "transform opacity-0 scale-95"
  186.                                         To: "transform opacity-100 scale-100"
  187.                                       Leaving: "transition ease-in duration-75"
  188.                                         From: "transform opacity-100 scale-100"
  189.                                         To: "transform opacity-0 scale-95"
  190.                                     -->
  191.                                     <div
  192.                                         x-cloak x-show="isOpen"
  193.                                         @click.outside="isOpen = false"
  194.                                         x-transition:enter="transition ease-out duration-100"
  195.                                         x-transition:enter-start="transform opacity-0 scale-95"
  196.                                         x-transition:enter-end="transform opacity-0 scale-100"
  197.                                         x-transition:leave="transition ease-in duration-75"
  198.                                         x-transition:leave-start="transform opacity-100 scale-100"
  199.                                         x-transition:leave-end="transform opacity-0 scale-95"
  200.                                         class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-gray-50 shadow-lg focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
  201.                                         <div class="py-1" role="none">
  202.                                             <!--<button name="sort" value="name-asc" class="w-full block py-2 px-4 hover:bg-gray-100 text-sm text-gray-700 hover:text-gray-900 text-left" role="menuitem" tabindex="-1" id="menu-item-0">{{ 'Artikelname' | trans }}</button>-->
  203.                                             <button name="sort" value="code-asc" class="w-full block py-2 px-4 hover:bg-gray-100 text-sm text-gray-700 hover:text-gray-900 text-left" role="menuitem" tabindex="-1" id="menu-item-1">{{ 'Produktcode (aufsteigend)' | trans }}</button>
  204.                                             <button name="sort" value="code-desc" class="w-full block py-2 px-4 hover:bg-gray-100 text-sm text-gray-700 hover:text-gray-900 text-left" role="menuitem" tabindex="-1" id="menu-item-1">{{ 'Produktcode (absteigend)' | trans }}</button>
  205.                                             <button name="sort" value="materialThickness-asc" class="w-full block py-2 px-4 hover:bg-gray-100 text-sm text-gray-700 hover:text-gray-900 text-left" role="menuitem" tabindex="-1" id="menu-item-1">{{ 'Materialstärke (aufsteigend)' | trans }}</button>
  206.                                             <button name="sort" value="materialThickness-desc" class="w-full block py-2 px-4 hover:bg-gray-100 text-sm text-gray-700 hover:text-gray-900 text-left" role="menuitem" tabindex="-1" id="menu-item-1">{{ 'Materialstärke (absteigend)' | trans }}</button>
  207.                                         </div>
  208.                                     </div>
  209.                                 </div>
  210.                             </div>
  211.                         </div>
  213.                         <div class="grid grid-cols-1 gap-y-4 sm:grid-cols-3 sm:gap-x-6 sm:gap-y-10 lg:gap-x-8 xl:grid-cols-4">
  214.                             {%  for item in results %}
  215.                                 {% include 'product/product_teaser.html.twig' with {'product': item} %}
  216.                             {% else %}
  217.                                 <div class="p-4 my-4 text-sm text-brand-600 rounded-lg bg-brand-50 col-span-4" role="alert">
  218.                                     {{ 'Leider wurden keine Ergebnisse gefunden' }}
  219.                                 </div>
  220.                             {% endfor %}
  221.                         </div>
  222.                         <div class="mt-10">
  223.                             {% include '_partials/pagination.html.twig' %}
  224.                         </div>
  225.                     </section>
  226.                 </div>
  227.             </form>
  228.         </main>
  229.     </div>
  230. {% endblock %}
  232. {% block PAGE_JS %}
  233. {% endblock %}