templates/main/cart/index.html.twig line 1

Open in your IDE?
  1. {% extends base ~"/base.html.twig" %}
  2. {% if app.request.session.get('shipping') %}
  3. {% set delivery = app.request.session.get('shipping') %}
  4. {% endif %}
  5. {% block title %}{{'Cart'|trans}}
  6. {% endblock %}
  7. {% block main %}
  8. <main class="main">
  9.     <!-- End .page-header -->
  10.     <nav aria-label="breadcrumb" class="breadcrumb-nav">
  11.         <div class="container">
  12.             <ol class="breadcrumb">
  13.                 <li class="breadcrumb-item">
  14.                     <a href="{{ path('home') }}">{{'Home'|trans}}</a>
  15.                 </li>
  16.                 <li class="breadcrumb-item">
  17.                     <a href="{{ path('articles') }}">{{'Shop'|trans}}</a>
  18.                 </li>
  19.                 <li class="breadcrumb-item active" aria-current="page">{{'Shopping Cart'|trans}}</li>
  20.             </ol>
  21.         </div>
  22.         <!-- End .container -->
  23.     </nav>
  24.     <!-- End .breadcrumb-nav -->
  25.     <div class="page-content">
  26.         <div class="cart">
  27.             <div class="container">
  28.             
  29.                 {% include "includes/_alerte.html.twig" %}
  30.                 {# {% if app.request.session.get('panier') %} #}
  31.                 <div class="row">
  32.                     <div class="col-lg-9">
  33.                         {% if app.request.session.get('panier') %}
  34.                         <form class="form-row" action="" method="post">
  35.                         <table class="table table-cart table-mobile">
  36.                             <thead>
  37.                                 <tr>
  38.                                     <th>{{'Product'|trans}}</th>
  39.                                     {# <th>{{'Price'|trans}}</th> #}
  40.                                     <th>{{'Quantity'|trans}}</th>
  41.                                     <th>Total</th>
  42.                                     <th></th>
  43.                                 </tr>
  44.                             </thead>
  45.                             <tbody>
  46.                                 {% for item in items %}
  47.                                 <tr>
  48.                                     <td class="product-col" style="width:45%">
  49.                                     
  50.                                         <div class="product">
  51.                                             <figure class="product-media">
  52.                                                 <a href="#">
  53.                                                     {% for img in item.article.images|slice(0,1) %}
  54.                                                     <img src="{{ asset('img/article/' ~ img.name) }}"        alt="{{ item.article.title }}">
  55.                                                     {% else %}
  56.                                                     <img src="{{ asset('img/vide.png') }}"
  57.                                                         alt="{{ item.article.title }}">
  58.                                                     {% endfor %}
  59.                                                 </a>
  60.                                             </figure>
  61.                                             <h3 class="product-title">
  62.                                                 <a href="#">{{ item.article.title }}</a> <br>
  63.                                                 
  64.                                                 {% if item.article.reduction > 0 %}
  65.                                                 <span class="new-price">{{  item.article.newPrice| number_format(0,'.','
  66.                                                     ') ~ ' ' ~ site.current_name }}
  67.                                                 </span>
  68.                                                 {# <span class="old-price">{{ item.article.formatterPrice }}</span> #}
  69.                                                 {% else %}
  70.                                                 <span class="new-price">{{ item.article.newPrice| number_format(0,'.','
  71.                                                     ') ~ ' ' ~ site.current_name }}
  72.                                                 </span>
  73.                                                 {% endif %}
  74.                                             </h3>
  75.                                             
  76.                                             <!-- End .product-title -->
  77.                                         </div>
  78.                                         <!-- End .product -->
  79.                                         <small id="helpId" class="text-muted">En Stock:
  80.                                             {{ item.article.quantity }}
  81.                                         </small>
  82.                                     </td>
  83.                                     {# <td class="price-col">
  84.                                         {% if item.article.reduction > 0 %}
  85.                                         <span class="new-price">{{ item.article.newPrice| number_format(0,'.',' ') }}
  86.                                         </span>
  87.                                         <span class="old-price">{{ item.article.formatterPrice }}</span>
  88.                                         {% else %}
  89.                                         <span class="new-price">{{ item.article.newPrice| number_format(0,'.',' ') }}
  90.                                         </span>
  91.                                         {% endif %}
  92.                                         {{ site.current}}
  93.                                     </td> #}
  94.                                     <td class="quantity-col">
  95.                                         {# <form class="form-row" action="" method="post"> #}
  96.                                             <div class="form-group col-md-12">
  97.                                                 <div class="row">
  98.                                                     <div class="col-md-7 col-7">
  99.                                                         <input type="hidden" name="article_id[]"
  100.                                                             value="{{ item.article.id }}">
  101.                                                         <input type="number" class="form-control" min="1"
  102.                                                             max="{{ item.article.quantity }}" name="qty[]"
  103.                                                             value="{{ item.quantite }}">
  104.                                                     </div>
  105.                                                     {# <div class="col-5 col-md-5">
  106.                                                         <button type="submit" title="Appliquer"
  107.                                                             class="text-center btn-success mt-1">
  108.                                                             <i class="icon-refresh"></i>
  109.                                                         </button>
  110.                                                     </div> #}
  111.                                                 </div>
  112.                                             </div>
  113.                                         {# </form> #}
  114.                                     </td>
  115.                                     <td class="total-col">{{  (item.article.newPrice * item.quantite) |
  116.                                         number_format(0,'.',' ') ~  ' ' ~ site.current_name}}
  117.                                     </td>
  118.                                     <td class="remove-col">
  119.                                         <a href="{{ path('cart_delete',{id:item.article.id}) }}" class="btn-remove">
  120.                                             <i class="icon-close text-danger"></i>
  121.                                         </a>
  122.                                     </td>
  123.                                 </tr>
  124.                             </tbody>
  125.                             </tr>
  126.                             {% endfor %}
  127.                             </tbody>
  128.                         </table>
  129.                         <div class="cart-bottom">
  130.                                     {# <div class="cart-discount">
  131.                                         <form action="#">
  132.                                             <div class="input-group">
  133.                                                 <input type="text" class="form-control" required="" placeholder="coupon code">
  134.                                                 <div class="input-group-append">
  135.                                                     <button class="btn btn-outline-primary-2" type="submit"><i class="icon-long-arrow-right"></i></button>
  136.                                                 </div><!-- .End .input-group-append -->
  137.                                             </div><!-- End .input-group -->
  138.                                         </form>
  139.                                     </div><!-- End .cart-discount --> #}
  140.                                     <button href="#" type="submit" class="btn btn-outline-dark-2"><span>Mettre à jour le panier</span><i class="icon-refresh"></i></button>
  141.                                 </div>
  142.                                 </form> 
  143.                         {% else %}
  144.                         <div class="">
  145.                             <div class="card-body text-center">
  146.                                 <span class="btn bg-primary btn-primary p-5 rounded-circle">
  147.                                     <i class="icon-shopping-cart" style="font-size:7rem"></i>
  148.                                 </span>
  149.                                 <h3>{{'Empty cart'|trans }}</h3>
  150.                                 <p>Ajouter au moins un article au panier</p>
  151.                                 <a href="{{ path('articles') }}" class="btn btn-primary mt-2 ">Tous nos
  152.                                     produits</a>
  153.                             </div>
  154.                         </div>
  155.                         {% endif %}
  156.                     </div>
  157.                     <!-- End .col-lg-9 -->
  158.                     {% if items|length > 0 %}
  159.                         <aside class="col-lg-3">
  160.                             <form action="{{ path('order_client_new') }}" id="form_order_client_new" method="post">
  161.                                 <div class="summary summary-cart">
  162.                                     <h3 class="summary-title">{{'Cart Total'|trans}}</h3>
  163.                                     <!-- End .summary-title -->
  164.                                     <div class="row">
  165.                                         <div class="col-md-12">
  166.                                             <p class="h6 mt-3">Lieu de livraison</p>
  167.                                             {# {% if is_granted('ROLE_CLIENT')  %} #}
  168.                                             <div class="shipping_box">
  169.                                                 {# Selection des pays #}
  170.                                                 {# {% include base ~ '/cart/ajax/_select_country.html.twig' %} #}
  171.                                                 {# Selection un pays #}
  172.                                                 {% include base ~ '/cart/ajax/_select_city.html.twig' %}
  173.                                                 {# Selection des ville en fonction des pays #}
  174.                                                 {% include base ~ '/cart/ajax/_select_street.html.twig'%}
  175.                                                 <div class="">
  176.                                                     <div id="loader-street-amount" class="text-center loader">
  177.                                                         <i class="fas fa-2x fa-sync-alt fa-spin"></i>
  178.                                                     </div>
  179.                                                     <div class="js-amount">
  180.                                                     {# {% if delivery is defined %}
  181.                                                         <p>Montant de la livraison:</p>
  182.                                                         <p class="text-center">
  183.                                                             <span class="text-danger font-weight-bold">
  184.                                                                 {{ (delivery is defined) ? delivery.shippingAmount.amount|number_format(2,'.',' ') : '' }}
  185.                                                                 {{ site.current_name  }}
  186.                                                             </span>
  187.                                                         </p>
  188.                                                     {% endif %} #}
  189.                                                     </div>
  190.                                                 </div>
  191.                                             </div>
  192.                                             {# {% else %} #}
  193.                                             
  194.                                             {# {% endif %} #}
  195.                                         </div>
  196.                                         <div class="col-lg-12">
  197.                                             <p class="h6 mt-3">Payement à la livraison</p>
  198.                                         </div>
  199.                                     </div>
  200.                                     <table class="table table-summary">
  201.                                         <tbody>
  202.                                             <tr class="summary-subtotal">
  203.                                                 <td>{{'Subtotal'|trans}}:</td>
  204.                                                 <td style="min-width:max-content">
  205.                                                     {{ total|price_format ~ ' ' ~ site.current_name }}
  206.                                                 </td>
  207.                                             </tr>
  208.                                             <tr class="summary-subtotal">
  209.                                                 <td style="min-width:max-content">Livraison:</td>
  210.                                                 <td><span class="montant-livraison">Non définie</span></td>
  211.                                             </tr>
  212.                                             <!-- End .summary-shipping-estimate -->
  213.                                             <tr class="summary-total">
  214.                                                 <td>Total:</td>
  215.                                                 <td>
  216.                     
  217.                                                     <span class="text-danger total">
  218.                                                         {{ (total)|price_format ~ site.current_name  }}
  219.                                                     </span>
  220.                                                 </td>
  221.                                             </tr>
  222.                                             <!-- End .summary-total -->
  223.                                         </tbody>
  224.                                     </table>
  225.                                     <!-- End .table table-summary -->
  226.                                     {% if app.request.session.get('panier') %}
  227.                                     <button type="submit" id="btn-submit-order"
  228.                                         class="btn btn-outline-primary-2 btn-order btn-block">COMMANDER</button>
  229.                                     {% endif %}
  230.                                     {# <a href="{{ path('client_payment_stripe') }}"
  231.                                         class="btn btn-outline-primary-2 btn-order btn-block">PAYER</a> #}
  232.                                 </div>
  233.                                 <!-- End .summary -->
  234.                             </form>
  235.                             <a href="{{ path('articles') }}" class="btn btn-outline-dark-2 btn-block mb-3">
  236.                                 <span>CONTINUEZ VOS COURSES</span>
  237.                                 <i class="icon-refresh"></i>
  238.                             </a>
  239.                         </aside>
  240.                         <!-- End .col-lg-3 -->
  241.                     {% endif %}
  242.                     
  243.                 </div>
  244.                 <!-- End .row -->
  245.                 {# {% endif %} #}
  246.             </div>
  247.             <!-- End .container -->
  248.         </div>
  249.         <!-- End .cart -->
  250.     </div><!-- End .page-content -->
  251. </main>{% endblock %}
  252. {% block javascripts %}
  253. {% if not is_granted('ROLE_CLIENT') %}
  254. <script>
  255.     $(document).ready(function () {
  256.         $(document).on('click', '#btn-submit-order', function (e) {
  257.             e.preventDefault()
  258.             Swal.fire({
  259.                 title: 'Oups !',
  260.                 text: 'Veillez vous connecter ou creer un compte.',
  261.                 icon: 'info',
  262.                 confirmButtonText: 'Se connecter ou creer un compte',
  263.             }).then((result) => {
  264.                 $('#signin-modal').modal('show')
  265.             })
  266.         })
  267.     })
  268. </script>
  269. {% else %}
  270. <script>
  271.     $(document).ready(function () {
  272.         $(document).on('click', '#btn-submit-order', function (e) {
  273.             e.preventDefault()
  274.             if ($('#streets').val() == '0') {
  275.                 Swal.fire(
  276.                     'Oups !',
  277.                     'Choississez un lieu de livraison',
  278.                     'warning'
  279.                 )
  280.                 return
  281.             }
  282.             Swal.fire({
  283.                 title: 'Etes vous sur ?',
  284.                 text: 'Vous etes sur le point de confirmer une commande.',
  285.                 icon: 'question',
  286.                 showCancelButton: true,
  287.                 confirmButtonColor: '#3085d6',
  288.                 cancelButtonColor: '#d33',
  289.                 cancelButtonText: 'Non',
  290.                 confirmButtonText: 'CONFIRMER',
  291.             }).then((result) => {
  292.                 if (result.isConfirmed) {
  293.                     $('#form_order_client_new').submit()
  294.                 }
  295.             })
  296.         })
  297.     })
  298. </script>
  299. {% endif %}
  300. <script>
  301.     $(document).ready(function () {
  302.         function total(val = 0) {
  303.             let total = "{{ total }}" + val;
  304.             return total
  305.         }
  306.         // $('#js-select-city').hide()
  307.         //  $('#js-select-street').hide()
  308.         $(document).on('change','#select-country',function(){
  309.             //on recupere l'id de la ville
  310.             let value = $(this).val()
  311.             // alert(value)
  312.             $.ajax({
  313.                 url: "{{ path('client_shipping') }}",
  314.                 method: 'POST',
  315.                 dataType: 'json',
  316.                 data: {
  317.                     id_country: value,
  318.                 },
  319.                 beforeSend: function () {
  320.                     // $('#loader-select-country').show()
  321.                     // $('#js-select-country').hide()
  322.                     $('#js-select-street').hide()
  323.                     $('#js-select-city').hide()
  324.                     $('.js-amount').hide()
  325.                 },
  326.                 success: function (data) {
  327.                     console.log(data)
  328.                     // $('#loader-select-country').hide()
  329.                     // $('.select-country').remove()
  330.                     $('#js-select-city').html(data.response);
  331.                     // $('#js-select-country').show()
  332.                      $('#js-select-city').show()
  333.                      $('#loader-select-city').hide()
  334.                 }
  335.             }) // ./ajax
  336.         })
  337.         $(document).on('change', '#select-city', function () {
  338.             //on recupere l'id de la ville
  339.             let value = $(this).val()
  340.             // on envoie avec post
  341.             $.ajax({
  342.                 url: "{{ path('client_shipping') }}",
  343.                 method: 'POST',
  344.                 dataType: 'json',
  345.                 data: {
  346.                     id_city: value,
  347.                 },
  348.                 beforeSend: function () {
  349.                     $('#loader-select-city').show()
  350.                     $('#js-select-city').hide()
  351.                     $('.js-amount').hide()
  352.                 },
  353.                 success: function (data) {
  354.                     $('#loader-select-city').hide()
  355.                     // $('.select-street').remove()
  356.                     $('#js-select-street').html(data.response);
  357.                     $('#js-select-city').show()
  358.                     $('#js-select-street').show()
  359.                     
  360.                 }
  361.             }) // ./ajax
  362.         })
  363.         $(document).on('change', '#streets', function () {
  364.             let id = $(this).val()
  365.             $.ajax({
  366.                 url: "{{ path('client_shipping_amount') }}",
  367.                 method: "POST",
  368.                 dataType: 'json',
  369.                 data: {
  370.                     id_street: id,
  371.                     total: "{{ total }}"
  372.                 },
  373.                 beforeSend: function () {
  374.                     $('#loader-street-amount').show()
  375.                     $('.js-amount').hide()
  376.                 },
  377.                 success: function (data) {
  378.                     $('.js-amount').html(data.response).show()
  379.                     $('.montant-livraison').text(data.amount)
  380.                     $('.total').text(data.total)
  381.                     $('#loader-street-amount').hide()
  382.                     $('.total').text(data.total)
  383.                     $('.js-show-amount').text(data.amount2)
  384.                     console.log(data);
  385.                 }
  386.             })
  387.         })
  388.     })
  389. </script>
  390. {% endblock %}