templates/front/fiche_produit.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block stylesheets %}
  4.     <link rel="stylesheet" href="{{ asset('front/css/product-details.css') }}">
  7. {% endblock %}
  8. {% block title %}
  9.    eYobu -  {{ produit.libelle }}
  10. {% endblock %}
  11. {% block body %}
  12.     <!--=====================================
  13.              BANNER PART START
  14.  =======================================-->
  15.     <section class="single-banner inner-section" style="background: url(images/single-banner.jpg) no-repeat center;">
  16.         <div class="container">
  17.             <h2>{{ produit.libelle }}</h2>
  18.             <ol class="breadcrumb">
  19.                 <li class="breadcrumb-item"><a href="{{ path('app_accueil') }}">Accueil</a></li>
  20.                 <li class="breadcrumb-item"><a href="{{ path('app_boutique') }}">Boutique</a></li>
  21.                 <li class="breadcrumb-item active" aria-current="page">{{ produit.libelle }}</li>
  22.             </ol>
  23.         </div>
  24.     </section>
  25.     <!--=====================================
  26.                 BANNER PART END
  27.     =======================================-->
  29.     <!--=====================================
  30.                PRODUCT DETAILS PART START
  31.        =======================================-->
  32.     <section class="inner-section">
  33.         <div class="container">
  34.             <div class="row">
  35.                 <div class="col-lg-6">
  36.                     <div class="details-gallery">
  37.                         {# <div class="details-label-group"> #}
  38.                         {# <label class="details-label new">new</label> #}
  39.                         {# <label class="details-label off">-10%</label> #}
  40.                         {# </div> #}
  41.                         <ul class="details-preview">
  42.                             {% for image in produit.imagesProduits %}
  43.                                 <li><img src="{{ image }}" alt="{{ produit.libelle }}"></li>
  44.                             {% endfor %}
  47.                         </ul>
  48.                         <ul class="details-thumb">
  49.                             {% for image in produit.imagesProduits %}
  50.                                 <li><img src="{{ image }}" alt="{{ produit.libelle }}"></li>
  51.                             {% endfor %}
  53.                         </ul>
  54.                     </div>
  55.                 </div>
  56.                 <div class="col-lg-6">
  57.                    {# <ul class="product-navigation">
  58.                         <li class="product-nav-prev">
  59.                             <a href="#">
  60.                                 <i class="icofont-arrow-left"></i>
  61.                                 prev product
  62.                                 <span class="product-nav-popup">
  63.                                         <img src="images/product/02.jpg" alt="product">
  64.                                         <small>green chilis</small>
  65.                                     </span>
  66.                             </a>
  67.                         </li>
  68.                         <li class="product-nav-next">
  69.                             <a href="#">
  70.                                 next product
  71.                                 <i class="icofont-arrow-right"></i>
  72.                                 <span class="product-nav-popup">
  73.                                         <img src="images/product/03.jpg" alt="product">
  74.                                         <small>green chilis</small>
  75.                                     </span>
  76.                             </a>
  77.                         </li>
  78.                     </ul>#}
  79.                     <div class="details-content">
  80.                         <h3 class="details-name"><a href="#">{{ produit.libelle }}</a></h3>
  81.                         <div class="details-meta">
  83.                             <p>{{ produit.utilisateur.secteurActivite }} : <a href="#">{{ produit.utilisateur.userIdentifier }}
  84.                                  ( {{  produit.utilisateur.telephone }} )
  85.                                 </a></p>
  86.                         </div>
  88.                         <h3 class="details-price">
  89.                             {# <del>$38.00</del> #}
  90.                             <span>{{ produit.prix }} FCFA <small>/ {{ produit.uniteMesure }}</small></span>
  91.                         </h3>
  92.                         <p class="details-desc">
  93.                             {{ produit.description }}
  94.                         </p>
  95.                         <label class="details-list-title">Disponibilite du produit : </label> {{ produit.disponibilite ? produit.disponibilite|date('d-m-Y') : ''  }}<br>
  96.                         <label class="details-list-title">localite du produit : </label> {{ produit.localite ? produit.localite.libelle : ''  }}<br>
  97.                        {% if produit.stock %}
  98.                            <label class="details-list-title">Stock disponible : </label> {{ produit.stock }} {{ produit.uniteMesure }}<br>
  100.                        {% endif %}
  101.                         <br>
  102.                         <div class="details-list-group">
  103.                             <label class="details-list-title">Catégorie:</label>
  104.                             <ul class="details-tag-list">
  106.                                     <li><a href="#"> {{ produit.categorie.libelle }}</a></li>
  109.                             </ul>
  110.                         </div>
  111.                         <div class="details-list-group">
  112.                             <label class="details-list-title">Partagez:</label>
  113.                             <ul class="details-share-list">
  114.                                 <li><a href="#" class="icofont-facebook" title="Facebook"></a></li>
  115.                                 <li><a href="#" class="icofont-twitter" title="Twitter"></a></li>
  117.                                 <li><a href="#" class="icofont-instagram" title="Instagram"></a></li>
  118.                             </ul>
  119.                         </div>
  120.                         <div class="details-add-group">
  121.                             {# <button class="product-add" title="Ajouter au panier">
  122.                                 <i class="fas fa-shopping-basket"></i>
  123.                                 <span>Ajouter au panier</span>
  124.                             </button>
  125.                              <div class="product-action"> #}
  126.                             {# <button class="action-minus" title="Quantity Minus"><i class="icofont-minus"></i> #}
  127.                             {# </button> #}
  128.                             {# <input class="action-input" title="Quantity Number" type="text" name="quantity" #}
  129.                             {# value="1"> #}
  130.                             {# <button class="action-plus" title="Quantity Plus"><i class="icofont-plus"></i></button> #}
  131.                             {# </div> #}
  132.                         </div>
  133.                         {# <div class="details-action-group"> #}
  134.                         {# <a class="details-wish wish" href="#" title="Add Your Wishlist"> #}
  135.                         {# <i class="icofont-heart"></i> #}
  136.                         {# <span>add to wish</span> #}
  137.                         {# </a> #}
  138.                         {# <a class="details-compare" href="compare.html" title="Compare This Item"> #}
  139.                         {# <i class="fas fa-random"></i> #}
  140.                         {# <span>Compare This</span> #}
  141.                         {# </a> #}
  142.                         {# </div> #}
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </section>
  148.     <!--=====================================
  149.             PRODUCT DETAILS PART END
  150.     =======================================-->
  152.     <!--=====================================
  153.                      PRODUCT TAB PART START
  154.            =======================================-->
  156.     <section class="inner-section">
  157.         <div class="container">
  158.             <div class="row">
  159.                 <div class="col-lg-12">
  160.                     <div class="product-details-frame">
  161.                         <h3 class="frame-title">Description</h3>
  162.                         <div class="tab-descrip">
  163.                             {{ produit.description | raw }}
  164.                         </div>
  165.                     </div>
  166.                 </div>
  167.             </div>
  168.         </div>
  169.     </section>
  170.     <!--=====================================
  171.                  PRODUCT TAB PART END
  172.      =======================================-->
  174.     <!--=====================================
  175.                PRODUCT RELATED PART START
  176.       =======================================-->
  177.     <section class="inner-section">
  178.         <div class="container">
  179.             <div class="row">
  180.                 <div class="col">
  181.                     <div class="section-heading">
  182.                         <h2>Ils ont également acheté</h2>
  183.                     </div>
  184.                 </div>
  185.             </div>
  186.             <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
  187.             {% for produit in produits %}
  188.             <div class="col">
  189.                 {% include 'front/partials/_item.html.twig' %}
  191.             </div>
  192.         {% endfor %}
  193.             </div>
  194.         </div>
  195.     </section>
  196. {% endblock %}