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

Open in your IDE?
  1. {% extends base ~"/base.html.twig" %} 
  3. {% block title %}Suivre ma commande{% endblock %}
  4. {% block main %}
  5. <style>
  6.     .card {
  7.         z-index: 0;
  8.         background-color: #ECEFF1;
  9.         padding-bottom: 20px;
  10.         margin-top: 20px;
  11.         margin-bottom: 90px;
  12.         border-radius: 10px;
  13.     }
  15.     .top {
  16.         padding-top: 40px;
  17.         padding-left: 13% !important;
  18.         padding-right: 13% !important;
  19.     }
  21.     /*Icon progressbar*/
  23.     #progressbar {
  24.         margin-bottom: 30px;
  25.         overflow: hidden;
  26.         color: #455A64;
  27.         padding-left: 0px;
  28.         margin-top: 30px;
  29.     }
  31.     #progressbar li {
  32.         list-style-type: none;
  33.         font-size: 13px;
  34.         width: 25%;
  35.         float: left;
  36.         position: relative;
  37.         font-weight: 400;
  38.     }
  40.     #progressbar .step0:before {
  41.         font-family: FontAwesome;
  42.         content: "\f10c";
  43.         color: #fff;
  44.     }
  46.     #progressbar li:before {
  47.         width: 40px;
  48.         height: 40px;
  49.         line-height: 45px;
  50.         display: block;
  51.         font-size: 20px;
  52.         background: #C5CAE9;
  53.         border-radius: 50%;
  54.         margin: auto;
  55.         padding: 0px;
  56.     }
  58.     /*ProgressBar connectors*/
  60.     #progressbar li:after {
  61.         content: '';
  62.         width: 100%;
  63.         height: 12px;
  64.         background: #C5CAE9;
  65.         position: absolute;
  66.         left: 0;
  67.         top: 16px;
  68.         z-index: -1;
  69.     }
  71.     #progressbar li:last-child:after {
  72.         border-top-right-radius: 10px;
  73.         border-bottom-right-radius: 10px;
  74.         position: absolute;
  75.         left: -50%;
  76.     }
  78.     #progressbar li:nth-child(2):after,
  79.     #progressbar li:nth-child(3):after {
  80.         left: -50%;
  81.     }
  83.     #progressbar li:first-child:after {
  84.         border-top-left-radius: 10px;
  85.         border-bottom-left-radius: 10px;
  86.         position: absolute;
  87.         left: 50%;
  88.     }
  90.     #progressbar li:last-child:after {
  91.         border-top-right-radius: 10px;
  92.         border-bottom-right-radius: 10px;
  93.     }
  95.     #progressbar li:first-child:after {
  96.         border-top-left-radius: 10px;
  97.         border-bottom-left-radius: 10px;
  98.     }
  100.     /*Color number of the step and the connector before it*/
  102.     #progressbar li.active:before,
  103.     #progressbar li.active:after {
  104.         background: #651FFF;
  105.     }
  107.     #progressbar li.active:before {
  108.         font-family: FontAwesome;
  109.         content: "\f00c";
  110.     }
  112.     .icon-track {
  113.         width: 60px;
  114.         height: 60px;
  115.         margin-right: 15px;
  116.     }
  118.     .icon-content {
  119.         padding-bottom: 20px;
  120.     }
  122.     @media screen and (max-width: 992px) {
  123.         .icon-content {
  124.             width: 50%;
  125.         }
  126.     }
  127. </style>
  128. <main class="main">
  129.     <nav aria-label="breadcrumb" class="breadcrumb-nav mb-2">
  130.         <div class="container">
  131.             <ol class="breadcrumb">
  132.                 <li class="breadcrumb-item">
  133.                     <a href="/">{{'Home'|trans}}</a>
  134.                 </li>
  135.                 <li class="breadcrumb-item active" aria-current="page">{{ 'Track my order'|trans }}</li>
  136.             </ol>
  137.         </div>
  138.         <!-- End .container -->
  139.     </nav>
  140.     <!-- End .breadcrumb-nav -->
  141.     <div class="page-content">
  143.         <div id="track-order" class="container">
  144.             <h3>Suivre une commande</h3>
  145.             <div class="form-group">
  146.                 <label for="" class="required">{{'Number'|trans}}</label>
  147.                 <input type="text" value="{{ order is defined ? order.number:''}}" id="order-number" name="order-number"
  148.                     required="required" autocomplete="email" class="form-control">
  149.                 <small id="order-number-help" class="text-danger"></small>
  150.             </div>
  151.             <div>
  152.                 <small>
  153.                     {{'Enter your order number'|trans}}.
  154.                 </small>
  155.             </div>
  156.             <button class="btn-send-order-number btn btn-primary">{{'Send order number'|trans}}</button>
  157.         </div>
  158.         {% if app.request.get('_route') == 'track_index' %}
  159.         <div id="track-show"></div>
  160.         {% else %}
  161.         <div id="track-show">
  162.             {% include base ~ "/track/_track_view.html.twig" %}
  163.         </div>
  164.         {% endif %}
  165.     </div>
  166. </main>
  167. {% endblock %}
  169. {% block javascripts %}
  170. <script type="text/javascript">
  171.     $(document).ready(function () {
  173.         $(document).on('click', '.btn-send-order-number', function () {
  174.             let number = $('#order-number').val()
  176.             if (number.length == '') {
  177.                 Swal.fire({
  178.                     title: 'Oups !',
  179.                     text: 'Entrer un nombre',
  180.                     icon: 'warning',
  181.                     showConfirmButton: false,
  182.                     timer: 2000
  183.                 })
  184.                 $('#order-number-help').text('Entrer un numbre.')
  185.                 $('#track-show').html('')
  186.                 return false
  187.             }
  188.             if (!validation.isNumber(number)) {
  189.                 Swal.fire({
  190.                     title: 'Oups !',
  191.                     text: 'Entrer un nombre',
  192.                     icon: 'warning',
  193.                     showConfirmButton: false,
  194.                     timer: 2000
  195.                 })
  196.                 $('#order-number-help').text('Entrer un numbre.')
  197.                 $('#track-show').html('')
  198.                 return false
  199.             }
  200.             $.ajax({
  201.                 url: '/js/track-my-order/' + number,
  202.                 method: 'POST',
  203.                 beforeSend: function () {
  204.                     $('.js-loader-text').text('Vérification en cour ...')
  205.                     $('.js-loader').css('display', 'flex')
  206.                 },
  207.                 success: function (data) {
  208.                     $('.js-loader').css('display', 'none')
  209.                     if (data.reponse) {
  210.                         $('#track-show').html(data.content)
  211.                         Swal.fire({
  212.                             title: 'Bien joué !',
  213.                             text: 'Chargement terminé',
  214.                             icon: 'success',
  215.                             showConfirmButton: false,
  216.                             timer: 2000
  217.                         })
  218.                     } else {
  219.                         $('#order-number-help').text('Numéro incorrect')
  220.                         $('#track-show').html('')
  221.                     }
  222.                     $('#order-number-help').text('')
  223.                 },
  224.                 error: function () {
  225.                     Swal.fire({
  226.                         title: 'Oups !',
  227.                         text: 'Entrer un nombre',
  228.                         icon: 'error',
  229.                         showConfirmButton: false,
  230.                         timer: 2000
  231.                     })
  232.                     $('#order-number-help').text('Numéro incorrect')
  233.                     $('#track-show').html('')
  234.                     $('.js-loader').css('display', 'none')
  235.                 }
  236.             })
  237.         })
  239.         var validation = {
  240.             isEmailAddress: function (str) {
  241.                 var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  242.                 return pattern.test(str);  // returns a boolean
  243.             },
  244.             isNotEmpty: function (str) {
  245.                 var pattern = /\S+/;
  246.                 return pattern.test(str);  // returns a boolean
  247.             },
  248.             isNumber: function (str) {
  249.                 var pattern = /^\d+\.?\d*$/;
  250.                 return pattern.test(str);  // returns a boolean
  251.             },
  252.             isSame: function (str1, str2) {
  253.                 return str1 === str2;
  254.             }
  255.         };
  256.     })
  257. </script>
  258. {% endblock %}