templates/frontoffice_bundle/panier/panier.html.twig line 1

  1. {% extends "frontoffice_bundle/base.html.twig" %}
  2. {% block body %}
  3. <style>
  4. .error{
  5.     color:red;
  6. }
  7. .cart_quantity_delete{
  8.         cursor: pointer !important;
  9. }
  10. </style>
  11.     <div class="container-fluid page-header py-5">
  12.         <h1 class="text-center text-white display-6">Panier</h1>
  13.         <ol class="breadcrumb justify-content-center mb-0">
  14.             <li class="breadcrumb-item"><a href="/">Acceuil</a></li>
  15.             {# <li class="breadcrumb-item"><a href="#">Pages</a></li> #}
  16.             <li class="breadcrumb-item active text-white">Panier</li>
  17.         </ol>
  18.     </div>
  19.     <section id="cart_items">
  20.         <div class="container mt-2">
  21.             <div class="successMsg" id="successMsg" style="display: none;">
  22.             </div>
  23.             <div class="error" id="errorMsg" style="display: none;">
  24.             </div>
  25.             <br/>
  26.             {% if articles|length > 0 %}
  27.             <div class="table-responsive cart_info">
  28.                 <form method="POST" id="updateForm">
  29.                     <input type="hidden" name="formName" value="updateQte" />
  30.                     <table class="table table-condensed">
  31.                         <thead>
  32.                         <tr class="cart_menu">
  33.                             <td class="image">Article</td>
  34.                             <td class="description"></td>
  35.                             <td class="price">Prix</td>
  36.                             <td class="quantity">Quantité</td>
  37.                             <td class="total">Total</td>
  38.                             <td></td>
  39.                         </tr>
  40.                         </thead>
  41.                         <tbody>
  42.                         {% for a in articles %}
  43.                             <input type="hidden" name="ids[]" value="{{ a["obj"].id }}" />
  44.                             <tr>
  45.                                 <td class="cart_product">
  46.                                 <img src="{{ asset(a["obj"].imgPrincipale) }}" style="max-height: 100px;max-width: 100px;" alt="">
  47.                                 </td>
  48.                                 <td class="cart_description">
  49.                                     <h4>{{ a["pan"].designation }}</h4>
  50.                                     <p>Unité : {{ a["pan"].unite }}</p>
  51.                                 </td>
  52.                                 <td class="cart_price">
  53.                                     <p>{{ a["pan"].prixU }} DH</p>
  54.                                     <input type="hidden" name="prix_u" id="prix_u" value="{{ a["pan"].prixU }}"/>
  55.                                 </td>
  56.                                 <td class="cart_quantity">
  57.                                     <div class="input-group" style="width: 50%;">
  58.                                         <div class="input-group-btn">
  59.                                             <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant-{{ a["obj"].id }}">
  60.                                                 <i class="fa fa-minus"></i>
  61.                                             </button>
  62.                                         </div>
  63.                                         <input type="text" name="quant-{{ a["obj"].id }}" class="form-control input-number"  onchange="calculTotal(this)" id="qte" value="{{ a["pan"].qte }}" min="{{ a["obj"].minQte }}" max="150" unite="{{ a["obj"].unite }}">
  64.                                         <div class="input-group-btn">
  65.                                             <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant-{{ a["obj"].id }}">
  66.                                                 <i class="fa fa-plus"></i>
  67.                                             </button>
  68.                                         </div>
  69.                                     </div>
  70.                                 </td>
  71.                                 <td class="cart_total">
  72.                                     <input class="cart_total_price" disabled type="text" name="total_price" id="total_price" value="{{ a["pan"].prixTotal }}"/>
  73.                                     {# <p class="cart_total_price">{{ a["pan"].prixTotal }} DH</p> #}
  74.                                 </td>
  75.                                 <td class="cart_delete">
  76.                                     <a class="cart_quantity_delete text-danger"  onclick="deleteFromPanier({{ a["obj"].id }})"><i class="fa fa-times"></i></a>
  77.                                 </td>
  78.                             </tr>
  79.                         {% endfor %}
  80.                         </tbody>
  81.                     </table>
  82.                 </form>
  83.             </div>
  84.             {% else %}
  85.                 <div class="text-center">
  86.                     <img src="{{ asset("bundles/Frontoffice/img/emptyCart.webp") }}" /><br/>
  87.                     <a href="/" class="btn btn-primary text-white">Votre panier est vide Veuillez cliquer ici pour faire vos achats</a><br/><br/>
  88.                 </div>
  89.             {% endif %}
  90.         </div>
  91.     </section> <!--/#cart_items-->
  93.     {% if articles|length > 0 %}
  94.         <section id="do_action">
  95.             <div class="container">
  96.                 <div class="heading">
  97.                     <h3></h3>
  98.                     <p></p>
  99.                 </div>
  100.                 <div class="row">
  101.                     <div class="col-sm-6">
  102.                         <div class="chose_area signup-form" style="padding-left: 15px;">
  103.                             <form method="POST">
  104.                                 <input type="hidden" name="formName" value="codePromo">
  105.                                 <span class="total ">Code promo : </span>
  106.                                 <input type="text"  class="form-control"  name="codePromo" style="width: 100%;margin-bottom: 5px;margin-top: 8px;" value="{{ codePromo }}">
  107.                                 <button type="submit" class="validateAchat text-white btn btn-primary">Valider</button>
  108.                                 {% if response != "OK" and response != "" %}
  109.                                     <div class="error">
  110.                                         {{ response }}
  111.                                     </div>
  112.                                 {% endif %}
  113.                             </form>
  114.                         </div>
  115.                     </div>
  116.                     <div class="col-lg-6" align="right ">
  117.                         <b>Total : </b> {{ total|number_format(2, '.', '') }} DH<br/><br/>
  118.                         <b>Livraison : </b> {{ livraison }} DH<br/><br/>
  119.                         {% if totalPromo != 0 %}
  120.                             <b>Promotion : </b> {{ totalPromo|number_format(2, '.', '') }} DH<br/><br/>
  121.                         {% endif %}
  122.                         <span style="font-weight: bold;" class="text-secondary">
  123.                             <b>Total à payer : </b> {{ total + livraison + totalPromo }} DH<br/><br/>
  124.                         </span>
  125.                     </div>
  126.                     <div class="row">
  127.                         <div class="total_area text-center">
  128.                             <a class="btn btn-info update text-white" onclick="document.getElementById('updateForm').submit();">Mettre à jour</a>
  129.                             <a class="btn btn-primary check_out text-white" onclick="commander()">Commander</a>
  130.                         </div>
  131.                      </div>
  132.                 </div>
  133.             </div>
  134.         </section>
  135.     {% endif %}
  137. {% endblock %}
  138. {% block js %}
  140.     <script type="text/javascript">
  142.         {% if articles|length > 0 %}
  144.         var codePromo = "{{ codePromo }}";
  145.         /*----------*/
  147.         $('.btn-number').click(function(e){
  148.             e.preventDefault();
  150.             fieldName = $(this).attr('data-field');
  151.             type      = $(this).attr('data-type');
  152.             var input = $("input[name='"+fieldName+"']");
  153.             var currentVal = parseFloat(input.val());
  154.             if (!isNaN(currentVal)) {
  155.                 var toAddOrDel = 0.5;
  158.                 if(input.attr('unite').toLowerCase().replace(/\s/g, '') == "u" || input.attr('unite').toLowerCase().replace(/\s/g, '') == "unité" || input.attr('unite').toLowerCase().replace(/\s/g, '') == "unite"){
  159.                     toAddOrDel = 1;
  160.                 }
  163.                 if(type == 'minus') {
  165.                     if(currentVal > input.attr('min')) {
  166.                         input.val(currentVal - toAddOrDel).change();
  167.                     }
  168.                     if(parseFloat(input.val()) == input.attr('min')) {
  169.                         $(this).attr('disabled', true);
  170.                     }
  172.                 } else if(type == 'plus') {
  174.                     if(currentVal < input.attr('max')) {
  175.                         input.val(currentVal + toAddOrDel).change();
  176.                     }
  177.                     if(parseFloat(input.val()) == input.attr('max')) {
  178.                         $(this).attr('disabled', true);
  179.                     }
  181.                 }
  182.             } else {
  183.                 input.val(0);
  184.             }
  185.         });
  186.         $('.input-number').focusin(function(){
  187.             $(this).data('oldValue', $(this).val());
  188.         });
  189.         {# $('.input-number').change(function() {
  191.             minValue =  parseFloat($(this).attr('min'));
  192.             maxValue =  parseFloat($(this).attr('max'));
  193.             valueCurrent = parseFloat($(this).val());
  194.             console.log(minValue);
  195.             name = $(this).attr('name');
  196.             if(valueCurrent >= minValue) {
  197.                 $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
  198.             } else {
  199.                 console.log('error');
  200.                 Swal.fire({
  201.                     icon: 'error',
  202.                     title: 'Oops...',
  203.                     text: "Désolé, la valeur minimale a été atteinte",
  204.                 });
  205.                 $(this).val($(this).data('oldValue'));
  206.             }
  207.             if(valueCurrent <= maxValue) {
  208.                 $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
  209.             } else {
  210.                 console.log('error');
  211.                 Swal.fire({
  212.                     icon: 'error',
  213.                     title: 'Oops...',
  214.                     text: "Désolé, la valeur maximale a été atteinte",
  215.                 });
  216.                 $(this).val($(this).data('oldValue'));
  217.             }
  220.         }); #}
  221.         $(".input-number").keydown(function (e) {
  222.             if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
  223.                     (e.keyCode == 65 && e.ctrlKey === true) ||
  224.                     (e.keyCode >= 35 && e.keyCode <= 39)) {
  225.                 return;
  226.             }
  227.             // Ensure that it is a number and stop the keypress
  228.             if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
  229.                 e.preventDefault();
  230.             }
  231.         });
  233.         function calculTotal(input)
  234.         {
  236.             var row = input.closest("tr");
  237.             var cart_price = row.querySelector(".cart_price");
  238.             var prix_u = parseFloat(cart_price.querySelector("input[name='prix_u']").value.replace(",", "."));
  239.             var cart_quantity = row.querySelector(".cart_quantity");
  240.             var qte = parseFloat(cart_quantity.querySelector("input[id='qte']").value.replace(",", "."));
  241.             var cart_quantity = row.querySelector(".cart_total");
  242.             var total_price_input = cart_quantity.querySelector("input[name='total_price']") ;
  243.             
  244.             var minQte = parseInt(input.getAttribute('min'));
  245.             var maxQte = parseInt(input.getAttribute('max'));
  247.             if (!isNaN(prix_u) && !isNaN(qte) && qte >= minQte && qte <= maxQte) {  
  248.                     var total_price = (prix_u * qte).toFixed(2);
  249.                     total_price_input.value = total_price;
  250.                     document.getElementById('updateForm').submit();                
  251.             }
  252.         }
  253.         //------------
  255.         function deleteFromPanier(id){
  256.             Swal.fire({
  257.                 title: "Êtes-vous sûr ?",
  258.                 text: "La suppression du produit.",
  259.                 icon: "warning",
  260.                 showCancelButton: true,
  261.                 confirmButtonColor: "#d33",
  262.                 cancelButtonColor: "#3085d6",
  263.                 confirmButtonText: "Supprimer",
  264.                 cancelButtonText: "Annuler",
  265.             }).then((result) => {
  266.                 if (result.isConfirmed) {
  268.                     $.ajax({
  269.                     type: 'get',
  270.                     url: '/deleteFromPanier/?id='+id,
  271.                         success: function (data) {
  273.                             if(data == 'OK')
  274.                             {
  275.                                 window.location.reload();
  277.                             }
  278.                             else
  279.                             {
  280.                                 Swal.fire({
  281.                                 icon: 'error',
  282.                                 title: 'Oops...',
  283.                                 text: data,
  284.                                 })
  286.                             }
  288.                         },
  289.                         error: function (xhr, ajaxOptions, thrownError) {
  290.                             Swal.fire({
  291.                                 icon: 'error',
  292.                                 title: 'Oops...',
  293.                                 text: "une erreur s'est produite",
  294.                                 })
  295.                         }
  296.                     });
  297.                 }
  298.             });
  299.         }
  301.         function commander(){
  302.             window.location= "/validerCommande/?p={{ codePromo }}";
  303.             /*noty({
  304.                 text: 'Etes vous sûr de vouloir valider votre commande ?',
  305.                 type: 'confirm',
  306.                 theme: 'relax',
  307.                 layout: 'center',
  308.                 animation: {
  309.                     open: 'animated bounceInDown',
  310.                     close: 'animated bounceOutUp', // jQuery animate function property object
  311.                     easing: 'swing', // easing
  312.                     speed: 200 // opening & closing animation speed
  313.                 },
  314.                 buttons     : [
  315.                     {addClass: 'btn btn-success', text: 'Oui', onClick: function ($noty) {
  316.                         $.ajax({
  317.                             type: 'get',
  318.                             url: '/commander/?codePromo='+codePromo,
  319.                             success: function(data){
  320.                                 if(data == "OK"){
  322.                                     var msg = "Votre commande est enregistrée avec succès";
  323.                                     document.getElementById("successMsg").innerHTML = msg;
  324.                                     $("#successMsg").css("display","block");
  325.                                     $("#errorMsg").css("display","none");
  326.                                     setTimeout(function(){ window.location.href="/mesCommandes/" ;} , 1000);
  328.                                 }
  329.                                 else if(data == "NO1"){
  330.                                     var msg = "Veillez vous connecter avant de valider votre commande <br><a href='/account/'>Cliquez ici</a>";
  331.                                     document.getElementById("errorMsg").innerHTML = msg;
  332.                                     $("#successMsg").css("display","none");
  333.                                     $("#errorMsg").css("display","block");
  334.                                 }
  335.                                 else{
  336.                                     var msg = data;
  337.                                     document.getElementById("errorMsg").innerHTML = msg;
  338.                                     $("#successMsg").css("display","none");
  339.                                     $("#errorMsg").css("display","block");
  340.                                 }
  341.                             }
  342.                         });
  343.                         $noty.close();
  345.                     }
  346.                     },
  347.                     {
  348.                         addClass: 'btn btn-danger', text: 'Non', onClick: function ($noty) {
  349.                             $noty.close();
  350.                         }
  351.                     }
  352.                 ]
  353.             });*/
  354.         }
  355.         {% endif %}
  356.     </script>
  358. {% endblock %}