templates/frontoffice_bundle/article/product.html.twig line 1

  1. {% extends "frontoffice_bundle/base.html.twig" %}
  2. {% block menu %}
  3.     <li><a href="/">Accueil</a></li>
  4.     <li><a href="/products/Légumes/1/" {% if nom == "Légumes" %}class="active"{% endif %}>Légumes</a></li>
  5.     <li><a href="/products/Fruits/2/" {% if nom == "Fruits" %}class="active"{% endif %}>Fruits</a></li>
  6.     <li><a href="/products/Poissons/3/" {% if nom == "Poissons" %}class="active"{% endif %}>Poissons</a></li>
  7.     <li><a href="/products/Hygiènes/5/" {% if nom == "Hygiènes" %}class="active"{% endif %}>Hygiènes</a></li>
  8.     <li><a href="/products/Réstauration/4/" {% if nom == "Réstauration" %}class="active"{% endif %}>Réstauration</a></li>
  9.     <li><a href="/products/Alimentations_générales/6/" {% if nom == "Alimentations_générales" %}class="active"{% endif %}>Alimentations générales</a></li>
  10. {% endblock %}
  11. {% block body %}
  12.     <style>
  13.         .center{
  14.             width: 150px;
  15.             margin: 40px auto;
  17.         }
  19.         .fruite-item {
  20.             height: 100%;
  21.             transition: 0.5s;
  22.         }
  23.         .fruite-item:hover {
  24.             box-shadow: 0 0 55px rgba(0, 0, 0, 0.4);
  25.         }
  27.         .fruite-item .fruite-img {
  28.             overflow: hidden;
  29.             transition: 0.5s;
  30.             border-radius: 10px 10px 0 0;
  31.         }
  33.         .fruite-item .fruite-img img {
  34.             transition: 0.5s;
  35.         }
  37.         .fruite-item .fruite-img img:hover {
  38.             transform: scale(1.3);
  39.         }
  41.         .fruite-name .active{
  42.             color: #ffb524 !important;
  43.         }
  44.     </style>
  46.     <div class="container-fluid page-header py-5">
  47.         <h1 class="text-center text-white display-6">Produits</h1>
  48.         <ol class="breadcrumb justify-content-center mb-0">
  49.             <li class="breadcrumb-item"><a href="/">Acceuil</a></li>
  50.             <li class="breadcrumb-item"><a href="/products">Produits</a></li>
  51.             <li class="breadcrumb-item active text-white">
  52.                 {% if nom == "Légumes" %}
  53.                     Légumes
  54.                 {% elseif nom == "Fruits" %}
  55.                     Fruits
  56.                 {% elseif nom == "Poissons" %}
  57.                     Poissons
  58.                 {% elseif nom == "Réstauration" %}
  59.                     Réstauration
  60.                 {% elseif nom == "Hygiènes" %}
  61.                     Hygiènes
  62.                 {% elseif nom == "Alimentations_générales" %}
  63.                     Alimentations générales
  64.                 {% endif %}
  65.         </li>
  66.         </ol>
  67.     </div>
  68.     <section>
  69.         <div class="container">
  70.             <div class="row">
  71.                 <div class="col-lg-3 mt-3">
  72.                     <div class="row g-4">
  73.                         <div class="col-lg-12">
  74.                             <form action="/search/" method="GET">
  75.                                 <div class="input-group w-100 mx-auto d-flex">
  76.                                     <input type="search" class="form-control p-3" placeholder="mots clés" aria-describedby="search-icon-1" name="name">
  77.                                     <button type="submit" id="search-icon-1" class="input-group-text p-3"><i class="fa fa-search"></i></button>
  78.                                 </div>
  79.                             </form>
  80.                         </div>
  81.                     </div>
  82.                     <div class="row g-4">
  83.                         <div class="col-lg-12">
  84.                        <div class="mb-3">
  85.                                 <h4 class="mt-2">Categories</h4>
  86.                                 <ul class="list-unstyled fruite-categorie">
  87.                                     <li>
  88.                                         <div class="d-flex justify-content-between fruite-name pt-2">
  89.                                             <a href="/products/Legumes/1/" class="nav-item nav-link {% if app.request.pathinfo == '/products/Legumes/1/' %}active{% endif %}"><i class="fas fa-apple-alt me-2"></i>Légumes</a>
  90.                                         </div>
  91.                                     </li>
  92.                                     <li>
  93.                                         <div class="d-flex justify-content-between fruite-name pt-2">
  94.                                             <a href="/products/Fruits/2/" class="nav-item nav-link {% if app.request.pathinfo == '/products/Fruits/2/' %}active{% endif %}"><i class="fas fa-apple-alt me-2"></i>Fruits</a>
  95.                                         </div>
  96.                                     </li>
  97.                                     <li>
  98.                                         <div class="d-flex justify-content-between fruite-name pt-2">
  99.                                             <a href="/products/Poissons/3/" class="nav-item nav-link {% if app.request.pathinfo == '/products/Poissons/3/' %}active{% endif %}"><i class="fas fa-apple-alt me-2"></i>Poissons</a>
  100.                                         </div>
  101.                                     </li>
  102.                                     <li>
  103.                                         <div class="d-flex justify-content-between fruite-name pt-2">
  104.                                             <a href="/products/Restauration/4/" class="nav-item nav-link {% if app.request.pathinfo == '/products/Restauration/4/' %}active{% endif %}"><i class="fas fa-apple-alt me-2"></i>Réstauration</a>
  105.                                         </div>
  106.                                     </li>
  107.                                     <li>
  108.                                         <div class="d-flex justify-content-between fruite-name pt-2">
  109.                                             <a href="/products/Hygienes/5/" class="nav-item nav-link {% if app.request.pathinfo == '/products/Hygienes/5/' %}active{% endif %}"><i class="fas fa-apple-alt me-2"></i>Hygiènes</a>
  110.                                         </div>
  111.                                     </li>
  112.                                     <li>
  113.                                         <div class="d-flex justify-content-between fruite-name pt-2">
  114.                                             <a href="/products/Alimentations_generales/6/" class="nav-item nav-link {% if app.request.pathinfo == '/products/Alimentations_generales/6/' %}active{% endif %}"><i class="fas fa-apple-alt me-2"></i>Alimentations générales</a>
  115.                                         </div>
  116.                                     </li>
  117.                                 </ul>
  118.                             </div>
  119.                         </div>
  120.                         <div class="col-lg-12">
  121.                             <div class="position-relative">
  122.                                 <img src='{{ asset("bundles/Frontoffice/img/banner-fruits.jpg")}}' class="img-fluid w-100 rounded" alt="">
  123.                                 <div class="position-absolute" style="top: 50%; right: 10px; transform: translateY(-50%);">
  124.                                     <h4 class="text-secondary fw-bold">Bannière <br> De <br> Fruits <br> Frais</h4>
  125.                                 </div>
  126.                             </div>
  127.                         </div>
  128.                     </div>
  129.                 </div>
  130.                 <div class="col-lg-9 mt-3">
  131.                     <div class="row g-4 justify-content-center">
  132.                         {% if listarticles %}
  133.                             {% for lm in listarticles %}
  134.                                 <div class="col-md-6 col-lg-6 col-xl-4 ">
  135.                                     <div class="rounded position-relative fruite-item border border-secondary rounded-bottom" >
  136.                                         <div class="fruite-img">
  137.                                             <a href="/product/{{ lm["categorie"] }}/{{ lm["categorie"] }}/{{ lm["article"].id }}/">
  138.                                                 <img src="{{ asset(lm["article"].imgPrincipale) }}" class="img-fluid w-100 rounded-top " alt="" style="height: 250px !important;padding: 10px !important;">
  139.                                             </a>
  140.                                         </div>
  141.                                         <div class="text-white bg-secondary px-3 py-1 rounded position-absolute" style="top: 10px; left: 10px;">{{ lm["categorie"] }}</div>
  142.                                         <div class="p-4">
  143.                                             
  144.                                             <h4>{{ lm["article"].titre }}</h4>
  145.                                             <div class="d-flex justify-content-between flex-lg-wrap">
  146.                                                 <div class="input-group" style="width: 60%;margin-top:10px;margin-bottom: 10px;margin-left: auto;margin-right: auto;">
  147.                                                     <div class="input-group-btn">
  148.                                                         <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant-{{ lm["article"].id }}">
  149.                                                             <i class="fa fa-minus"></i>
  151.                                                         </button>
  152.                                                     </div>
  153.                                                     <input type="text" name="quant-{{ lm["article"].id }}" class="form-control input-number" id="quant-{{ lm["article"].id }}" value="{{ lm["article"].minQte }}" min="{{ lm["article"].minQte }}" max="150" unite="{{ lm["article"].unite }}">
  154.                                                     <div class="input-group-btn">
  155.                                                         <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant-{{ lm["article"].id }}">
  156.                                                             <i class="fa fa-plus"></i>
  157.                                                         </button>
  158.                                                     </div>
  159.                                                 </div>
  160.                                             </div>
  161.                                             <div class="d-flex justify-content-between flex-lg-inherit">
  162.                                                 <p class="text-dark fs-5 fw-bold mb-0 mt-1">
  163.                                                     {% if typeCompte == "PRO" %}
  164.                                                         {% if lm["article"].prixPromo > 0 and lm["article"].prixPromo < lm["article"].prixProTTC %}
  165.                                                             {{ lm["article"].prixPromo|number_format(2, '.', '') }} DH / {{ lm["article"].unite }}
  166.                                                             {% set prix = lm["article"].prixPromo %}
  167.                                                         {% else %}
  168.                                                             {{ lm["article"].prixProTTC|number_format(2, '.', '') }} DH / {{ lm["article"].unite }}
  169.                                                             {% set prix = lm["article"].prixProTTC %}
  170.                                                         {% endif %}
  171.                                                     {% else %}
  172.                                                         {% if lm["article"].prixPromo > 0 and lm["article"].prixPromo < lm["article"].prixTTC %}
  173.                                                             {{ lm["article"].prixPromo|number_format(2, '.', '') }} DH / {{ lm["article"].unite }}
  174.                                                             {% set prix = lm["article"].prixPromo %}
  175.                                                         {% else %}
  176.                                                             {{ lm["article"].prixTTC|number_format(2, '.', '') }} DH / {{ lm["article"].unite }}
  177.                                                             {% set prix = lm["article"].prixTTC %}
  178.                                                         {% endif %}
  179.                                                     {% endif %}
  180.                                                 </p>
  181.                                                 <button class="btn border border-secondary rounded-pill px-3 text-primary add-to-cart" onClick='addToPanierArticle({{ lm["article"].id }});'>Ajouter au <i class="fa fa-shopping-cart"></i></button>
  182.                                             </div>
  184.                                         </div>
  185.                                     </div>
  186.                                 </div>    
  187.                             {% endfor %}
  188.                         {% else %}
  189.                             <div class="text-center" style="margin-top:30%;"><h3 class="text-secondary fw-bold">Aucun produit disponible pour le moment</h3></div>
  190.                         {% endif %}
  191.                     </div>
  192.                     <div class="col-12">
  193.                         <div class="pagination d-flex justify-content-center mt-5">
  194.                             {{ knp_pagination_render(articles) }}
  195.                         </div>
  196.                     </div>
  197.                 </div>
  198.             </div>
  199.         </div>
  200.     </section>
  201.     
  202.     <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" role="dialog">
  203.         <div class="modal-dialog modal-lg" style="min-width: 90%;">
  204.             <div class="modal-content">
  205.                 <div class="modal-header">
  206.                     <h4 class="modal-title"></h4>
  207.                     <button type="button" class="close" data-dismiss="modal">&times;</button>
  208.                 </div>
  209.                 <div class="modal-body">
  210.                     <div class="panel panel-default">
  211.                         <div class="panel-body">
  212.                             <div class="row">
  213.                                 <div class="col-lg-5">
  214.                                     <div class="image-large">
  215.                                         <img src="" alt="Product" id="imgProduct" style="max-width: 100%;">
  216.                                     </div>
  217.                                 </div>
  218.                                 <div class="col-lg-7">
  219.                                     <div class="product-details" style="width: 100%;">
  220.                                         <div class="text-right">
  221.                                         </div>
  222.                                         <h3 class="product-name" id="titleProduct"></h3>
  223.                                         <h4 class="product-name" id="titleProduct2"></h4>
  224.                                         <h4 class="product-price" style="text-decoration: line-through;color:#868686;"><strong id="priceProductOld"></strong></h4>
  225.                                         <h2 class="product-price"><strong id="priceProduct"></strong></h2>
  226.                                         <a href="#" class="view-more-detail" id="moreDetail">Voir plus de Details</a>
  227.                                     </div>
  228.                                     <div class="row">
  229.                                         <div class="col-lg-4">
  230.                                             <div class="option-dropdowns" style="width: 100%;">
  231.                                                 <div>
  232.                                                     <div>
  233.                                                         <input type="hidden" id="idArticle" value="0" />
  234.                                                         <div class="input-group" style="width: 100%;">
  235.                                                             <div class="input-group-btn">
  236.                                                                 <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
  237.                                                                     <i class="glyphicon glyphicon-minus"></i>
  238.                                                                 </button>
  239.                                                             </div>
  240.                                                             <input type="text" name="quant[1]" class="form-control input-number" id="qte" value="1" min="1" max="150" unite="">
  241.                                                             <div class="input-group-btn">
  242.                                                                 <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
  243.                                                                     <i class="glyphicon glyphicon-plus"></i>
  244.                                                                 </button>
  245.                                                             </div>
  246.                                                         </div>
  247.                                                     </div>
  248.                                                 </div>
  249.                                             </div>
  250.                                         </div>
  251.                                         <div class="col-lg-8">
  252.                                             <div class="buttons">
  253.                                                 <div>
  254.                                                     <a class="button vert add-to-bag" onclick="addArtPan()"><i class="fa fa-shopping-cart"></i>  Ajouter au panier </a>
  255.                                                 </div>
  256.                                             </div>
  257.                                         </div>
  258.                                     </div>
  259.                                     <div id="shareDiv">
  260.                                         <h3>PARTAGER : </h3>
  261.                                         <div class='social-share-btns-container'>
  262.                                             <div class='social-share-btns'>
  263.                                                 <a class='share-btn share-btn-twitter' href='https://twitter.com/intent/tweet?text=https://codepen.io/marko-zub/#' rel='nofollow' target='_blank'>
  264.                                                     <i class="fa fa-twitter" aria-hidden="true"></i>
  265.                                                 </a>
  266.                                                 <a class='share-btn share-btn-facebook' href='https://www.facebook.com/sharer/sharer.php?u=https://codepen.io/marko-zub/#' rel='nofollow' target='_blank'>
  267.                                                     <i class="fa fa-facebook" aria-hidden="true"></i>
  268.                                                 </a>
  269.                                                 <a class='share-btn share-btn-linkedin' href='https://www.linkedin.com/cws/share?url=https://codepen.io/marko-zub/#' rel='nofollow' target='_blank'>
  270.                                                     <i class="fa fa-linkedin" aria-hidden="true"></i>
  271.                                                 </a>
  272.                                                 <a class='share-btn share-btn-mail' href='mailto:?subject=Look Fun Codepen Account&amp;amp;body=https://codepen.io/marko-zub/#' rel='nofollow' target='_blank' title='via email'>
  273.                                                     <i class="fa fa-envelope-o" aria-hidden="true"></i>
  274.                                                 </a>
  275.                                                 <a class='share-btn share-btn-reddit' href='mailto:?subject=Look Fun Codepen Account&amp;amp;body=https://codepen.io/marko-zub/#' rel='nofollow' target='_blank' title='via email'>
  276.                                                     <i class="fa fa-google-plus" aria-hidden="true"></i>
  277.                                                 </a>
  278.                                             </div>
  279.                                         </div>
  280.                                     </div>
  281.                                 </div>
  282.                             </div>
  283.                             <!-- /.panel-body -->
  284.                         </div>
  285.                         <!-- /.panel-body -->
  286.                     </div>
  287.                 </div>
  288.             </div>
  289.         </div>
  290.     </div>
  292. {% endblock %}
  293. {% block js %}
  295.     <script type="text/javascript">
  297.         var listOfProduct = {{ articlesJson|json_encode|raw }};
  299.         function addArtPan(){
  300.             var qte = document.getElementById("qte").value;
  301.             var id = document.getElementById("idArticle").value;
  303.             addToPanier(id,qte);
  304.             var lastPan = parseInt(document.getElementById("nbrArticle").innerText);
  305.             var nbrPan = lastPan+1;
  306.             document.getElementById("nbrArticle").innerText = nbrPan;
  307.         }
  309.         function addToPanierArticle(id){
  310.             var qte = document.getElementById("quant-"+id).value;
  312.             addToPanier(id,qte);
  313.             var lastPan = parseInt(document.getElementById("nbrArticle").innerText);
  314.             var nbrPan = lastPan+1;
  315.             document.getElementById("nbrArticle").innerText = nbrPan;
  316.         }
  318.     </script>
  320.     <script src='{{ asset("bundles/Frontoffice/js/products.js") }}'></script>
  322. {% endblock %}