{% extends "front/_common/_base.html.twig" %}
{% block linkcanonical %}
<link rel="canonical" href="{{ absolute_url(base_url) }}">
{% endblock %}
{% block cssadicional %}{% endblock %}
{% block classbody %}{% endblock %}
{% block content %}
<section class="listado">
{% set bannerDesktop = sd.bannerDesktop %}
{% set bannerTablet = sd.bannerTablet ?: bannerDesktop %}
{% set bannerMobile = sd.bannerMobile ?: bannerTablet %}
<div class="listado_banner listChangeImage" data-image="{{ asset(bannerDesktop|image_path) }};{{ asset(bannerTablet|image_path) }};{{ asset(bannerMobile|image_path) }}">
</div>
<div class="listado_nav">
<div class="listado_nav_center ww_center">
<h2>¿Qué estás buscando?</h2>
<div class="listado_nav_itms">
<a href="{{ path('model_list') }}" class="listado_nav_itm {{ type == 'both' ? 'active' }}">
<figure class="listado_nav_img">
<img class="listado_default" src="{{ asset(menu_models.bothImage|image_path) }}" width="40" height="" alt="{{ sd.bothTitle ?: 'Todos' }}">
<img class="listado_hover" src="{{ asset(menu_models.bothImageHover|image_path) }}" width="40" height="" alt="{{ sd.bothTitle ?: 'Todos' }}">
</figure>
<p>{{ sd.bothTitle ?: 'Todos' }}</p>
</a>
<a href="{{ path('model_trucks') }}" class="listado_nav_itm {{ type == constant('App\\Entity\\Model::TYPE_TRUCK') ? 'active' }}">
<figure class="listado_nav_img">
<img class="listado_default" src="{{ asset(menu_models.trucksImage|image_path) }}" width="40" height="" alt="{{ sd.trucksTitle ?: 'Camiones' }}">
<img class="listado_hover" src="{{ asset(menu_models.trucksImageHover|image_path) }}" width="40" height="" alt="{{ sd.trucksTitle ?: 'Camiones' }}">
</figure>
<p>{{ sd.trucksTitle ?: 'Camiones' }}</p>
</a>
<a href="{{ path('model_buses') }}" class="listado_nav_itm {{ type == constant('App\\Entity\\Model::TYPE_BUS') ? 'active' }}">
<figure class="listado_nav_img">
<img class="listado_default" src="{{ asset(menu_models.busesImage|image_path) }}" width="40" height="" alt="{{ sd.busesTitle ?: 'Buses' }}">
<img class="listado_hover" src="{{ asset(menu_models.busesImageHover|image_path) }}" width="40" height="" alt="{{ sd.busesTitle ?: 'Buses' }}">
</figure>
<p>{{ sd.busesTitle ?: 'Buses' }}</p>
</a>
</div>
</div>
</div>
<div class="listado_container">
<aside class="listado_aside">
<h3 class="listado_class_responsive">Filtrar por:</h3>
<div class="listado_links">
{% set truck_model_filters = app.request.query.all.c_modelos is defined ? app.request.query.all.c_modelos|split(',') : [] %}
{% set truck_traction_filters = app.request.query.all.c_tracciones is defined ? app.request.query.all.c_tracciones|split(',') : [] %}
{% set truck_type_filters = app.request.query.all.c_tipos is defined ? app.request.query.all.c_tipos|split(',') : [] %}
{% set truck_power_filters = app.request.query.all.c_potencias is defined ? app.request.query.all.c_potencias|split(',') : [] %}
{% set truck_tonnage_filters = app.request.query.all.c_tonelajes is defined ? app.request.query.all.c_tonelajes|split(',') : [] %}
{% set bus_model_filter = app.request.query.all.b_modelos is defined ? app.request.query.all.b_modelos|split(',') : [] %}
{% set bus_pbv_filter = app.request.query.all.b_pbvs is defined ? app.request.query.all.b_pbvs|split(',') : [] %}
{% set bus_power_filter = app.request.query.all.b_potencias is defined ? app.request.query.all.b_potencias|split(',') : [] %}
{% set bus_tonnage_filter = app.request.query.all.b_toneladas is defined ? app.request.query.all.b_toneladas|split(',') : [] %}
{% if truck_filter_model is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">MODELO DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in truck_filter_model %}
<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>
{% endfor %}
<li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if truck_filter_traction is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">TRACCIÓN DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in truck_filter_traction %}
<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>
{% endfor %}
<li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if truck_filter_type is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">TIPO DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in truck_filter_type %}
<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>
{% endfor %}
<li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if truck_filter_power is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">POTENCIA DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in truck_filter_power %}
<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>
{% endfor %}
<li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if truck_filter_tonnage is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">TONELAJE DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in truck_filter_tonnage %}
<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>
{% endfor %}
<li><a class="truck_filter reset_filter" data-filter="truck_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if bus_filter_model is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">MODELO DE BUSES <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in bus_filter_model %}
<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>
{% endfor %}
<li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if bus_filter_pbv is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">PBV <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in bus_filter_pbv %}
<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>
{% endfor %}
<li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if bus_filter_power is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">POTENCIA DE BUSES <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in bus_filter_power %}
<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>
{% endfor %}
<li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
</ul>
</div>
{% endif %}
{% if bus_filter_tonnage is defined %}
<div class="listado_itm">
<h2 class="listado_acordeon_open">TONELAJE DE CAMIÓN <span class="icon-arrow_drop_down"></span></h2>
<ul class="listado_acordeon_content">
{% for item in bus_filter_tonnage %}
<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>
{% endfor %}
<li><a class="bus_filter reset_filter" data-filter="bus_filter">Todos</a></li>
</ul>
</div>
{% endif %}
</div>
{% if sd.advertisingShow and sd.advertisingImage|image_path %}
<a href="{{ sd.advertisingLink ?: path('promotions') }}" class="listado_promo" target="{{ sd.advertisingTarget|url_target }}">
<img src="{{ asset(sd.advertisingImage|image_path) }}" width="" height="" alt="{{ sd.advertisingImage|split_alt }}">
</a>
{% endif %}
</aside>
<div class="listado_wrap_box">
{% if sd_title and sd_description %}
<div class="listado_head">
<h2>{{ sd_title }}</h2>
<div class="listado_head_wrap_txt">
<p>{{ sd_description|nl2br }}</p>
</div>
</div>
{% endif %}
<div class="listado_content_box">
{% for item in models %}
{# {% set url = item|is_bus ? item.link|external_url : path('model_detail', {'slug': item.slug}) %} #}
{% set url = item|is_bus ? path('modelbus_detail', {'slug': item.slug}) : path('model_detail', {'slug': item.slug}) %}
<a href="{{ url }}" class="listado_box">
<figure class="listado_box_fig">
<img src="{{ asset(item.image|image_path) }}" width="" height="" alt="{{ item.title }}">
</figure>
<div class="listado_box_info">
<h3>{{ item.title }}</h3>
<div class="listado_box_btn">
{# {% set url = item|is_bus ? item.link|external_url : path('model_detail', {'slug': item.slug}) %} #}
{# <a class="btn btn_grayline" href="{{ url }}">Más información</a> #}
<span class="btn btn_grayline" >Más información</span>
</div>
</div>
</a>
{% endfor %}
</div>
{{ knp_pagination_render(models, 'front/pagination/models.html.twig') }}
{% if sd.advertisingShow and sd.advertisingImage|image_path %}
<div class="listado_promo_responsive">
<a href="{{ sd.advertisingLink ?: path('promotions') }}" class="listado_promo"
target="{{ sd.advertisingTarget|url_target }}">
<img src="{{ asset(sd.advertisingImage|image_path) }}" width="" height="" alt="{{ sd.advertisingImage|split_alt }}">
</a>
</div>
{% endif %}
</div>
</div>
</section>
{% endblock %}
{% block jsfinal %}
<script type="text/javascript">
changeImage('.listChangeImage');
window.onresize = function(){
changeImage('.listChangeImage');
};
acordeonJs('.listado_acordeon_open', '.listado_acordeon_content')
$('.listado_class_responsive').on('click', function () {
$('.listado_links').slideToggle()
})
$.each($('a.model_filter.active').closest('div.listado_itm'), function (i, v) {
let $this = $(v).find('h2');
if (!$this.hasClass('clicked')) {
$this.addClass('clicked').trigger('click');
}
})
$('.model_filter').on('click', function (e) {
e.preventDefault();
$(this).addClass('active');
updateUrl();
})
$('.reset_filter').on('click', function (e) {
e.preventDefault();
let filter = $(this).data('filter');
$('.' + filter).removeClass('active');
updateUrl();
})
$('.paginator').on('click', function (e) {
e.preventDefault();
let page = $(this).data('page');
updateUrl(page);
})
function updateUrl(page) {
let baseurl = '{{ base_url }}';
let parameters = {};
let truck_filter_model_items = $('li a.truck_filter_model.active');
let truck_filter_model_array = [];
$.each(truck_filter_model_items, function (i, v) {
let truck_filter_model = $(v).data('filter');
if (!truck_filter_model_array.includes(truck_filter_model)) {
truck_filter_model_array.push(truck_filter_model);
}
})
let truck_filter_models = truck_filter_model_array.join(',');
if (truck_filter_models) {
parameters['c_modelos'] = truck_filter_models;
}
let truck_filter_traction_items = $('li a.truck_filter_traction.active');
let truck_filter_traction_array = [];
$.each(truck_filter_traction_items, function (i, v) {
let truck_filter_traction = $(v).data('filter');
if (!truck_filter_traction_array.includes(truck_filter_traction)) {
truck_filter_traction_array.push(truck_filter_traction);
}
})
let truck_filter_tractions = truck_filter_traction_array.join(',');
if (truck_filter_tractions) {
parameters['c_tracciones'] = truck_filter_tractions;
}
let truck_filter_type_items = $('li a.truck_filter_type.active');
let truck_filter_type_array = [];
$.each(truck_filter_type_items, function (i, v) {
let truck_filter_type = $(v).data('filter');
if (!truck_filter_type_array.includes(truck_filter_type)) {
truck_filter_type_array.push(truck_filter_type);
}
})
let truck_filter_types = truck_filter_type_array.join(',');
if (truck_filter_types) {
parameters['c_tipos'] = truck_filter_types;
}
let truck_filter_power_items = $('li a.truck_filter_power.active');
let truck_filter_power_array = [];
$.each(truck_filter_power_items, function (i, v) {
let truck_filter_power = $(v).data('filter');
if (!truck_filter_power_array.includes(truck_filter_power)) {
truck_filter_power_array.push(truck_filter_power);
}
})
let truck_filter_powers = truck_filter_power_array.join(',');
if (truck_filter_powers) {
parameters['c_potencias'] = truck_filter_powers;
}
let truck_filter_tonnage_items = $('li a.truck_filter_tonnage.active');
let truck_filter_tonnage_array = [];
$.each(truck_filter_tonnage_items, function (i, v) {
let truck_filter_tonnage = $(v).data('filter');
if (!truck_filter_tonnage_array.includes(truck_filter_tonnage)) {
truck_filter_tonnage_array.push(truck_filter_tonnage);
}
})
let truck_filter_tonnages = truck_filter_tonnage_array.join(',');
if (truck_filter_tonnages) {
parameters['c_tonelajes'] = truck_filter_tonnages;
}
let bus_filter_model_items = $('li a.bus_filter_model.active');
let bus_filter_model_array = [];
$.each(bus_filter_model_items, function (i, v) {
let bus_filter_model = $(v).data('filter');
if (!bus_filter_model_array.includes(bus_filter_model)) {
bus_filter_model_array.push(bus_filter_model);
}
})
let bus_filter_models = bus_filter_model_array.join(',');
if (bus_filter_models) {
parameters['b_modelos'] = bus_filter_models;
}
let bus_filter_pbv_items = $('li a.bus_filter_pbv.active');
let bus_filter_pbv_array = [];
$.each(bus_filter_pbv_items, function (i, v) {
let bus_filter_pbv = $(v).data('filter');
if (!bus_filter_pbv_array.includes(bus_filter_pbv)) {
bus_filter_pbv_array.push(bus_filter_pbv);
}
})
let bus_filter_pbvs = bus_filter_pbv_array.join(',');
if (bus_filter_pbvs) {
parameters['b_pbvs'] = bus_filter_pbvs;
}
let bus_filter_power_items = $('li a.bus_filter_power.active');
let bus_filter_power_array = [];
$.each(bus_filter_power_items, function (i, v) {
let bus_filter_power = $(v).data('filter');
if (!bus_filter_power_array.includes(bus_filter_power)) {
bus_filter_power_array.push(bus_filter_power);
}
})
let bus_filter_powers = bus_filter_power_array.join(',');
if (bus_filter_powers) {
parameters['b_potencias'] = bus_filter_powers;
}
let bus_filter_tonnage_items = $('li a.bus_filter_tonnage.active');
let bus_filter_tonnage_array = [];
$.each(bus_filter_tonnage_items, function (i, v) {
let bus_filter_tonnage = $(v).data('filter');
if (!bus_filter_tonnage_array.includes(bus_filter_tonnage)) {
bus_filter_tonnage_array.push(bus_filter_tonnage);
}
})
let bus_filter_tonnages = bus_filter_tonnage_array.join(',');
if (bus_filter_tonnages) {
parameters['b_toneladas'] = bus_filter_tonnages;
}
if (page) {
parameters['page'] = page;
}
parameters = $.param(parameters);
location.href = baseurl + (parameters ? '?' + parameters : '');
}
</script>
{% endblock %}