templates/panier/panier.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title  %}{{ parent()}} | Votre panier d'achats
  5. {% endblock %}
  6. {% block stylesheets %}
  7.     <link rel="stylesheet" href="{{ asset('css/panier.css') }}">
  10. {% endblock %}
  11. {% block h1 %}Panier d'achat{% endblock %}
  13. {% block content %}
  14. <div class="wrapper">
  15.     <main class='col-lg-12  col-12 mx-auto d-flex flex-lg-row flex-column justify-content-between'>
  16.             {% set sstotal = 0 %}
  18.         <div class="col-lg-8 col-12 d-flex flex-column mx-auto">
  19.             <div class="module-promo d-none ">
  20.                 <label for="promo-code">Saisir un code reduction</label>
  21.                     <input id="promo-code" type="text" name="promo-code" maxlength="5" class="promo-code-field">
  22.                 <button class="btn ">Appliquer</button>
  23.             </div>
  25.             <div class="col-12 ">
  26.                 <ul class="col-12 entete">
  27.                     <li class="col-4">Description</li>
  28.                     <li class="col-2">Prix TTC</li>
  29.                     <li class="col-2">Qté</li>
  30.                     <li class="col-2">Ss-total</li>
  31.                     <li class="col-2"></li>
  32.                 </ul>
  33.             </div>
  35.             <div class="col-12">
  36.             
  37.                 {% for produit in panier %}
  38.                     <div id ="{{ produit.id_produit }}" class="col-12 ligne_produit">
  39.                         <a class="col-1 mx-0" href="{{ path('fiche_produit', {'id' : produit.produit.id}) }}"><img src="{{ asset("img/photoProduitUpload/" ~ produit.nomPhoto) }}" alt="" style="width:100%"></a>
  40.                         <a class="col-3 description" href="{{ path('fiche_produit', {'id' : produit.produit.id}) }}">
  41.                             <div class="nom-produit">{{ produit.produit.nom}}</div>
  42.                             <div class="col-12">
  44.                                 
  45.                             </div>
  46.                             <div  class="reference">{{ produit.produit.ref }}</div>
  47.                         </a>
  48.                     
  49.                         <div id = {{ "prix" ~ produit.id_produit }} class="col-2 price text-align-center"> {{ produit.prix|number_format(2,'.')}}</div>
  50.                             
  52.                         <div class="col-2"><input type="number" value="{{ produit.quantite }}" min="1" class="quantity-field" onchange = "changeQuantity('{{ produit.id_produit }}', this.value )"></div>
  53.                         {% set sstotal = (produit.quantite * produit.prix)%}
  54.                         <div id = {{ "sstt" ~ produit.id_produit }} class=" col-2 subtotal"><div>{{ sstotal|number_format(2,'.') }}</div></div>
  55.                     
  56.                         
  57.                         
  58.                         <div class="col-2">
  59.                             <button  class='supprimer' onclick = "suppProduit('{{ produit.id_produit }}')">X</button>
  60.                         </div>
  61.                     </div>
  62.                 {% endfor %}
  63.             </div>
  64.         </div>
  66.         <aside class="col-lg-3 col-8 mx-auto">
  67.             <div class="summary">
  68.                 <div class="summary-total-items">
  69.                     <span id = "nbItems" class="total-items"></span>dans votre panier</div>
  70.                 <div hidden class="summary-subtotal">
  71.                     
  72.                     <div class="summary-promo hide">
  73.                         <div class="promo-title">Promotion</div>
  74.                         <div class="promo-value" id="basket-promo"></div>
  75.                     </div>
  76.                 </div>
  77.                 
  78.                 <div class="summary-total">
  79.                     <div class="total-title">Total</div>
  80.                     <div class="total-value" id="total_panier"></div>
  81.                 </div >
  82.                 <div class="summary-checkout d-flex flex-column">
  83.                      <a class="col-12 mx-auto btn mb-2" href = "{{ path('catalogue') }}">continuer vos achats</a>
  84.                     <a class="col-12 mx-auto btn mb-2" href ="{{ path('preparer-commande') }}">valider votre panier</a>
  85.                 </div>
  87.                 
  88.                 
  89.             </div>
  90.               
  91.         </aside>
  93.     
  94.     </main>
  95.     </div>    
  97.     <textarea name="" hidden  id="panier2js" cols="30" rows="10">{{ panierstr }}</textarea>
  100. {% endblock %}
  102. {% block javascripts %}
  104. <script> 
  105.     // on reconstitue le panier
  106.     var panierstring =  document.querySelector('#panier2js').innerHTML
  107.     var panier = JSON.parse(panierstring)
  109.     // onstocke les éléments dans des variables
  110.     var eltssTotalPanier = document.querySelector('#sstotal_panier')
  111.     var eltcout_livraison = document.querySelector('#livraison')
  112.     var elttotalPanier = document.querySelector('#total_panier')
  113.     var eltchoix_livraison = document.querySelector('#choix_livraison')
  114.     var eltnbItems = document.querySelector('#nbItems')
  116.     //on initalise les varirables globales
  117.     var totalPanier =0
  119.     // nombre d'articles dans le panier
  120.     function nbItems (){
  121.         var nbItems = panier.length
  122.         if (nbItems > 1){
  123.             eltnbItems.innerHTML = nbItems + " articles "  
  124.         }else {
  125.             eltnbItems.innerHTML = nbItems + " article "
  126.         }
  127.     }
  129.     function calculSousTotalProduit(id_produit, quantite){
  130.         let elementId  = 'prix' + id_produit
  131.         let prixProduit = document.getElementById(elementId).innerHTML
  132.         
  133.         prixProduit = parseFloat (prixProduit)
  134.     
  135.         let ssTotalProduit = parseInt(quantite) * parseFloat(prixProduit)
  136.         ssTotalProduit = ssTotalProduit.toFixed(2)
  137.         document.getElementById('sstt'+id_produit).innerHTML = ssTotalProduit
  139.     }
  141.     function calculPanier() {
  142.         // calcul du sous total panier
  143.         let totalPanier = 0
  144.         for (i=0 ;i< panier.length; i++) {
  145.         let eltId = 'sstt'+ panier[i].id_produit
  146.         totalPanier = totalPanier + parseFloat(document.getElementById(eltId).innerHTML)
  147.         }
  148.         totalPanier=totalPanier.toFixed(2)
  149.         
  150.         elttotalPanier.innerHTML = totalPanier
  151.     }
  153.     function livraison() {
  155.         cout_livraison  = parseInt(eltchoix_livraison.value)
  156.         eltcout_livraison.innerHTML = cout_livraison
  157.         ssTotalPanier = parseFloat(eltssTotalPanier.innerHTML)
  159.         totalPanier = ssTotalPanier + cout_livraison
  160.         totalPanier =totalPanier.toFixed(2)
  163.         elttotalPanier.innerHTML =totalPanier
  164.     }
  167.     //------------- au chagemement de la page --------------------------
  168.     // nombre d'articles dans le panier
  169.     nbItems()
  171.     // on calcul les sous totaux produits  
  172.     for (i=0; i< panier.length ; i++) {
  173.     calculSousTotalProduit(panier[i].id_produit, panier[i].quantite)
  174.     }
  176.     // on calcul les totaux et sous totaux  
  177.     calculPanier()
  179.     //-----------------------fin du lancement de la page 
  182.     function suppProduit(id_produit){
  183.         let eltproduit = document.getElementById(id_produit)
  184.         eltproduit.remove()
  186.         for(i=0 ; i< panier.length ; i++) {
  187.             if ( panier [i]['id_produit'] == id_produit){
  188.                 panier.splice(i,1)
  189.             }
  190.         }
  191.             nbItems()
  192.             calculPanier()
  193.             let nbCartItems = panier.length
  194.             if (nbCartItems>0){
  195.                 document.querySelector('.cart-items-lg').innerHTML=nbCartItems
  196.                 document.querySelector('.cart-items-md').innerHTML=nbCartItems
  197.                 }
  198.             else{
  199.             // cart-items-lg est le badge panier en mode lg , cart-items-md en mode responsive 
  200.             document.querySelector('.cart-items-lg').innerHTML=""
  201.             document.querySelector('.cart-items-lg').setAttribute('visibility',"hidden")
  202.             document.querySelector('.cart-items-md').innerHTML=""
  203.             document.querySelector('.cart-items-md').setAttribute('visibility',"hidden")
  204.             }
  205.         
  208.         let url = "{{ path('panier_supprimer') }}"
  209.         let data = {
  210.             'id_produit': id_produit
  211.         }
  212.         $.ajax({
  213.                 method: "post",
  214.                 url: url,
  215.                 data: data,
  216.                     success: function(response)
  217.                     {console.log("produit supprimé");},
  218.                     error: function()
  219.                     {alert('erreur');}
  220.             })
  222.     }
  225.     function changeQuantity(id_produit, quantite){
  226.         // recupération du prix produit et affichage du sstotal produit 
  227.         calculSousTotalProduit(id_produit, quantite)
  228.         calculPanier()
  230.         // on va changer le "vrai"  panier PHP en cas de rechargement de la page 
  231.         let url = "{{ path('panier_changer') }}"
  232.         let data = {
  233.             'id_produit': id_produit,
  234.             'qty': quantite
  235.         }
  236.         $.ajax({
  237.                 method: "post",
  238.                 url: url,
  239.                 data: data,
  240.                     success: function(response)
  241.                     {console.log("qty changed");},
  242.                     error: function()
  243.                     {alert('erreur');}
  244.             })
  245.     }
  248. </script>
  252. {% endblock %}