templates/produit/catalogue.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Le Bio d'Elo{% endblock %}
  4. {% block stylesheets %}
  5.     <link rel="stylesheet" href="{{ asset('css/catalogue.css') }}">
  6. {% endblock %}
  7. {% block h1 %}Catalogue produit{% endblock %}
  8. {% block content %}
  10. <div class="wrapper col-12 d-flex flex-column ">
  11.    
  12.     <div class="d-none d-lg-block">
  13.         <nav itemscope itemtype="https://schema.org/Breadcrumb" aria-label="Breadcrumb" class="breadcrumb">
  14.         {% set categories = app.session.get('categories') %}
  15.         
  16.                 <ul class='col-12'>
  18.                 
  19.                 {% for cat in categories %}
  20.                   <li class="d-flex flex-column align-items-center"><a href="{{ path("categorie" , {'id' : cat.id}) }}">{{ cat.nom }}</a>
  21.                     
  22.                     {% if categorie == "Tous" %}
  23.                      {% else %}
  25.                         {% if cat.nom == categorie.nom %}
  26.                             <div class="bouton my-2"></div>
  27.                         {% endif %}
  28.                     
  29.                     
  30.                     {% endif %}
  31.                   
  33.                   
  34.                     </li>
  35.                     
  36.                 {% endfor %}
  37.                   
  39.                 </ul>
  40.         </nav>
  41.     </div>
  43.     <img class="bgImageCat" src="{{ asset('img/background/roya pano.jpg') }}" alt="">
  45. {% if categorie == 'Tous' %}
  47.     <div class="content col-12">
  48.         
  49.         <div class="text-catalogue col-8  mx-auto d-flex justify-content-between">
  50.             <div class = "col-12 d-flex flex-column justify-content-start align-items-center">
  51.                 <h2>DES PRODUITS POUR LE BIEN-ÊTRE ET LA BEAUTÉ
  52.                
  53.                 <br>
  54.                 <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nostrum magni nisi illum veritatis? Cum maxime a perspiciatis alias minima! Non, blanditiis tempora porro quibusdam laborum possimus magnam dolor, accusantium culpa nobis assumenda reiciendis repellendus quisquam enim aliquam molestiae. Ullam non eligendi architecto laborum. Perspiciatis alias quos perferendis exercitationem officia ex. Repudiandae eum, cumque sequi accusamus quod id nihil veritatis dolorum! Dolore voluptate soluta magnam iure laudantium consequuntur a, quas ut unde ipsa inventore facere ullam cumque cupiditate explicabo tempora optio quod! Ea ipsum voluptate in perspiciatis quam numquam harum fuga tempore eum aliquid officia itaque nam nulla odio, tenetur repellendus accusantium vel! Non possimus deserunt voluptas quo dignissimos aliquid, dolores consequatur fuga consequuntur reiciendis aut ipsa officia temporibus est quisquam molestiae cum in aspernatur ipsum cupiditate incidunt nemo? Distinctio earum, molestiae quam eos et expedita natus! Quas molestiae reprehenderit quaerat! Repellendus delectus maxime, quam repudiandae incidunt nulla aspernatur impedit!</p>
  56.             </div>      
  58.         </div>
  59.     </div>
  61. {% else %}
  64.     <div class="content col-12">
  65.         
  66.         <div class="text-catalogue col-8  mx-auto d-flex justify-content-between">
  67.             <div class = "col-12 d-flex flex-column justify-content-start align-items-center">
  68.                 <h2> {{ categorie.nom }}</h2>
  69.                 <br>
  70.                 <img  src="{{ asset("img/photoCategorie/" ~  categorie.photo) }}" style=" width:40%;"  class="imageCat" alt="">
  71.                 <br>
  72.                 <p> {{ categorie.texte }}  </p>
  74.             </div>      
  76.         </div>
  77.     </div>
  79. {% endif %}
  82.     
  87. .
  90.  
  91.  
  92.     <div class="catalogue mb-5">
  95.         {% if produits %} {# {% if produits is not empty %} #} 
  96.         {% set nbProduit = 0 %}
  99.             {% for produit in produits %}
  101.                 {% set nbProduit = nbProduit + 1 %}
  103.                 {% if nbProduit % 2 %}
  105.                             <div class="col-12 d-flex flex-md-row flex-column pb-5 mt-md-0 mt-3  mx-auto">
  107.                                         <div class="col-md-4 col-12  d-flex flex-column justify-content-center align-items-center photo mx-auto mt-md-3 mt-0"> 
  108.                                                 <img itemprop="image" src="{{ asset("img/photoProduitUpload/" ~  produit.getPhotoProduits.first() ) }}" alt="image du produit" style="width:40%"> 
  109.                                                 <div class="nomProduit m-2" itemprop="name">{{ produit.nom|upper }}</div>
  110.                                         
  111.                                         </div>
  113.                                     <div class="Produit col-md-8 col-12 d-flex flex-column justify-content-center align-items-center mx-auto px-2">
  114.                                             {# <p class= "nomProduit mb-1">{{ produit.nom|upper }}</p> #}
  115.                                         
  116.                                             <div hidden itemprop="offer">{{ produit.prixPubTtc }}</div>
  117.                                             <div itemprop="description" class= "description">{{ produit.description|raw}}</div>
  118.                                             <a class="btn col-6" href="{{ path('fiche_produit', {'id' : produit.id}) }}">Découvrir</a>
  119.                                         
  120.                                     </div>
  121.                                     
  122.                             </div>
  124.                 {% else %}
  125.                         
  127.                             <div class=" col-12  d-flex  flex-md-row flex-column  mt-md-0 mt-3 mb-3 pb-5 mx-auto" >
  130.                                     <div class="col-md-8 col-12 d-flex flex-column justify-content-center align-items-center  order-md-1 order-2 mx-auto px-2 mt-md-0 mt-3 mb-3">
  131.                                     
  132.                                         <div hidden itemprop="offer">{{ produit.prixPubTtc  }}</div>
  133.                                         <div itemprop="description" class= "description">{{ produit.description|raw}}</div>
  134.                                         <a class="btn col-6" href="{{ path('fiche_produit', {'id' : produit.id}) }}">Découvrir</a>
  135.                                     
  137.                                     </div>
  138.                                     
  139.                                 
  140.                                     <div class="col-md-4 col-12 d-flex flex-column justify-content-center align-items-center  photo order-md-2 order-1 mx-auto">
  142.                                             
  143.                                     
  144.                                             <img itemprop= "image" src="{{ asset("img/photoProduitUpload/" ~  produit.getPhotoProduits.first() ) }}" alt="image du produit" style="width:40%" class="mx-auto"> 
  145.                                             <div class="nomProduit my-2" itemprop="name">{{ produit.nom|upper }}</div>
  146.                                             
  147.                                             
  148.                                     </div>
  149.                                     
  150.                                 
  151.                             </div>
  152.                 {% endif %}
  153.                             
  154.             {% endfor %}
  156.         
  158.          {% else %}{# si le tableau produits est vide #}
  159.             <div class="col-12 d-flex w-100 mt-5 pt-5 mx-auto" style="width:100%">
  161.                 <h2 class=" col-6 text-center text-danger mt-3 fst-italic mx-auto pt-5 mt-5 ">Il n'y a aucun produit pour le moment</h2>
  162.             </div> 
  164.          {% endif %}
  165.   
  166.     </div>  
  167. {% endblock %}