templates/app/product/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2.  
  3. {% block title %}Tous les produits{% endblock %}
  5. {% block body %}
  6.     <div class="container mt-2">
  7.         <div class="row">
  8.             <div class="col-12 header-title">
  9.                 <h1>Nos produits</h1>
  10.             </div>
  11.         </div>
  12.         <div class="row">
  13.             <div class="col-12">
  14.                 {% for label, messages in app.flashes %}
  15.                     {% for message in messages %}
  16.                         <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
  17.                             <strong>{{ message }}</strong>
  18.                             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  19.                         </div>
  20.                     {% endfor %}
  21.                 {% endfor %}
  22.             </div>
  23.         </div>
  24.         {% if products is defined and products is not empty %}
  25.             <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  26.                 {% for product in products %}
  27.                     <div class="col">
  28.                         <div class="card card-product h-100">
  29.                             <div class="row g-0 h-100">
  30.                                 <div class="col-md-6 p-0">
  31.                                     {% if product.picture is not empty and fileExists(product.picture) %}
  32.                                         <img src="{{ asset('uploads/images/' ~ product.picture) }}"
  33.                                              alt="{{ product.title }}"
  34.                                              class="w-100 h-100 object-fit-cover" style="border-radius: 2%;"/>
  35.                                     {% else %}
  36.                                         <img src="{{ asset('images/logo.svg') }}" alt="Default image"
  37.                                              class="w-100 h-100 object-fit-cover" style="border-radius: 2%;">
  38.                                     {% endif %}
  39.                                 </div>
  40.                                 <div class="col-md-6 d-flex flex-column">
  41.                                     <div class="card-body d-flex flex-column h-100">
  42.                                         <h5 class="card-title">{{ product.title }}</h5>
  43.                                         <p class="card-text small flex-grow-1">{{ product.description|u.truncate(80, '...') }}</p>
  44.                                         <div class="mt-auto">
  45.                                             <p class="card-text fw-bold mb-2">{{ product.price|format_currency('EUR') }}</p>
  46.                                             <div class="mb-2">
  47.                                                 {% if product.isCustomizable %}
  48.                                                     <span class="badge bg-success">Personnalisable</span>
  49.                                                 {% else %}
  50.                                                     <span class="badge bg-secondary">Non personnalisable</span>
  51.                                                 {% endif %}
  52.                                             </div>
  53.                                             {% if product.isCustomizable %}
  54.                                                 <button type="button" class="btn btn-sm btn-green w-100"
  55.                                                         data-bs-toggle="modal"
  56.                                                         data-bs-target="#customModal-{{ product.id }}">
  57.                                                     Ajouter au panier
  58.                                                 </button>
  59.                                             {% else %}
  60.                                                 <a href="{{ path('product_add_cart', {'id': product.id }) }}"
  61.                                                    class="btn btn-sm btn-green w-100">Ajouter au panier</a>
  62.                                             {% endif %}
  63.                                         </div>
  64.                                     </div>
  65.                                 </div>
  66.                             </div>
  67.                         </div>
  68.                     </div>
  70.                     {% if product.isCustomizable %}
  71.                         <div class="modal fade" id="customModal-{{ product.id }}" tabindex="-1"
  72.                              aria-labelledby="customModalLabel-{{ product.id }}"
  73.                              aria-hidden="true">
  74.                             <div class="modal-dialog">
  75.                                 <div class="modal-content">
  76.                                     <div class="modal-header">
  77.                                         <h5 class="modal-title" id="customModalLabel-{{ product.id }}">Personnalisation
  78.                                             de votre achat</h5>
  79.                                         <button type="button" class="btn-close" data-bs-dismiss="modal"
  80.                                                 aria-label="Close"></button>
  81.                                     </div>
  82.                                     <form action="{{ path('product_add_cart', {'id': product.id}) }}" method="POST">
  83.                                         <div class="modal-body">
  84.                                             <div class="mb-3">
  85.                                                 <label for="customization-{{ product.id }}" class="form-label">Personnalisation
  86.                                                     :</label>
  87.                                                 <input type="text" class="form-control" name="customization"
  88.                                                        id="customization-{{ product.id }}">
  89.                                             </div>
  90.                                         </div>
  91.                                         <div class="modal-footer">
  92.                                             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
  93.                                                 Annuler
  94.                                             </button>
  95.                                             <button type="submit" class="btn btn-design">Ajouter au panier</button>
  96.                                         </div>
  97.                                     </form>
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  101.                     {% endif %}
  102.                 {% endfor %}
  103.             </div>
  104.         {% else %}
  105.             <div class="row">
  106.                 <div class="col-12 text-center">
  107.                     <span>Il n'y a pas de produits pour le moment.</span>
  108.                 </div>
  109.             </div>
  110.         {% endif %}
  111.         <div class="navigation my-2">
  112.             {{ knp_pagination_render(products) }}
  113.         </div>
  114.     </div>
  115. {% endblock %}