templates/page/category/list.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block page_title %}
  4.     {{ 'storefront.title'|resolve|striptags }} | Kategorien
  5. {% endblock %}
  7. {% block head_custom_stylesheets %}
  8.     {{ encore_entry_link_tags('hero-header') }}
  9.     {{ encore_entry_link_tags('category') }}
  10. {% endblock head_custom_stylesheets %}
  12. {% block content %}
  13.     <div class="container-3xl my-5 mt-sm-6 mb-sm-4">
  14.         <div class="row">
  15.             <div class="col-12">
  16.                 <h1 class="ornament-with-child">{{ 'category.page.headline'|resolve }}</h1>
  17.                 {{ 'category.page.description'|resolve }}
  18.             </div>
  19.         </div>
  20.     </div>
  22.     <div class="container-3xl mb-6">
  23.         {% for category_batch in tenant.categories|batch(4) %}
  24.             <div class="row nth-group">
  25.                 {% for category in category_batch %}
  26.                     <div class="col-12 col-md-6 nth-group-item">
  27.                         <div class="mb-4 nth-group-item-background position-relative d-flex flex-column justify-content-between overflow-hidden p-5 min-h-24">
  28.                             {% if category.listImage %}
  29.                                 <img class="d-none d-md-block position-absolute end--2 product-image" src="/images/{{ category.listImage }}" alt="{{ category.name }}" class="img-fluid">
  30.                             {% else %}
  31.                                 <img width="64" class="d-none d-md-block position-absolute opacity-25 end--2 product-image" src="{{ asset('build/images/icons/box.svg') }}" alt="{{ category.name }}" class="img-fluid">
  32.                             {% endif %}
  33.                             <div class="row">
  34.                                 <div class="col-12 col-sm-8">
  35.                                     <h4 class="mb-4">{{ category.name }}</h4>
  36.                                     <p class="text-break line-clamp clamp-4">{{ category.description }}</p>
  37.                                     {% if category.listImage %}
  38.                                         <img class="d-md-none mx-auto w-75 mb-4 mb-sm-0" src="/images/{{ category.listImage }}" alt="{{ category.name }}" class="img-fluid">
  39.                                     {% else %}
  40.                                         <img width="64" class="d-md-none mx-auto w-75 mb-4 mb-sm-0 opacity-25" src="{{ asset('build/images/icons/box.svg') }}" alt="{{ category.name }}" class="img-fluid">
  41.                                     {% endif %}
  42.                                 </div>
  43.                             </div>
  44.                             <a href="{{ path('products', {categoryId: category.id}) }}" class="d-flex justify-content-end align-items-center text-decoration-none fw-bold"><span class="me-2">Zur Produktübersicht</span><i class="fas fa-arrow-right"></i></a>
  45.                         </div>
  46.                     </div>
  47.                 {% endfor %}
  48.             </div>
  49.         {% endfor %}
  50.     </div>
  51. {% endblock %}