templates/front/network/network.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  3. {% block linkcanonical %}
  4.     <link rel="canonical" href="{{ absolute_url(path('network')) }}">
  5. {% endblock %}
  7. {% block cssadicional %}{% endblock %}
  9. {% block classbody %}{% endblock %}
  11. {% block content %}
  12.     <section class="red_section">
  13.         <div class="repuestos_banner">
  14.             <div class="repuestos_container ww_center">
  15.                 <ul>
  16.                     <li><a href="{{ path('home') }}">Inicio</a></li>
  17.                     <li><span>/</span></li>
  18.                     <li><a href="{{ path('after_sales') }}">Post Venta</a></li>
  19.                     <li><span>/</span></li>
  20.                     <li><a class="active">Repuestos</a></li>
  21.                 </ul>
  22.                 <h2>{{ sd.title }}</h2>
  23.             </div>
  24.         </div>
  25.         <div class="red_section_container ww_center">
  26.             <div class="red_section_left">
  27.                 <div class="red_section_info">
  28.                     {% if sd.text1 %}
  29.                         <h3>{{ sd.text1 }}</h3>
  30.                     {% endif %}
  31.                     {% if sd.text2 %}
  32.                         <h4>{{ sd.text2 }}</h4>
  33.                     {% endif %}
  34.                     {% if sd.text3 %}
  35.                         <p>{{ sd.text3 }}</p>
  36.                     {% endif %}
  37.                 </div>
  38.                 <div class="red_section_items">
  39.                     {% for item in categories %}
  40.                         <div class="red_section_datos">
  41.                             <span class="red_section_ico">
  42.                                 <img src="{{ asset(item.icon|image_path) }}" width="" alt="{{ item.title }}">
  43.                             </span>
  44.                             <div class="red_section_text">
  45.                                 <h2>{{ item.title }}</h2>
  46.                                 {% if item.description %}
  47.                                     <p>{{ item.description }}</p>
  48.                                 {% endif %}
  49.                             </div>
  50.                         </div>
  51.                     {% endfor %}
  52.                 </div>
  53.                 <div class="red_section_select">
  54.                     <div class="red_section_select_val">
  55.                         <span class="icon-arrow_drop_down"></span>
  56.                         <select name="" id="department">
  57.                             <option value="all" selected>Todos los departamentos</option>
  58.                             {% for item in departments %}
  59.                                 <option value="{{ item.slug }}">{{ item.title }}</option>
  60.                             {% endfor %}
  61.                         </select>
  62.                     </div>
  63.                     <div class="red_section_select_val">
  64.                         <span class="icon-arrow_drop_down"></span>
  65.                         <select name="" id="city" disabled>
  66.                             <option value="all" selected>Todas las provincias</option>
  67.                         </select>
  68.                     </div>
  69.                 </div>
  70.                 <div class="red_titlte_mapa">
  71.                     <h2></h2>
  72.                 </div>
  73.                 <div class="red_section_mapa_responsive"></div>
  74.                 <div class="red_section_box" id="establishments">
  75.                     {% include 'front/network/establishment.html.twig' with {'establishments': establishments} %}
  76.                 </div>
  77.                 <div class="red_info_resultado" id="red_info_resultado" style="display: none;">
  78.                     <p>{{ sd.noResults }}</p>
  79.                 </div>
  80.             </div>
  81.             <div class="red_section_mapa">
  82.                 {% include 'front/network/map.html.twig' %}
  83.             </div>
  84.         </div>
  85.     </section>
  86. {% endblock %}
  88. {% block jsfinal %}
  89.     <script type="text/javascript">
  90.         let itemClick = false;
  91.         $('#Peru_Regions g').on('click', function () {
  92.             itemClick = true;
  93.             $('.st0').removeClass('is_active');
  94.             $(this).find('.st0').addClass('is_active');
  95.             const department = $(this).find('.st0').data('department');
  96.             const department_name = $(this).find('.st0').data('name');
  97.             if ($('#department option[value="' + department + '"]').length > 0) {
  98.                 $('#department').val(department).trigger('change');
  99.             } else {
  100.                 $('#department option:selected').prop('selected', false);
  101.                 updateEstablishmentsByDepartment(department);
  102.             }
  103.             $('.red_titlte_mapa h2').text(department_name);
  104.         })
  106.         let div = document.querySelector('.red_section_mapa');
  107.         function myFunction(x) {
  108.             if (x.matches) {
  109.                 document.querySelector('.red_section_mapa_responsive').appendChild(div)
  110.             } else {
  111.                 document.querySelector('.red_section_container').appendChild(div)
  112.             }
  113.         }
  114.         var x = window.matchMedia("(max-width: 1023px)")
  115.         myFunction(x)
  116.         x.addListener(myFunction)
  118.         $('#department').on('change', function () {
  119.             const department = $('#department').val();
  120.             if (department === 'all') {
  121.                 $('.st0').removeClass('is_active');
  122.                 updateAllEstablishments();
  123.             } else {
  124.                 updateCities(department);
  125.                 updateEstablishments(department, null);
  126.             }
  127.             const department_name = $('#department option:selected').text();
  128.             if (!itemClick) {
  129.                 $('.red_titlte_mapa h2').text(department_name);
  130.                 itemClick = false;
  131.             }
  132.             if ($('#p_' + department).length > 0) {
  133.                 $('.st0').removeClass('is_active');
  134.                 $('#p_' + department).addClass('is_active');
  135.             }
  136.         })
  138.         $('#city').on('change', function () {
  139.             const department = $('#department').val();
  140.             let city = $('#city').val();
  141.             if (city === 'all') {
  142.                 city = null;
  143.             }
  144.             updateEstablishments(department, city);
  145.         })
  147.         function updateCities(department) {
  148.             $.ajax({
  149.                 url: '{{ path('cities_by_department') }}',
  150.                 type: 'post',
  151.                 data: {department: department},
  152.                 beforeSend: function () {
  153.                     $('#department').prop('disabled', true);
  154.                     $('#city').html("").prop('disabled', true);
  155.                 },
  156.                 success: function (data) {
  157.                     $('#city').html(createCitySelect(data));
  158.                 },
  159.                 complete: function () {
  160.                     $('#department').prop('disabled', false);
  161.                     $('#city').prop('disabled', false);
  162.                 }
  163.             })
  164.         }
  166.         function updateEstablishments(department, city) {
  167.             if (city == null) {
  168.                 updateEstablishmentsByDepartment(department);
  169.             } else {
  170.                 updateEstablishmentsByCity(department, city);
  171.             }
  172.         }
  174.         const noResultsMessage = '{{ sd.noResults }}';
  175.         const noResultMessageContainer = $('#red_info_resultado');
  177.         function updateAllEstablishments() {
  178.             $.ajax({
  179.                 url: '{{ path('network_establishments') }}',
  180.                 type: 'post',
  181.                 beforeSend: function () {
  182.                     $('#department').prop('disabled', true);
  183.                     $('#city').prop('disabled', true);
  184.                     $('#establishments').html("");
  185.                     $('.red_info_resultado').hide();
  186.                 },
  187.                 success: function (data) {
  188.                     if (data) {
  189.                         $('#establishments').html(data);
  190.                     } else {
  191.                         $('.red_info_resultado').show();
  192.                     }
  193.                 },
  194.                 complete: function () {
  195.                     $('#department').prop('disabled', false);
  196.                 }
  197.             })
  198.         }
  200.         function updateEstablishmentsByDepartment(department) {
  201.             $.ajax({
  202.                 url: '{{ path('establishments_by_department') }}',
  203.                 type: 'post',
  204.                 data: {department: department},
  205.                 beforeSend: function () {
  206.                     $('#department').prop('disabled', true);
  207.                     $('#city').html("").prop('disabled', true);
  208.                     $('#establishments').hide().html("");
  209.                     $('.red_info_resultado').hide();
  210.                 },
  211.                 success: function (data) {
  212.                     if (data.status) {
  213.                         $('#establishments').show().html(data.content);
  214.                         $('#city').prop('disabled', false);
  215.                     } else {
  216.                         const message = data.message ? data.message : noResultsMessage;
  217.                         noResultMessageContainer.text(message);
  218.                         $('#establishments').hide();
  219.                         $('.red_info_resultado').show();
  220.                     }
  221.                 },
  222.                 complete: function () {
  223.                     $('#department').prop('disabled', false);
  224.                     $('#city').html(createCitySelect([]));
  225.                 }
  226.             })
  227.         }
  229.         function updateEstablishmentsByCity(department, city) {
  230.             $.ajax({
  231.                 url: '{{ path('establishments_by_city') }}',
  232.                 type: 'post',
  233.                 data: {department: department, city: city},
  234.                 beforeSend: function () {
  235.                     $('#department').prop('disabled', true);
  236.                     $('#city').prop('disabled', true);
  237.                     $('#establishments').html("");
  238.                     $('.red_info_resultado').hide();
  239.                 },
  240.                 success: function (data) {
  241.                     if (data.status) {
  242.                         $('#establishments').html(data.content);
  243.                     } else {
  244.                         const message = data.message ? data.message : noResultsMessage;
  245.                         noResultMessageContainer.text(message);
  246.                         $('.red_info_resultado').show();
  247.                     }
  248.                 },
  249.                 complete: function () {
  250.                     $('#department').prop('disabled', false);
  251.                     $('#city').prop('disabled', false);
  252.                 }
  253.             })
  254.         }
  256.         function createCitySelect(data) {
  257.             let options = "<option value=\"all\" selected>Todas las provincias</option>";
  258.             $.each(data, function (i, v) {
  259.                 options += "<option value=\"" + v['slug'] + "\">" + v['title'] + "</option>";
  260.             });
  261.             return options;
  262.         }
  263.     </script>
  264. {% endblock %}