templates/product/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Nos produits{% endblock %}
  5. {% block body %}
  6. <!-- Navbar Start -->
  7.     <div class="container-fluid position-relative p-0">
  8.        <div class="container-fluid bg-primary py-5 bg-header" style="margin-bottom: 90px;">
  9.             <div class="row py-5">
  10.                 <div class="col-12 pt-lg-5 mt-lg-5 text-center">
  11.                     <h1 class="display-4 text-white animated zoomIn">Notre Boutique</h1>
  12.                     <a href="{{ path('home') }}" class="h5 text-white">Accueil</a>
  13.                     <i class="far fa-circle text-white px-2"></i>
  14.                     <a href="" class="h5 text-white">Boutique</a>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.     </div>
  19. <!-- Navbar End -->
  21.  <!-- Shop Start -->
  22.  <div class="container-fluid pt-5">
  23.     <div class="row px-xl-5">
  24.     <!-- Shop Sidebar Start -->
  25.         <div class="col-lg-3 col-md-12">
  26.             {{ form(form) }}
  27.         </div>
  28.          <!-- Shop Product Start -->
  29.          <div class="col-lg-9 col-md-12">
  30.             <div class="row pb-3">
  31.                 <div class="col-12 pb-1">
  32.                     <div class="d-flex align-items-center justify-content-between mb-4">
  33.                         <form action="">
  34.                             <div class="input-group">
  35.                                 <input type="text" class="form-control" placeholder="Search by name">
  36.                                 <div class="input-group-append">
  37.                                     <span class="input-group-text bg-transparent text-primary">
  38.                                         <i class="fa fa-search"></i>
  39.                                     </span>
  40.                                 </div>
  41.                             </div>
  42.                         </form>
  43.                     </div>
  44.                 </div>
  45.             
  46.              {% for product in products %}
  47.                 <div class="col-lg-4 col-md-6 col-sm-12 pb-1">
  48.                     <div class="card product-item border-0 mb-4">
  49.                         <div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
  50.                             <img class="img-fluid w-100" src="/uploads/{{product.image}}" alt="{{product.name}}" alt="">
  51.                         </div>
  52.                         <div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
  53.                             <h6 class="text-truncate mb-3">{{ product.name}}</h6>
  54.                             <span class="product-subtitle text-center">{{product.subtitle}}</span>
  55.                             <div class="d-flex justify-content-center">
  56.                                 <h6>{{(product.price / 100 )|number_format(2,',', '.')}} FCFA </h6>
  57.                             </div>
  58.                         </div>
  59.                         <div class="card-footer d-flex justify-content-between bg-light border">
  60.                             <a href="{{ path('product_show', {slug: product.slug}) }}" class="btn btn-sm text-dark p-0"><i class="fas fa-eye text-primary mr-1"></i>Voir détails</a>
  61.                             <a href="{{ path('add_to_cart', {id: product.id}) }}" class="btn btn-sm text-dark p-0"><i class="fas fa-shopping-cart text-primary mr-1"></i>Ajout panier</a>
  62.                         </div>
  63.                     </div>
  64.                 </div>
  65.             {% endfor %}
  66.              <div class="col-12 pb-1">
  67.                  <nav aria-label="Page navigation">
  68.                    <ul class="pagination justify-content-center mb-3">
  69.                      <li class="page-item disabled">
  70.                        <a class="page-link" href="#" aria-label="Previous">
  71.                          <span aria-hidden="true">&laquo;</span>
  72.                          <span class="sr-only">Préc</span>
  73.                        </a>
  74.                      </li>
  75.                      <li class="page-item active"><a class="page-link" href="#">1</a></li>
  76.                      <li class="page-item"><a class="page-link" href="#">2</a></li>
  77.                      <li class="page-item"><a class="page-link" href="#">3</a></li>
  78.                      <li class="page-item">
  79.                        <a class="page-link" href="#" aria-label="Next">
  80.                          <span aria-hidden="true">&raquo;</span>
  81.                          <span class="sr-only">Suiv</span>
  82.                        </a>
  83.                      </li>
  84.                    </ul>
  85.                  </nav>
  86.              </div>
  87.          </div>
  88.      </div>
  89.      <!-- Shop Product End -->
  90.  </div>
  91. </div>
  92. <!-- Shop End -->
  94. {% endblock %}