{% set car_make = form_widget(form.car_make) %}
{% set car_model = form.car_model is defined ? form_widget(form.car_model) : '' %}
{% set car_type = form_widget(form.car_type) %}
{% set car_age_type = form_widget(form.car_age_type) %}
{% set registration_year_start = form_widget(form.registration_year_start) %}
{% set registration_year_end = form_widget(form.registration_year_end) %}
{% set monthly_rate_min = form_widget(form.monthly_rate_min) %}
{% set monthly_rate_max = form_widget(form.monthly_rate_max) %}
{% set km_driven = form_widget(form.km_driven) %}
{% set fuel = form_widget(form.fuel) %}
{% set color = form_widget(form.color) %}
{% set car_location = form_widget(form.car_location) %}
{% set car_availability = form_widget(form.car_availability) %}
{% set transmission = form_widget(form.transmission) %}
{% set filter_submit = form_widget(form.submit,{'fa' : 'fa-long-arrow-right','right' : true}) %}
{% set show_filter = pimcore_select('car-list-filter').getData() %}
{% set show_car_available_from = pimcore_select('car-list-available-from').getData() %}
{% set quality_badge = form_widget(form.quality_badge) %}
{% set campaign_name = form_widget(form.campaign_name) %}
<div class="vehicle-area pt-4 pt-lg-5 mb-7">
<div class="row">
{% if show_filter %}
<input type="checkbox" id="vehicle-area-filter-toggle" class="vehicle-area-filter-toggle d-none">
<div class="col-auto col-lg-3 vehicle-area-filter-holder mx-n4 mx-lg-0 pb-4">
<div class="vehicle-area-filter bg-white shadow sticky-lg-top">
<div class="vehicle-area-filter-overlay top-0 start-0 w-100 h-100 bg-white d-lg-block">
<h2 class="mb-0 px-3 py-2 p-md-4">
<label for="vehicle-area-filter-toggle" class="d-block pe-4">Filter</label>
</h2>
{{ form_start(form, { 'attr': {'class' : 'vehicle-area-filter-form d-lg-block py-4', 'id': 'carFilterForm'} }) }}
<section class="px-4">
<div class="mb-2">{{ car_make | raw }}</div>
<div class="mb-2" id="car-model-select">{{ car_model | raw }}</div>
<div class="mb-2">{{ car_type | raw }}</div>
<div class="mb-2">{{ car_age_type | raw }}</div>
<div class="mb-2 row">
<div class="col-6 pe-1">{{ registration_year_start | raw }}</div>
<div class="col-6 ps-1">{{ registration_year_end | raw }}</div>
</div>
<div class="mb-2 row">
<div class="col-6 pe-1">{{ monthly_rate_min | raw }}</div>
<div class="col-6 ps-1">{{ monthly_rate_max | raw }}</div>
</div>
<div class="mb-2">{{ km_driven | raw }}</div>
<div class="mb-2">{{ transmission | raw }}</div>
<div class="mb-2">{{ fuel | raw }}</div>
<div class="mb-2">{{ color | raw }}</div>
<div class="mb-2">{{ car_location | raw }}</div>
<div class="mb-2">{{ car_availability | raw }}</div>
{% if isBackendUser %}
<div class="mb-2">{{ campaign_name | raw }}</div>
{% endif %}
<div class="mb-4">{{ quality_badge | raw }}</div>
{{ filter_submit | raw }}
</section>
{{ form_end(form) }}
</div>
</div>
</div>
{% endif %}
<div class="{{ show_filter ? 'col-lg-9' : 'col-12' }}">
<div
class="vehicle-area-filter-holder vehicle-area-filter vehicle-area-filter-sort shadow col-5 col-lg-auto float-end float-lg-none me-n4 mt-n6 mb-4 my-lg-0 me-lg-0 pb-lg-4 {{ show_filter ? '' : 'd-none' }}">
<div class="row justify-content-end">
<div class="col-lg-3">
<select id="car_list_filter_sort" name="car_list_filter_sort" class="form-select small"
aria-label="Sortierung" title="Sortierung">
<option disabled selected>Sortierung</option>
<option value="sort_price_increasing">Preis ↑</option>
<option value="sort_price_decreasing">Preis ↓</option>
<option value="sort_mileage_increasing">Laufleistung ↑</option>
<option value="sort_mileage_decreasing">Laufleistung ↓</option>
<option value="sort_rate_increasing">Rate ↑</option>
<option value="sort_rate_decreasing">Rate ↓</option>
</select>
</div>
</div>
</div>
<div class="row" id="carlisting">
{% if paginatedCars|length > 0 %}
{% for car in paginatedCars %}
{% set stammdaten = car.getStammdaten.getVehicleBaseData %}
{% set kosten = car.getKosten.getCosts %}
{% set aussen = car.getAussen.getExterieur %}
{% set innen = car.getInnen.getInterieur %}
{% set finanzierung = car.getFinanzierung.getFinancing %}
{% set leasing = car.getLeasing.getleasing %}
{# API-managed vehicles can lack the Leasing/Financing brick entirely; guard. #}
{% set hasLeasingRate = leasing is not null and leasing.getMonatlicheRate %}
{% set hasFinanzierungRate = finanzierung is not null and finanzierung.getMonatlicheRate %}
{% set technischeDaten = car.getTechnischeDaten.getTechnicalData %}
<div class="{{ show_filter ? 'col-md-6 col-xl-4' : 'col-md-6 col-lg-4 col-xl-3' }} mb-4">
<div class="card h-100 border-0 shadow">
<div class="card-header py-4 bg-white">
<div class="row">
<div class="col-6 pe-0">
<h3 class="mb-1">{{ stammdaten.getMarke }}</h3>
{% if stammdaten.getModellbasis %}
<h4 class="mb-0 fw-bold">{{ stammdaten.getModellbasis }}</h4>
{% endif %}
</div>
<div class="col-6 ps-0 text-end">
{% if kosten.rotstiftpreis > kosten.getPreis() %}
<span class="badge rounded-pill bg-danger">Kürzlich reduziert</span>
{% endif %}
<div class="h3 text-nowrap mb-1">
{{ kosten.getPreis|number_format(2, ',', '.') }}€
</div>
<div class="small text-muted lh-1">
<small>
{% if stammdaten.getMwst == 0 %}
MwSt. ist ausweisbar
{% else %}
MwSt. nicht ausweisbar
{% endif %}
</small>
</div>
</div>
</div>
</div>
<picture>
{% if (car.images | length) > 0 %}
{% set car_photos = car.images %}
{% set car_photos_length = car_photos | length < 3 ? car_photos | length : 3 %}
{% set bild = car.images|first %}
{% else %}
{% set car_photos_length = 0 %}
{% set src = '/Gebrauchte/Bilder/3301020_FBUN2220298_1.jpeg' %}
{% endif %}
{% if stammdaten.getLieferdatum and show_car_available_from %}
{% set currentDate = date("now") %}
{% set deliveryDate = date(stammdaten.getLieferdatum) %}
{% if deliveryDate > currentDate %}
<span
class="notify-badge">Verfügbar ab {{ stammdaten.getLieferdatum | date('d.m.y') }}</span>
{% endif %}
{% endif %}
<div class="swiper car-list-image-swiper" style="z-index: 2">
<div class="swiper-wrapper">
{% if car_photos_length != 0 %}
{% for i in 1 .. car_photos_length %}
<a class="swiper-slide"
href="{{ pimcore_relation('carDetailPageUrl').getFullPath() }}?i={{ car.getInternalVehicleId }}">
<img
class="swiper-slide"
src="{{ car_photos[i - 1].thumbnail({'width': 330, 'format': 'jpeg', 'quality': 60,}) }}"
alt="{{ stammdaten.getMarke }} {{ stammdaten.getModellbasis }} (Bild {{ i }}/{{ car_photos|length }})">
</a>
{% endfor %}
{% else %}
<img src="{{ src }}" class="w-100 h-auto"
alt="{{ stammdaten.getMarke }} {{ stammdaten.getModellbasis }}">
{% endif %}
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</picture>
<div class="card-body d-flex flex-column">
<div class="row text-center mb-4">
<div class="col-4">
<div class="h4 mb-1 text-nowrap">
{{ stammdaten.ez ? stammdaten.ez : technischeDaten.kraftstoffart }}
</div>
<div class="small lh-1">
<small>{{ stammdaten.ez ? 'Erstzulassung' : 'Kraftstoff' }}</small>
</div>
</div>
<div class="col-4 border-start border-end">
<div class="h4 mb-1 text-nowrap">
{{ stammdaten.kilometer }}<span class="text-muted">km</span>
</div>
<div class="small lh-1">
<small>Laufleistung</small>
</div>
</div>
<div class="col-4">
<div class="h4 mb-1 text-nowrap">
{% if hasLeasingRate %}
{{ leasing.getMonatlicheRate }}<span
class="text-muted">€</span>
{% elseif hasFinanzierungRate %}
{{ finanzierung.getMonatlicheRate }}<span
class="text-muted">€</span>
{% else %}
{{ technischeDaten.leistung }}<span class="text-muted">kw</span>
{% endif %}
</div>
<div class="small lh-1">
<small>
{% if hasLeasingRate or hasFinanzierungRate %}
mtl. Rate<br>inkl. MwSt.
{% else %}
Leistung
{% endif %}
</small>
</div>
</div>
</div>
<div class="card-text small flex-grow-1 px-4 pb-4">
<ul class="list-unstyled small" style="column-count: 2;">
<li>
Euro {{ technischeDaten.schadstoff }}
</li>
<li>
{{ innen.getSitze() > 0 ? innen.getSitze() ~ ' Sitze' : '-/-' }}
</li>
<li>
{{ technischeDaten.getAnzahlGNge() > 0 ? technischeDaten.getAnzahlGNge() ~ ' Gänge' : '-/-' }}
</li>
<li>
{{ technischeDaten.getLeergewicht() > 0 ? technischeDaten.getLeergewicht() ~ 'kg' : '-/-' }}
</li>
<li>
{{ stammdaten.getTueren() > 0 ? stammdaten.getTueren() ~ ' Türen' : '-/-' }}
</li>
<li>
{{ technischeDaten.getZylinder() > 0 ? technischeDaten.getZylinder() ~ ' Zylinder' : '-/-' }}
</li>
</ul>
<p class="small text-muted">
{% if technischeDaten.kraftstoffart == 'Elektro' %}
Stromverbrauch:
<br>
{{ stammdaten.getKombinierterStromverbrauchWltp ? stammdaten.getKombinierterStromverbrauchWltp : '-/-' }} kWh/100km (WLTP)
<br>
Elektrische Reichweite kombiniert:<br>
{{ technischeDaten.elektromotorReichweiteBeiMinNachWLTP ? technischeDaten.elektromotorReichweiteBeiMinNachWLTP ~ ' km' : '-/-' }} (WLTP)
<br>
{% if technischeDaten.elektromotorReichweiteBeiMaxNachWLTP > 0 %}
Elektrische Reichweite innerorts:<br>
{{ technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ? technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ~ ' km' : '-/-' }} (WLTP)
<br>
{% endif %}
CO<sup>2</sup>-Emissionen kombiniert:<br>
{{ technischeDaten.getEmissionWltp ? technischeDaten.getEmissionWltp ~ ' g/km' : '0 g/km' }} (WLTP)
<br>
CO
<sup>2</sup>-Klasse: {{ technischeDaten.energieEffizienzKlasse ? technischeDaten.energieEffizienzKlasse : '' }}
{% elseif technischeDaten.kraftstoffart == 'Hybrid' %}
Kraftstoffverbrauch kombiniert:
<br>
{{ technischeDaten.gewichteterKombinierterKraftstoffverbrauchWLTP > 0 ? technischeDaten.gewichteterKombinierterKraftstoffverbrauchWLTP ~ ' l/100km' : '-/-' }} (WLTP, gew.)
<br>
Stromverbrauch kombiniert:
<br>
{{ stammdaten.getKombinierterStromverbrauchWltp ? stammdaten.getKombinierterStromverbrauchWltp : '-/-' }} kWh/100km (WLTP)
<br>
Kraftstoffverbrauch bei entladener Batterie kombiniert:
<br>
{{ technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie > 0 ? technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie ~ ' l/100km' : '-/-' }} (WLTP)
<br>
Elektrische Reichweite kombiniert:<br>
{{ technischeDaten.elektromotorReichweiteBeiMinNachWLTP ? technischeDaten.elektromotorReichweiteBeiMinNachWLTP ~ ' km' : '-/-' }} (WLTP)
<br>
{% if technischeDaten.elektromotorReichweiteBeiMaxNachWLTP > 0 %}
Elektrische Reichweite innerorts:<br>
{{ technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ? technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ~ ' km' : '-/-' }} (WLTP)
<br>
{% endif %}
CO<sup>2</sup>-Emissionen kombiniert:<br>
{{ technischeDaten.getEmissionWltp ? technischeDaten.getEmissionWltp ~ ' g/km' : '-/-' }} (WLTP, gew.)
<br>
CO
<sup>2</sup>-Klasse: {{ technischeDaten.energieeffizienzklasseGewichtetKombiniert ? technischeDaten.energieeffizienzklasseGewichtetKombiniert : '' }}
<br>
CO
<sup>2</sup>-Klasse bei entladener Batterie: {{ technischeDaten.energieeffizienzklasseEntladeneBatterie ? technischeDaten.energieeffizienzklasseEntladeneBatterie : '' }}
{% else %}
Kraftstoffverbrauch kombiniert:
<br>
{{ technischeDaten.getWLTPKombiniert ? technischeDaten.getWLTPKombiniert : '-/-' }} l/100km (WLTP)
<br>
CO<sup>2</sup>-Emissionen kombiniert:<br>
{{ technischeDaten.getEmissionWltp ? technischeDaten.getEmissionWltp ~ ' g/km' : '-/-' }} (WLTP)
<br>
CO
<sup>2</sup>-Klasse: {{ technischeDaten.energieEffizienzKlasse ? technischeDaten.energieEffizienzKlasse : '' }}
{% endif %}
</p>
</div>
<p class="text-center">
<a href="{{ pimcore_relation('carDetailPageUrl').getFullPath() }}?i={{ car.getInternalVehicleId }}"
class="btn btn-primary stretched-link">Zum Fahrzeug</a>
</p>
</div>
</div>
</div>
{% endfor %}
{% include '@VehicleMarketBundle/paginator.html.twig' %}
{% else %}
<div class="col-12 mb-4">
<h3 class="text-center my-5">
Keine Fahrzeuge gefunden.
</h3>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<script>
// VehicleFilter
function getFilterUrl() {
let carFilter = document.getElementById('carFilterForm');
let make = carFilter.querySelector('#car_list_filter_form_car_make').value;
let model = carFilter.querySelector('#car_list_filter_form_car_model') != null ? carFilter.querySelector('#car_list_filter_form_car_model').value : '';
let type = carFilter.querySelector('#car_list_filter_form_car_type').value;
let ageType = carFilter.querySelector('#car_list_filter_form_car_age_type').value;
let registrationStartYear = carFilter.querySelector('#car_list_filter_form_registration_year_start').value;
let registrationEndYear = carFilter.querySelector('#car_list_filter_form_registration_year_end').value;
let monthlyRateMin = carFilter.querySelector('#car_list_filter_form_monthly_rate_min').value;
let monthlyRateMax = carFilter.querySelector('#car_list_filter_form_monthly_rate_max').value;
let kmDriven = carFilter.querySelector('#car_list_filter_form_km_driven').value;
let transmission = carFilter.querySelector('#car_list_filter_form_transmission').value;
let fuel = carFilter.querySelector('#car_list_filter_form_fuel').value;
let color = carFilter.querySelector('#car_list_filter_form_color').value;
let location = carFilter.querySelector('#car_list_filter_form_car_location').value;
let availability = carFilter.querySelector('#car_list_filter_form_car_availability').value;
let sortOrder = carFilter.querySelector('#car_list_filter_form_sort_order').value;
let qualityBadge = carFilter.querySelector('#car_list_filter_form_quality_badge').value;
let campaignName = carFilter.querySelector('#car_list_filter_form_campaign_name') != null ? carFilter.querySelector('#car_list_filter_form_campaign_name').value : '';
let path = window.location.href.split('?')[0];
let filterUrl = path + '?car_list_filter_form%5Bcar_make%5D=' + make + '&car_list_filter_form%5Bcar_model%5D=' + model + '&car_list_filter_form%5Bcar_type%5D=' + type + '&car_list_filter_form%5Bcar_age_type%5D=' + ageType + '&car_list_filter_form%5Bregistration_year_start%5D=' + registrationStartYear + '&car_list_filter_form%5Bregistration_year_end%5D=' + registrationEndYear + '&car_list_filter_form%5Bmonthly_rate_min%5D=' + monthlyRateMin + '&car_list_filter_form%5Bmonthly_rate_max%5D=' + monthlyRateMax + '&car_list_filter_form%5Bkm_driven%5D=' + kmDriven + '&car_list_filter_form%5Btransmission%5D=' + transmission + '&car_list_filter_form%5Bfuel%5D=' + fuel + '&car_list_filter_form%5Bcolor%5D=' + color + '&car_list_filter_form%5Bsort_order%5D=' + sortOrder + '&car_list_filter_form%5Bcar_location%5D=' + location + '&car_list_filter_form%5Bcar_availability%5D=' + availability + '&car_list_filter_form%5Bquality_badge%5D=' + qualityBadge + '&car_list_filter_form%5Bcampaign_name%5D=' + campaignName + '&car_list_filter_form%5Bsubmit%5D=';
return filterUrl;
}
function updateFilterCount() {
let filterUrl = getFilterUrl() + '&json=1';
fetch(filterUrl)
.then(response => response.json())
.then(data => {
let count = data['count'];
document.getElementById('car_list_filter_form_submit').textContent = 'Filtern (' + count + ')';
})
.catch(error => {
// Handle error
});
}
function updateVehicleListing() {
let filterUrl = getFilterUrl();
let carListingDomElement = document.getElementById('carlisting');
carListingDomElement.innerHTML = '<div class="loading-container"><div class="loading-pulser"></div><div class="loading-animation-1 loading-animation"></div><div class="loading-animation-2 loading-animation"></div><div class="loading-animation-3 loading-animation"></div></div>';
fetch(filterUrl)
.then(response => response.text())
.then(htmlString => {
let fetchedCarListing = document.createElement('div');
fetchedCarListing.innerHTML = htmlString.trim();
let carListing = fetchedCarListing.querySelector('#carlisting');
carListingDomElement.innerHTML = carListing.innerHTML;
history.pushState(history.state, 'Fahrzeugmarkt', filterUrl);
const imageSwiperList = new Swiper('.car-list-image-swiper', {
loop: false,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
})
.catch(error => {
// Handle error
});
}
function updateVehicleFilter() {
let filterUrl = getFilterUrl();
let carFilterDomElement = document.getElementById('car-model-select');
// carFilterDomElement.innerHTML = '<div class="loading-container"><div class="loading-pulser"></div><div class="loading-animation-1 loading-animation"></div><div class="loading-animation-2 loading-animation"></div><div class="loading-animation-3 loading-animation"></div></div>';
fetch(filterUrl)
.then(response => response.text())
.then(htmlString => {
let fetchedCarFilter = document.createElement('div');
fetchedCarFilter.innerHTML = htmlString.trim();
let carListing = fetchedCarFilter.querySelector('#car-model-select');
carFilterDomElement.innerHTML = carListing.innerHTML;
carFilterDomElement.addEventListener('change', (e) => {
updateFilterCount();
// updateVehicleListing();
});
history.pushState(history.state, 'Fahrzeugmarkt', filterUrl);
})
.catch(error => {
// Handle error
});
}
/* Do things after DOM has fully loaded */
let ready = (callback) => {
if (document.readyState !== 'loading') callback();
else document.addEventListener('DOMContentLoaded', callback);
};
ready(() => {
let carFilterForm = document.getElementById('carFilterForm');
let makeSelect = carFilterForm.querySelector('#car_list_filter_form_car_make');
makeSelect.addEventListener('change', (e) => {
updateVehicleFilter();
updateFilterCount();
// updateVehicleListing();
});
carFilterForm.querySelectorAll('select').forEach(filterSelect => {
filterSelect.addEventListener('change', (e) => {
updateFilterCount();
// updateVehicleListing();
});
});
carFilterForm.onsubmit = function(e) {
e.preventDefault();
document.getElementById('vehicle-area-filter-toggle').checked = false;
updateVehicleListing();
};
updateFilterCount();
let carSorting = document.getElementById('car_list_filter_sort');
carSorting.addEventListener('change', (e) => {
let filter_form_field = document.getElementById('car_list_filter_form_sort_order');
filter_form_field.value = carSorting.value;
updateVehicleListing();
});
});
</script>