templates/front/boutique/produit/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Produis{% endblock %}
  5. {% block main %}
  7.     {# {% for produit in produits %}
  8.         {% if produit.visible %}
  9.             <div>
  10.                 <a href="{{ path('app_front_produit_detail', { 'name': produit.name }) }}">
  11.                     {{ produit.title }}
  12.                     {{ produit.accroche }}
  13.                     <img class="b-imgtxt__img" src="{{ asset('uploads/medias/' ~ produit.media.path)| imagine_filter('bloc_text_image') }}" alt="">
  14.                     {{ produit.prixHtDivise }}
  15.                     {{ produit.produitEtat }}
  16.                 </a>
  17.             </div>
  18.         {% endif %}
  19.     {% endfor %} #}
  21.     <main class="container">
  22.         <div class="row py-4">
  24.             <aside class="col-3">
  25.                 <div class="card p-2">
  26.                     <label class="h3">Filtres</label>
  27.                     <select class="form-select mb-2" aria-label="Default select example">
  28.                         <option selected>Etat</option>
  29.                         <option value="1">One</option>
  30.                         <option value="2">Two</option>
  31.                         <option value="3">Three</option>
  32.                     </select>
  33.                     <select class="form-select mb-2" aria-label="Default select example">
  34.                         <option selected>Type de produit</option>
  35.                         <option value="1">One</option>
  36.                         <option value="2">Two</option>
  37.                         <option value="3">Three</option>
  38.                     </select>
  40.                     <label class="h3 mt-4">Filtres relatif</label>
  42.                     <div class="mb-2">
  43.                         <div class="form-check">
  44.                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  45.                             <label class="form-check-label" for="flexRadioDefault1">
  46.                                 Filaire
  47.                             </label>
  48.                         </div>
  49.                         <div class="form-check">
  50.                             <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2"
  51.                                 checked>
  52.                             <label class="form-check-label" for="flexRadioDefault2">
  53.                                 Sans fil
  54.                             </label>
  55.                         </div>
  56.                     </div>
  58.                     <div class="mb-2">
  59.                         <div class="form-check form-switch">
  60.                             <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
  61.                             <label class="form-check-label" for="flexSwitchCheckDefault">Rétroéclairage</label>
  62.                         </div>
  63.                         
  64.                     </div>
  66.                     <select class="form-select mb-2" aria-label="Default select example">
  67.                         <option selected>Marque</option>
  68.                         <option value="1">One</option>
  69.                         <option value="2">Two</option>
  70.                         <option value="3">Three</option>
  71.                     </select>
  72.                     <select class="form-select mb-2" aria-label="Default select example">
  73.                         <option selected>Type de touches</option>
  74.                         <option value="1">One</option>
  75.                         <option value="2">Two</option>
  76.                         <option value="3">Three</option>
  77.                     </select>
  79.                     <a href="#" class="btn btn-primary"><span class="fas fa-filter"></span> Filtrer</a>
  80.                 </div>
  81.             </aside>
  83.             <section class="col-9">
  84.                 <div class="d-flex">
  86.                     <h1 class="fs-4">289 produits pour «clavier»</h1>
  88.                     <div class="ms-auto me-4">
  89.                         <select class="form-select" aria-label="Default select example">
  90.                             <option selected>Trier par</option>
  91.                             <option value="1">One</option>
  92.                             <option value="2">Two</option>
  93.                             <option value="3">Three</option>
  94.                         </select>
  95.                     </div>
  97.                     <ul class="pagination">
  98.                         <li class="page-item active" aria-current="page">
  99.                             <span class="page-link">1</span>
  100.                         </li>
  101.                         <li class="page-item"><a class="page-link" href="#">2</a></li>
  102.                         <li class="page-item"><a class="page-link" href="#">3</a></li>
  103.                     </ul>
  105.                 </div>
  107.                 <div class="row">
  108.                             
  109.                     {% for produit in produits %}
  110.                         {% if produit.visible %}
  111.                             <div class="col-4 mb-4">
  112.                                 <a class="text-decoration-none text-black" href="{{ path('app_front_produit_detail', { 'name': produit.name }) }}">
  113.                                     <div class="card h-100">
  114.                                         <img class="card-img-top" alt="…" src="{{ asset('uploads/medias/' ~ produit.media)| imagine_filter('img_listing_produit') }}">
  115.                                         <div class="card-body h-100">
  116.                                             <h5 class="card-title">{{ produit.title }}</h5>
  117.                                             <p class="card-text">{{ produit.accroche }}</p>
  118.                                         </div>
  119.                                         <div class="d-flex justify-content-between align-items-center card-footer">
  120.                                             <p class="btn btn-primary">{{ produit.prixHtDivise }} €</p><span class="badge bg-secondary">{{ produit.produitEtat }}</span>
  121.                                         </div>
  122.                                     </div>
  123.                                 </a>
  124.                             </div>
  125.                         {% endif %}
  126.                     {% endfor %}
  128.                 </div>
  129.                 <div class="d-flex">
  130.                     <ul class="pagination ms-auto">
  131.                         <li class="page-item active" aria-current="page">
  132.                             <span class="page-link">1</span>
  133.                         </li>
  134.                         <li class="page-item"><a class="page-link" href="#">2</a></li>
  135.                         <li class="page-item"><a class="page-link" href="#">3</a></li>
  136.                     </ul>
  137.                 </div>
  138.             </section>
  139.         </div>
  140.     </main>
  142. {% endblock %}