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