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

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