templates/default/category.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4. <!-- ░░░ Navigation ░░░ -->
  5.   {{include('section/nav.html.twig')}}
  6. <section class="cat-hero position-relative">
  7.     <img src="{{ asset('img/bg/bg-category.png') }}" class="img-fluid w-100" alt="{#{ category.name }#} banner">
  8.     <div class="cat-hero-caption position-absolute start-0 bottom-0 p-4">
  9.         <h1 class="h4 text-white fw-bold mb-1">{#{ category.name }#}</h1>
  10.         <p class="small text-white mb-0">Découvrez notre sélection 2025</p>
  11.     </div>
  12. </section>
  14. {# ░░░ MAIN CONTENT ░░░ #}
  15. <section class="py-5">
  16.     <div class="container">
  17.         <div class="row g-5">
  19.             {# ——— LEFT SIDEBAR ——— #}
  20.             <aside class="col-md-3">
  21.                 <!-- sous-categories -->
  22.                 <h6 class="fw-bold text-uppercase small mb-3">{{ parentCategory.name|default('Équipements et accessoires') }}</h6>
  23.                 <ul class="list-unstyled small mb-5">
  24.                    {% for sub in subcategories %}
  25.                         <li class="mb-1">
  26.                             <a href="{#{ path('app_category_show', { slug: sub.slug }) }}" class="text-decoration-none {{ sub.id==category.id ? 'fw-bold text-acti-blue' }#}">
  27.                                 {{ sub.name }}
  28.                             </a>
  29.                         </li>
  30.                     {% endfor %}
  31.                 </ul>
  33.                 <!-- marques -->
  34.                 <h6 class="fw-bold text-uppercase small mb-3">Les marques</h6>
  35.                 <form method="get" class="brand-filter">
  36.                    {#{% for brand in brands %}
  37.                         <div class="form-check mb-1">
  38.                             <input class="form-check-input" type="checkbox" name="brand[]" value="{{ brand.slug }}" id="b{{ loop.index }}" {{ brand.selected ? 'checked' }}>
  39.                             <label class="form-check-label small" for="b{{ loop.index }}">{{ brand.name }}</label>
  40.                         </div>
  41.                     {% endfor %} #} 
  42.                     <button type="submit" class="btn btn-outline-secondary btn-sm mt-2">Filtrer</button>
  43.                 </form>
  44.             </aside>
  46.             {# ——— RIGHT CONTENT ——— #}
  47.             <div class="col-md-9">
  48.                 <div class="d-flex justify-content-end mb-3">
  49.                     <form method="get" class="ms-auto d-flex align-items-center gap-2">
  50.                         <label class="small mb-0" for="sort">Trier</label>
  51.                         <select name="sort" id="sort" class="form-select form-select-sm" style="max-width:160px;">
  52.                           {# <option value="popularity" {% if sort=='popularity' %}selected{% endif %}>Popularité</option>
  53.                             <option value="price_asc" {% if sort=='price_asc' %}selected{% endif %}>Prix croissant</option>
  54.                             <option value="price_desc" {% if sort=='price_desc' %}selected{% endif %}>Prix décroissant</option>
  55.                             <option value="new" {% if sort=='new' %}selected{% endif %}>Nouveautés</option> #} 
  56.                         </select>
  57.                     </form>
  58.                 </div>
  60.                 <!-- grille produits -->
  61.                 <div class="row row-cols-2 row-cols-md-3 g-4">
  62.                     {% for product in products %}
  63.                         <div class="col">
  64.                             <div class="card h-100 product-card border-0">
  65.                                 <a href="{{ path('produit', { slug: product.slug }) }}" class="ratio ratio-1x1">
  66.                                     <img src="{{ asset(product.image) }}" class="img-fluid object-fit-cover" alt="{{ product.name }}">
  67.                                 </a>
  68.                                 <div class="card-body px-0">
  69.                                     <h6 class="card-title small mb-1 fw-bold text-dark">{{ product.name }}</h6>
  70.                                     <p class="card-text small text-muted mb-1">{{ product.shortDescription }}</p>
  71.                                     <p class="fw-bold mb-0">{{ product.price|number_format(2, ',', ' ') }} €</p>
  72.                                 </div>
  73.                             </div>
  74.                         </div>
  75.                     {% endfor %}
  76.                 </div>
  78.                 {# pagination #}
  79.                 {% if pagination is defined %}
  80.                     <div class="mt-4">
  81.                         {#{ knp_pagination_render(pagination) }#}
  82.                     </div>
  83.                 {% endif %}
  84.             </div>
  85.         </div>
  86.     </div>
  87. </section>
  88. <!-- ░░░ MARQUES ░░░ -->
  89.   {{include('section/marque.html.twig')}}
  90. <!-- ░░░ FOOTER ░░░ -->
  91.   {{include('section/footer.html.twig')}}
  92. {% endblock %}