templates/front/models/list.html.twig line 1

Open in your IDE?
  1. {% extends "front/_common/_base.html.twig" %}
  2. {% block linkcanonical %}
  3.     <link rel="canonical" href="{{ absolute_url(base_url) }}">
  4. {% endblock %}
  5. {% block cssadicional %}{% endblock %}
  6. {% block classbody %}{% endblock %}
  7. {% block content %}
  8.     <section class="listado">
  9.         {% set bannerDesktop = sd.bannerDesktop %}
  10.         {% set bannerTablet = sd.bannerTablet ?: bannerDesktop %}
  11.         {% set bannerMobile = sd.bannerMobile ?: bannerTablet %}
  12.         <div class="listado_banner listChangeImage" data-image="{{ asset(bannerDesktop|image_path) }};{{ asset(bannerTablet|image_path) }};{{ asset(bannerMobile|image_path) }}">
  13.         </div>
  14.         <div class="listado_nav">
  15.             <div class="listado_nav_center ww_center">
  16.                 <h2>¿Qué estás buscando?</h2>
  17.                 <div class="listado_nav_itms">
  18.                     <a href="{{ path('model_list') }}" class="listado_nav_itm {{ type == 'both' ? 'active' }}">
  19.                         <figure class="listado_nav_img">
  20.                             <img class="listado_default" src="{{ asset(menu_models.bothImage|image_path) }}" width="40" height="" alt="{{ sd.bothTitle ?: 'Todos' }}">
  21.                             <img class="listado_hover" src="{{ asset(menu_models.bothImageHover|image_path) }}" width="40" height="" alt="{{ sd.bothTitle ?: 'Todos' }}">
  22.                         </figure>
  23.                         <p>{{ sd.bothTitle ?: 'Todos' }}</p>
  24.                     </a>
  25.                     <a href="{{ path('model_trucks') }}" class="listado_nav_itm {{ type == constant('App\\Entity\\Model::TYPE_TRUCK') ? 'active' }}">
  26.                         <figure class="listado_nav_img">
  27.                             <img class="listado_default" src="{{ asset(menu_models.trucksImage|image_path) }}" width="40" height="" alt="{{ sd.trucksTitle ?: 'Camiones' }}">
  28.                             <img class="listado_hover" src="{{ asset(menu_models.trucksImageHover|image_path) }}" width="40" height="" alt="{{ sd.trucksTitle ?: 'Camiones' }}">
  29.                         </figure>
  30.                         <p>{{ sd.trucksTitle ?: 'Camiones' }}</p>
  31.                     </a>
  32.                     <a href="{{ path('model_buses') }}" class="listado_nav_itm {{ type == constant('App\\Entity\\Model::TYPE_BUS') ? 'active' }}">
  33.                         <figure class="listado_nav_img">
  34.                             <img class="listado_default" src="{{ asset(menu_models.busesImage|image_path) }}" width="40" height="" alt="{{ sd.busesTitle ?: 'Buses' }}">
  35.                             <img class="listado_hover" src="{{ asset(menu_models.busesImageHover|image_path) }}" width="40" height="" alt="{{ sd.busesTitle ?: 'Buses' }}">
  36.                         </figure>
  37.                         <p>{{ sd.busesTitle ?: 'Buses' }}</p>
  38.                     </a>
  39.                 </div>
  40.             </div>
  41.         </div>
  42.         <div class="listado_container">
  43.             <aside class="listado_aside">
  44.                 <h3 class="listado_class_responsive">Filtrar por:</h3>
  45.                 <div class="listado_links">
  46.                     {% set truck_model_filters = app.request.query.all.c_modelos is defined ? app.request.query.all.c_modelos|split(',') : [] %}
  47.                     {% set truck_traction_filters = app.request.query.all.c_tracciones is defined ? app.request.query.all.c_tracciones|split(',') : [] %}
  48.                     {% set truck_type_filters = app.request.query.all.c_tipos is defined ? app.request.query.all.c_tipos|split(',') : [] %}
  49.                     {% set truck_power_filters = app.request.query.all.c_potencias is defined ? app.request.query.all.c_potencias|split(',') : [] %}
  50.                     {% set truck_tonnage_filters = app.request.query.all.c_tonelajes is defined ? app.request.query.all.c_tonelajes|split(',') : [] %}
  51.                     {% set bus_model_filter = app.request.query.all.b_modelos is defined ? app.request.query.all.b_modelos|split(',') : [] %}
  52.                     {% set bus_pbv_filter = app.request.query.all.b_pbvs is defined ? app.request.query.all.b_pbvs|split(',') : [] %}
  53.                     {% set bus_power_filter = app.request.query.all.b_potencias is defined ? app.request.query.all.b_potencias|split(',') : [] %}
  54.                     {% set bus_tonnage_filter = app.request.query.all.b_toneladas is defined ? app.request.query.all.b_toneladas|split(',') : [] %}
  55.                     {% if truck_filter_model is defined %}
  56.                         <div class="listado_itm">
  57.                             <h2 class="listado_acordeon_open">MODELO DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
  58.                             <ul class="listado_acordeon_content">
  59.                                 {% for item in truck_filter_model %}
  60.                                     <li><a class="model_filter truck_filter truck_filter_model {{ item.slug in truck_model_filters ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  61.                                 {% endfor %}
  62.                                 <li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
  63.                             </ul>
  64.                         </div>
  65.                     {% endif %}
  66.                     {% if truck_filter_traction is defined %}
  67.                         <div class="listado_itm">
  68.                             <h2 class="listado_acordeon_open">TRACCIÓN DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
  69.                             <ul class="listado_acordeon_content">
  70.                                 {% for item in truck_filter_traction %}
  71.                                     <li><a class="model_filter truck_filter truck_filter_traction {{ item.slug in truck_traction_filters ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  72.                                 {% endfor %}
  73.                                 <li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
  74.                             </ul>
  75.                         </div>
  76.                     {% endif %}
  77.                     {% if truck_filter_type is defined %}
  78.                         <div class="listado_itm">
  79.                             <h2 class="listado_acordeon_open">TIPO DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
  80.                             <ul class="listado_acordeon_content">
  81.                                 {% for item in truck_filter_type %}
  82.                                     <li><a class="model_filter truck_filter truck_filter_type {{ item.slug in truck_type_filters ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  83.                                 {% endfor %}
  84.                                 <li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
  85.                             </ul>
  86.                         </div>
  87.                     {% endif %}
  88.                     {% if truck_filter_power is defined %}
  89.                         <div class="listado_itm">
  90.                             <h2 class="listado_acordeon_open">POTENCIA DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
  91.                             <ul class="listado_acordeon_content">
  92.                                 {% for item in truck_filter_power %}
  93.                                     <li><a class="model_filter truck_filter truck_filter_power {{ item.slug in truck_power_filters ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  94.                                 {% endfor %}
  95.                                 <li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
  96.                             </ul>
  97.                         </div>
  98.                     {% endif %}
  99.                     {% if truck_filter_tonnage is defined %}
  100.                         <div class="listado_itm">
  101.                             <h2 class="listado_acordeon_open">TONELAJE DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
  102.                             <ul class="listado_acordeon_content">
  103.                                 {% for item in truck_filter_tonnage %}
  104.                                     <li><a class="model_filter truck_filter truck_filter_tonnage {{ item.slug in truck_tonnage_filters ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  105.                                 {% endfor %}
  106.                                 <li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
  107.                             </ul>
  108.                         </div>
  109.                     {% endif %}
  110.                     {% if bus_filter_model is defined %}
  111.                         <div class="listado_itm">
  112.                             <h2 class="listado_acordeon_open">MODELO DE BUSES <span class="icon-arrow_drop_down"></span></h2>
  113.                             <ul class="listado_acordeon_content">
  114.                                 {% for item in bus_filter_model %}
  115.                                     <li><a class="model_filter bus_filter bus_filter_model {{ item.slug in bus_model_filter ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  116.                                 {% endfor %}
  117.                                 <li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
  118.                             </ul>
  119.                         </div>
  120.                     {% endif %}
  121.                     {% if bus_filter_pbv is defined %}
  122.                         <div class="listado_itm">
  123.                             <h2 class="listado_acordeon_open">PBV <span class="icon-arrow_drop_down"></span></h2>
  124.                             <ul class="listado_acordeon_content">
  125.                                 {% for item in bus_filter_pbv %}
  126.                                     <li><a class="model_filter bus_filter bus_filter_pbv {{ item.slug in bus_pbv_filter ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  127.                                 {% endfor %}
  128.                                 <li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
  129.                             </ul>
  130.                         </div>
  131.                     {% endif %}
  132.                     {% if bus_filter_power is defined %}
  133.                         <div class="listado_itm">
  134.                             <h2 class="listado_acordeon_open">POTENCIA DE BUSES <span class="icon-arrow_drop_down"></span></h2>
  135.                             <ul class="listado_acordeon_content">
  136.                                 {% for item in bus_filter_power %}
  137.                                     <li><a class="model_filter bus_filter bus_filter_power {{ item.slug in bus_power_filter ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  138.                                 {% endfor %}
  139.                                 <li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
  140.                             </ul>
  141.                         </div>
  142.                     {% endif %}
  143.                     {% if bus_filter_tonnage is defined %}
  144.                         <div class="listado_itm">
  145.                             <h2 class="listado_acordeon_open">TONELAJE DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
  146.                             <ul class="listado_acordeon_content">
  147.                                 {% for item in bus_filter_tonnage %}
  148.                                     <li><a class="model_filter bus_filter bus_filter_tonnage {{ item.slug in truck_tonnage_filters ? 'active' }}" data-filter="{{ item.slug }}">{{ item.title }}</a></li>
  149.                                 {% endfor %}
  150.                                 <li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
  151.                             </ul>
  152.                         </div>
  153.                     {% endif %}
  154.                 </div>
  155.                 {% if sd.advertisingShow and sd.advertisingImage|image_path %}
  156.                     <a href="{{ sd.advertisingLink ?: path('promotions') }}" class="listado_promo" target="{{ sd.advertisingTarget|url_target }}">
  157.                         <img src="{{ asset(sd.advertisingImage|image_path) }}" width="" height="" alt="{{ sd.advertisingImage|split_alt }}">
  158.                     </a>
  159.                 {% endif %}
  160.             </aside>
  161.             <div class="listado_wrap_box">
  162.                 {% if sd_title and sd_description %}
  163.                     <div class="listado_head">
  164.                         <h2>{{ sd_title }}</h2>
  165.                         <div class="listado_head_wrap_txt">
  166.                             <p>{{ sd_description|nl2br }}</p>
  167.                         </div>
  168.                     </div>
  169.                 {% endif %}
  170.                 <div class="listado_content_box">
  171.                     {% for item in models %}
  172.                         {# {% set url = item|is_bus ? item.link|external_url : path('model_detail', {'slug': item.slug}) %} #}
  173.                         {% set url = item|is_bus ? path('modelbus_detail', {'slug': item.slug}) : path('model_detail', {'slug': item.slug}) %}
  174.                         <a href="{{ url }}" class="listado_box">
  175.                             <figure class="listado_box_fig">
  176.                                 <img src="{{ asset(item.image|image_path) }}" width="" height="" alt="{{ item.title }}">
  177.                             </figure>
  178.                             <div class="listado_box_info">
  179.                                 <h3>{{ item.title }}</h3>
  180.                                 <div class="listado_box_btn">
  181.                                     {# {% set url = item|is_bus ? item.link|external_url : path('model_detail', {'slug': item.slug}) %} #}
  182.                                     {# <a class="btn btn_grayline" href="{{ url }}">Más información</a> #}
  183.                                     <span class="btn btn_grayline" >Más información</span>
  184.                                 </div>
  185.                             </div>
  186.                         </a>
  187.                     {% endfor %}
  188.                 </div>
  189.                 {{ knp_pagination_render(models, 'front/pagination/models.html.twig') }}
  190.                 {% if sd.advertisingShow and sd.advertisingImage|image_path %}
  191.                     <div class="listado_promo_responsive">
  192.                         <a href="{{ sd.advertisingLink ?: path('promotions') }}" class="listado_promo"
  193.                            target="{{ sd.advertisingTarget|url_target }}">
  194.                             <img src="{{ asset(sd.advertisingImage|image_path) }}" width="" height="" alt="{{ sd.advertisingImage|split_alt }}">
  195.                         </a>
  196.                     </div>
  197.                 {% endif %}
  198.             </div>
  199.         </div>
  200.     </section>
  201. {% endblock %}
  202. {% block jsfinal %}
  203.     <script type="text/javascript">
  204.         changeImage('.listChangeImage');
  205.         window.onresize = function(){
  206.             changeImage('.listChangeImage');
  207.         };
  208.         acordeonJs('.listado_acordeon_open', '.listado_acordeon_content')
  209.         $('.listado_class_responsive').on('click', function () {
  210.             $('.listado_links').slideToggle()
  211.         })
  212.         $.each($('a.model_filter.active').closest('div.listado_itm'), function (i, v) {
  213.             let $this = $(v).find('h2');
  214.             if (!$this.hasClass('clicked')) {
  215.                 $this.addClass('clicked').trigger('click');
  216.             }
  217.         })
  218.         $('.model_filter').on('click', function (e) {
  219.             e.preventDefault();
  220.             $(this).addClass('active');
  221.             updateUrl();
  222.         })
  223.         $('.reset_filter').on('click', function (e) {
  224.             e.preventDefault();
  225.             let filter = $(this).data('filter');
  226.             $('.' + filter).removeClass('active');
  227.             updateUrl();
  228.         })
  229.         $('.paginator').on('click', function (e) {
  230.             e.preventDefault();
  231.             let page = $(this).data('page');
  232.             updateUrl(page);
  233.         })
  234.         function updateUrl(page) {
  235.             let baseurl = '{{ base_url }}';
  236.             let parameters = {};
  237.             let truck_filter_model_items = $('li a.truck_filter_model.active');
  238.             let truck_filter_model_array = [];
  239.             $.each(truck_filter_model_items, function (i, v) {
  240.                 let truck_filter_model = $(v).data('filter');
  241.                 if (!truck_filter_model_array.includes(truck_filter_model)) {
  242.                     truck_filter_model_array.push(truck_filter_model);
  243.                 }
  244.             })
  245.             let truck_filter_models = truck_filter_model_array.join(',');
  246.             if (truck_filter_models) {
  247.                 parameters['c_modelos'] = truck_filter_models;
  248.             }
  249.             let truck_filter_traction_items = $('li a.truck_filter_traction.active');
  250.             let truck_filter_traction_array = [];
  251.             $.each(truck_filter_traction_items, function (i, v) {
  252.                 let truck_filter_traction = $(v).data('filter');
  253.                 if (!truck_filter_traction_array.includes(truck_filter_traction)) {
  254.                     truck_filter_traction_array.push(truck_filter_traction);
  255.                 }
  256.             })
  257.             let truck_filter_tractions = truck_filter_traction_array.join(',');
  258.             if (truck_filter_tractions) {
  259.                 parameters['c_tracciones'] = truck_filter_tractions;
  260.             }
  261.             let truck_filter_type_items = $('li a.truck_filter_type.active');
  262.             let truck_filter_type_array = [];
  263.             $.each(truck_filter_type_items, function (i, v) {
  264.                 let truck_filter_type = $(v).data('filter');
  265.                 if (!truck_filter_type_array.includes(truck_filter_type)) {
  266.                     truck_filter_type_array.push(truck_filter_type);
  267.                 }
  268.             })
  269.             let truck_filter_types = truck_filter_type_array.join(',');
  270.             if (truck_filter_types) {
  271.                 parameters['c_tipos'] = truck_filter_types;
  272.             }
  273.             let truck_filter_power_items = $('li a.truck_filter_power.active');
  274.             let truck_filter_power_array = [];
  275.             $.each(truck_filter_power_items, function (i, v) {
  276.                 let truck_filter_power = $(v).data('filter');
  277.                 if (!truck_filter_power_array.includes(truck_filter_power)) {
  278.                     truck_filter_power_array.push(truck_filter_power);
  279.                 }
  280.             })
  281.             let truck_filter_powers = truck_filter_power_array.join(',');
  282.             if (truck_filter_powers) {
  283.                 parameters['c_potencias'] = truck_filter_powers;
  284.             }
  285.             let truck_filter_tonnage_items = $('li a.truck_filter_tonnage.active');
  286.             let truck_filter_tonnage_array = [];
  287.             $.each(truck_filter_tonnage_items, function (i, v) {
  288.                 let truck_filter_tonnage = $(v).data('filter');
  289.                 if (!truck_filter_tonnage_array.includes(truck_filter_tonnage)) {
  290.                     truck_filter_tonnage_array.push(truck_filter_tonnage);
  291.                 }
  292.             })
  293.             let truck_filter_tonnages = truck_filter_tonnage_array.join(',');
  294.             if (truck_filter_tonnages) {
  295.                 parameters['c_tonelajes'] = truck_filter_tonnages;
  296.             }
  297.             let bus_filter_model_items = $('li a.bus_filter_model.active');
  298.             let bus_filter_model_array = [];
  299.             $.each(bus_filter_model_items, function (i, v) {
  300.                 let bus_filter_model = $(v).data('filter');
  301.                 if (!bus_filter_model_array.includes(bus_filter_model)) {
  302.                     bus_filter_model_array.push(bus_filter_model);
  303.                 }
  304.             })
  305.             let bus_filter_models = bus_filter_model_array.join(',');
  306.             if (bus_filter_models) {
  307.                 parameters['b_modelos'] = bus_filter_models;
  308.             }
  309.             let bus_filter_pbv_items = $('li a.bus_filter_pbv.active');
  310.             let bus_filter_pbv_array = [];
  311.             $.each(bus_filter_pbv_items, function (i, v) {
  312.                 let bus_filter_pbv = $(v).data('filter');
  313.                 if (!bus_filter_pbv_array.includes(bus_filter_pbv)) {
  314.                     bus_filter_pbv_array.push(bus_filter_pbv);
  315.                 }
  316.             })
  317.             let bus_filter_pbvs = bus_filter_pbv_array.join(',');
  318.             if (bus_filter_pbvs) {
  319.                 parameters['b_pbvs'] = bus_filter_pbvs;
  320.             }
  321.             let bus_filter_power_items = $('li a.bus_filter_power.active');
  322.             let bus_filter_power_array = [];
  323.             $.each(bus_filter_power_items, function (i, v) {
  324.                 let bus_filter_power = $(v).data('filter');
  325.                 if (!bus_filter_power_array.includes(bus_filter_power)) {
  326.                     bus_filter_power_array.push(bus_filter_power);
  327.                 }
  328.             })
  329.             let bus_filter_powers = bus_filter_power_array.join(',');
  330.             if (bus_filter_powers) {
  331.                 parameters['b_potencias'] = bus_filter_powers;
  332.             }
  333.             let bus_filter_tonnage_items = $('li a.bus_filter_tonnage.active');
  334.             let bus_filter_tonnage_array = [];
  335.             $.each(bus_filter_tonnage_items, function (i, v) {
  336.                 let bus_filter_tonnage = $(v).data('filter');
  337.                 if (!bus_filter_tonnage_array.includes(bus_filter_tonnage)) {
  338.                     bus_filter_tonnage_array.push(bus_filter_tonnage);
  339.                 }
  340.             })
  341.             let bus_filter_tonnages = bus_filter_tonnage_array.join(',');
  342.             if (bus_filter_tonnages) {
  343.                 parameters['b_toneladas'] = bus_filter_tonnages;
  344.             }
  345.             if (page) {
  346.                 parameters['page'] = page;
  347.             }
  348.             parameters = $.param(parameters);
  349.             location.href = baseurl + (parameters ? '?' + parameters : '');
  350.         }
  351.     </script>
  352. {% endblock %}