bundles/VehicleMarketBundle/Resources/views/Areas/vehicle-listing/view.html.twig line 1

Open in your IDE?
  1. {% set car_make = form_widget(form.car_make) %}
  2. {% set car_model = form.car_model is defined ? form_widget(form.car_model) : '' %}
  3. {% set car_type = form_widget(form.car_type) %}
  4. {% set car_age_type = form_widget(form.car_age_type) %}
  5. {% set registration_year_start = form_widget(form.registration_year_start) %}
  6. {% set registration_year_end = form_widget(form.registration_year_end) %}
  7. {% set monthly_rate_min = form_widget(form.monthly_rate_min) %}
  8. {% set monthly_rate_max = form_widget(form.monthly_rate_max) %}
  9. {% set km_driven = form_widget(form.km_driven) %}
  10. {% set fuel = form_widget(form.fuel) %}
  11. {% set color = form_widget(form.color) %}
  12. {% set car_location = form_widget(form.car_location) %}
  13. {% set car_availability = form_widget(form.car_availability) %}
  14. {% set transmission = form_widget(form.transmission) %}
  15. {% set filter_submit = form_widget(form.submit,{'fa' : 'fa-long-arrow-right','right' : true}) %}
  16. {% set show_filter = pimcore_select('car-list-filter').getData() %}
  17. {% set show_car_available_from = pimcore_select('car-list-available-from').getData() %}
  18. {% set quality_badge = form_widget(form.quality_badge) %}
  19. {% set campaign_name = form_widget(form.campaign_name) %}
  20. <div class="vehicle-area pt-4 pt-lg-5 mb-7">
  21.     <div class="row">
  22.         {% if show_filter %}
  23.             <input type="checkbox" id="vehicle-area-filter-toggle" class="vehicle-area-filter-toggle d-none">
  24.             <div class="col-auto col-lg-3 vehicle-area-filter-holder mx-n4 mx-lg-0 pb-4">
  25.                 <div class="vehicle-area-filter bg-white shadow sticky-lg-top">
  26.                     <div class="vehicle-area-filter-overlay top-0 start-0 w-100 h-100 bg-white d-lg-block">
  27.                         <h2 class="mb-0 px-3 py-2 p-md-4">
  28.                             <label for="vehicle-area-filter-toggle" class="d-block pe-4">Filter</label>
  29.                         </h2>
  30.                         {{ form_start(form, { 'attr': {'class' : 'vehicle-area-filter-form d-lg-block py-4', 'id': 'carFilterForm'} }) }}
  31.                         <section class="px-4">
  32.                             <div class="mb-2">{{ car_make | raw }}</div>
  33.                             <div class="mb-2" id="car-model-select">{{ car_model | raw }}</div>
  34.                             <div class="mb-2">{{ car_type | raw }}</div>
  35.                             <div class="mb-2">{{ car_age_type | raw }}</div>
  36.                             <div class="mb-2 row">
  37.                                 <div class="col-6 pe-1">{{ registration_year_start | raw }}</div>
  38.                                 <div class="col-6 ps-1">{{ registration_year_end | raw }}</div>
  39.                             </div>
  40.                             <div class="mb-2 row">
  41.                                 <div class="col-6 pe-1">{{ monthly_rate_min | raw }}</div>
  42.                                 <div class="col-6 ps-1">{{ monthly_rate_max | raw }}</div>
  43.                             </div>
  44.                             <div class="mb-2">{{ km_driven | raw }}</div>
  45.                             <div class="mb-2">{{ transmission | raw }}</div>
  46.                             <div class="mb-2">{{ fuel | raw }}</div>
  47.                             <div class="mb-2">{{ color | raw }}</div>
  48.                             <div class="mb-2">{{ car_location | raw }}</div>
  49.                             <div class="mb-2">{{ car_availability | raw }}</div>
  50.                             {% if isBackendUser %}
  51.                                 <div class="mb-2">{{ campaign_name | raw }}</div>
  52.                             {% endif %}
  53.                             <div class="mb-4">{{ quality_badge | raw }}</div>
  54.                             {{ filter_submit | raw }}
  55.                         </section>
  56.                         {{ form_end(form) }}
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         {% endif %}
  61.         <div class="{{ show_filter ? 'col-lg-9' : 'col-12' }}">
  62.             <div
  63.                 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' }}">
  64.                 <div class="row justify-content-end">
  65.                     <div class="col-lg-3">
  66.                         <select id="car_list_filter_sort" name="car_list_filter_sort" class="form-select small"
  67.                                 aria-label="Sortierung" title="Sortierung">
  68.                             <option disabled selected>Sortierung</option>
  69.                             <option value="sort_price_increasing">Preis &uarr;</option>
  70.                             <option value="sort_price_decreasing">Preis &darr;</option>
  71.                             <option value="sort_mileage_increasing">Laufleistung &uarr;</option>
  72.                             <option value="sort_mileage_decreasing">Laufleistung &darr;</option>
  73.                             <option value="sort_rate_increasing">Rate &uarr;</option>
  74.                             <option value="sort_rate_decreasing">Rate &darr;</option>
  75.                         </select>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.             <div class="row" id="carlisting">
  80.                 {% if paginatedCars|length > 0 %}
  81.                     {% for car in paginatedCars %}
  82.                         {% set stammdaten = car.getStammdaten.getVehicleBaseData %}
  83.                         {% set kosten = car.getKosten.getCosts %}
  84.                         {% set aussen = car.getAussen.getExterieur %}
  85.                         {% set innen = car.getInnen.getInterieur %}
  86.                         {% set finanzierung = car.getFinanzierung.getFinancing %}
  87.                         {% set leasing = car.getLeasing.getleasing %}
  88.                         {# API-managed vehicles can lack the Leasing/Financing brick entirely; guard. #}
  89.                         {% set hasLeasingRate = leasing is not null and leasing.getMonatlicheRate %}
  90.                         {% set hasFinanzierungRate = finanzierung is not null and finanzierung.getMonatlicheRate %}
  91.                         {% set technischeDaten = car.getTechnischeDaten.getTechnicalData %}
  92.                         <div class="{{ show_filter ? 'col-md-6 col-xl-4' : 'col-md-6 col-lg-4 col-xl-3' }} mb-4">
  93.                             <div class="card h-100 border-0 shadow">
  94.                                 <div class="card-header py-4 bg-white">
  95.                                     <div class="row">
  96.                                         <div class="col-6 pe-0">
  97.                                             <h3 class="mb-1">{{ stammdaten.getMarke }}</h3>
  98.                                             {% if stammdaten.getModellbasis %}
  99.                                                 <h4 class="mb-0 fw-bold">{{ stammdaten.getModellbasis }}</h4>
  100.                                             {% endif %}
  101.                                         </div>
  102.                                         <div class="col-6 ps-0 text-end">
  103.                                             {% if kosten.rotstiftpreis > kosten.getPreis() %}
  104.                                                 <span class="badge rounded-pill bg-danger">Kürzlich reduziert</span>
  105.                                             {% endif %}
  106.                                             <div class="h3 text-nowrap mb-1">
  107.                                                 {{ kosten.getPreis|number_format(2, ',', '.') }}&euro;
  108.                                             </div>
  109.                                             <div class="small text-muted lh-1">
  110.                                                 <small>
  111.                                                     {% if stammdaten.getMwst == 0 %}
  112.                                                         MwSt. ist ausweisbar
  113.                                                     {% else %}
  114.                                                         MwSt. nicht ausweisbar
  115.                                                     {% endif %}
  116.                                                 </small>
  117.                                             </div>
  118.                                         </div>
  119.                                     </div>
  120.                                 </div>
  121.                                 <picture>
  122.                                     {% if (car.images | length) > 0 %}
  123.                                         {% set car_photos = car.images %}
  124.                                         {% set car_photos_length = car_photos | length < 3 ? car_photos | length : 3 %}
  125.                                         {% set bild = car.images|first %}
  126.                                     {% else %}
  127.                                         {% set car_photos_length = 0 %}
  128.                                         {% set src = '/Gebrauchte/Bilder/3301020_FBUN2220298_1.jpeg' %}
  129.                                     {% endif %}
  130.                                     {% if stammdaten.getLieferdatum and show_car_available_from %}
  131.                                         {% set currentDate = date("now") %}
  132.                                         {% set deliveryDate = date(stammdaten.getLieferdatum) %}
  133.                                         {% if deliveryDate > currentDate %}
  134.                                             <span
  135.                                                 class="notify-badge">Verfügbar ab {{ stammdaten.getLieferdatum | date('d.m.y') }}</span>
  136.                                         {% endif %}
  137.                                     {% endif %}
  138.                                     <div class="swiper car-list-image-swiper" style="z-index: 2">
  139.                                         <div class="swiper-wrapper">
  140.                                             {% if car_photos_length != 0 %}
  141.                                                 {% for i in 1 .. car_photos_length %}
  142.                                                     <a class="swiper-slide"
  143.                                                        href="{{ pimcore_relation('carDetailPageUrl').getFullPath() }}?i={{ car.getInternalVehicleId }}">
  144.                                                         <img
  145.                                                             class="swiper-slide"
  146.                                                             src="{{ car_photos[i - 1].thumbnail({'width': 330, 'format': 'jpeg', 'quality': 60,}) }}"
  147.                                                             alt="{{ stammdaten.getMarke }} {{ stammdaten.getModellbasis }} (Bild {{ i }}/{{ car_photos|length }})">
  148.                                                     </a>
  149.                                                 {% endfor %}
  150.                                             {% else %}
  151.                                                 <img src="{{ src }}" class="w-100 h-auto"
  152.                                                      alt="{{ stammdaten.getMarke }} {{ stammdaten.getModellbasis }}">
  153.                                             {% endif %}
  154.                                         </div>
  155.                                         <div class="swiper-button-next"></div>
  156.                                         <div class="swiper-button-prev"></div>
  157.                                         <div class="swiper-pagination"></div>
  158.                                     </div>
  159.                                 </picture>
  160.                                 <div class="card-body d-flex flex-column">
  161.                                     <div class="row text-center mb-4">
  162.                                         <div class="col-4">
  163.                                             <div class="h4 mb-1 text-nowrap">
  164.                                                 {{ stammdaten.ez ? stammdaten.ez : technischeDaten.kraftstoffart }}
  165.                                             </div>
  166.                                             <div class="small lh-1">
  167.                                                 <small>{{ stammdaten.ez ? 'Erstzulassung' : 'Kraftstoff' }}</small>
  168.                                             </div>
  169.                                         </div>
  170.                                         <div class="col-4 border-start border-end">
  171.                                             <div class="h4 mb-1 text-nowrap">
  172.                                                 {{ stammdaten.kilometer }}<span class="text-muted">km</span>
  173.                                             </div>
  174.                                             <div class="small lh-1">
  175.                                                 <small>Laufleistung</small>
  176.                                             </div>
  177.                                         </div>
  178.                                         <div class="col-4">
  179.                                             <div class="h4 mb-1 text-nowrap">
  180.                                                 {% if hasLeasingRate %}
  181.                                                     {{ leasing.getMonatlicheRate }}<span
  182.                                                     class="text-muted">&euro;</span>
  183.                                                 {% elseif hasFinanzierungRate %}
  184.                                                     {{ finanzierung.getMonatlicheRate }}<span
  185.                                                     class="text-muted">&euro;</span>
  186.                                                 {% else %}
  187.                                                     {{ technischeDaten.leistung }}<span class="text-muted">kw</span>
  188.                                                 {% endif %}
  189.                                             </div>
  190.                                             <div class="small lh-1">
  191.                                                 <small>
  192.                                                     {% if hasLeasingRate or hasFinanzierungRate %}
  193.                                                         mtl. Rate<br>inkl. MwSt.
  194.                                                     {% else %}
  195.                                                         Leistung
  196.                                                     {% endif %}
  197.                                                 </small>
  198.                                             </div>
  199.                                         </div>
  200.                                     </div>
  201.                                     <div class="card-text small flex-grow-1 px-4 pb-4">
  202.                                         <ul class="list-unstyled small" style="column-count: 2;">
  203.                                             <li>
  204.                                                 Euro {{ technischeDaten.schadstoff }}
  205.                                             </li>
  206.                                             <li>
  207.                                                 {{ innen.getSitze() > 0 ? innen.getSitze() ~ ' Sitze' : '-/-' }}
  208.                                             </li>
  209.                                             <li>
  210.                                                 {{ technischeDaten.getAnzahlGNge() > 0 ? technischeDaten.getAnzahlGNge() ~ ' Gänge' : '-/-' }}
  211.                                             </li>
  212.                                             <li>
  213.                                                 {{ technischeDaten.getLeergewicht() > 0 ? technischeDaten.getLeergewicht() ~ 'kg' : '-/-' }}
  214.                                             </li>
  215.                                             <li>
  216.                                                 {{ stammdaten.getTueren() > 0 ? stammdaten.getTueren() ~ ' Türen' : '-/-' }}
  217.                                             </li>
  218.                                             <li>
  219.                                                 {{ technischeDaten.getZylinder() > 0 ? technischeDaten.getZylinder() ~ ' Zylinder' : '-/-' }}
  220.                                             </li>
  221.                                         </ul>
  222.                                         <p class="small text-muted">
  223.                                             {% if technischeDaten.kraftstoffart == 'Elektro' %}
  224.                                                 Stromverbrauch:
  225.                                                 <br>
  226.                                                 {{ stammdaten.getKombinierterStromverbrauchWltp ? stammdaten.getKombinierterStromverbrauchWltp : '-/-' }} kWh/100km (WLTP)
  227.                                                 <br>
  228.                                                 Elektrische Reichweite kombiniert:<br>
  229.                                                 {{ technischeDaten.elektromotorReichweiteBeiMinNachWLTP ? technischeDaten.elektromotorReichweiteBeiMinNachWLTP ~ ' km' : '-/-' }} (WLTP)
  230.                                                 <br>
  231.                                                 {% if technischeDaten.elektromotorReichweiteBeiMaxNachWLTP > 0 %}
  232.                                                     Elektrische Reichweite innerorts:<br>
  233.                                                     {{ technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ? technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ~ ' km' : '-/-' }} (WLTP)
  234.                                                     <br>
  235.                                                 {% endif %}
  236.                                                 CO<sup>2</sup>-Emissionen kombiniert:<br>
  237.                                                 {{ technischeDaten.getEmissionWltp ? technischeDaten.getEmissionWltp ~ ' g/km' : '0 g/km' }} (WLTP)
  238.                                                 <br>
  239.                                                 CO
  240.                                                 <sup>2</sup>-Klasse: {{ technischeDaten.energieEffizienzKlasse ? technischeDaten.energieEffizienzKlasse : '' }}
  241.                                             {% elseif technischeDaten.kraftstoffart == 'Hybrid' %}
  242.                                                 Kraftstoffverbrauch kombiniert:
  243.                                                 <br>
  244.                                                 {{ technischeDaten.gewichteterKombinierterKraftstoffverbrauchWLTP > 0 ? technischeDaten.gewichteterKombinierterKraftstoffverbrauchWLTP ~ ' l/100km' : '-/-' }} (WLTP, gew.)
  245.                                                 <br>
  246.                                                 Stromverbrauch kombiniert:
  247.                                                 <br>
  248.                                                 {{ stammdaten.getKombinierterStromverbrauchWltp ? stammdaten.getKombinierterStromverbrauchWltp : '-/-' }} kWh/100km (WLTP)
  249.                                                 <br>
  250.                                                 Kraftstoffverbrauch bei entladener Batterie kombiniert:
  251.                                                 <br>
  252.                                                 {{ technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie > 0 ? technischeDaten.kombinierterKraftstoffverbrauchEntlBatterie ~ ' l/100km' : '-/-' }} (WLTP)
  253.                                                 <br>
  254.                                                 Elektrische Reichweite kombiniert:<br>
  255.                                                 {{ technischeDaten.elektromotorReichweiteBeiMinNachWLTP ? technischeDaten.elektromotorReichweiteBeiMinNachWLTP ~ ' km' : '-/-' }} (WLTP)
  256.                                                 <br>
  257.                                                 {% if technischeDaten.elektromotorReichweiteBeiMaxNachWLTP > 0 %}
  258.                                                     Elektrische Reichweite innerorts:<br>
  259.                                                     {{ technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ? technischeDaten.elektromotorReichweiteBeiMaxNachWLTP ~ ' km' : '-/-' }} (WLTP)
  260.                                                     <br>
  261.                                                 {% endif %}
  262.                                                 CO<sup>2</sup>-Emissionen kombiniert:<br>
  263.                                                 {{ technischeDaten.getEmissionWltp ? technischeDaten.getEmissionWltp ~ ' g/km' : '-/-' }} (WLTP, gew.)
  264.                                                 <br>
  265.                                                 CO
  266.                                                 <sup>2</sup>-Klasse: {{ technischeDaten.energieeffizienzklasseGewichtetKombiniert ? technischeDaten.energieeffizienzklasseGewichtetKombiniert : '' }}
  267.                                                 <br>
  268.                                                 CO
  269.                                                 <sup>2</sup>-Klasse bei entladener Batterie: {{ technischeDaten.energieeffizienzklasseEntladeneBatterie ? technischeDaten.energieeffizienzklasseEntladeneBatterie : '' }}
  270.                                             {% else %}
  271.                                                 Kraftstoffverbrauch kombiniert:
  272.                                                 <br>
  273.                                                 {{ technischeDaten.getWLTPKombiniert ? technischeDaten.getWLTPKombiniert : '-/-' }} l/100km (WLTP)
  274.                                                 <br>
  275.                                                 CO<sup>2</sup>-Emissionen kombiniert:<br>
  276.                                                 {{ technischeDaten.getEmissionWltp ? technischeDaten.getEmissionWltp ~ ' g/km' : '-/-' }} (WLTP)
  277.                                                 <br>
  278.                                                 CO
  279.                                                 <sup>2</sup>-Klasse: {{ technischeDaten.energieEffizienzKlasse ? technischeDaten.energieEffizienzKlasse : '' }}
  280.                                             {% endif %}
  281.                                         </p>
  282.                                     </div>
  283.                                     <p class="text-center">
  284.                                         <a href="{{ pimcore_relation('carDetailPageUrl').getFullPath() }}?i={{ car.getInternalVehicleId }}"
  285.                                            class="btn btn-primary stretched-link">Zum Fahrzeug</a>
  286.                                     </p>
  287.                                 </div>
  288.                             </div>
  289.                         </div>
  290.                     {% endfor %}
  291.                     {% include '@VehicleMarketBundle/paginator.html.twig' %}
  292.                 {% else %}
  293.                     <div class="col-12 mb-4">
  294.                         <h3 class="text-center my-5">
  295.                             Keine Fahrzeuge gefunden.
  296.                         </h3>
  297.                     </div>
  298.                 {% endif %}
  299.             </div>
  300.         </div>
  301.     </div>
  302. </div>
  303. <script>
  304.     // VehicleFilter
  305.     function getFilterUrl() {
  306.         let carFilter = document.getElementById('carFilterForm');
  307.         let make = carFilter.querySelector('#car_list_filter_form_car_make').value;
  308.         let model = carFilter.querySelector('#car_list_filter_form_car_model') != null ? carFilter.querySelector('#car_list_filter_form_car_model').value : '';
  309.         let type = carFilter.querySelector('#car_list_filter_form_car_type').value;
  310.         let ageType = carFilter.querySelector('#car_list_filter_form_car_age_type').value;
  311.         let registrationStartYear = carFilter.querySelector('#car_list_filter_form_registration_year_start').value;
  312.         let registrationEndYear = carFilter.querySelector('#car_list_filter_form_registration_year_end').value;
  313.         let monthlyRateMin = carFilter.querySelector('#car_list_filter_form_monthly_rate_min').value;
  314.         let monthlyRateMax = carFilter.querySelector('#car_list_filter_form_monthly_rate_max').value;
  315.         let kmDriven = carFilter.querySelector('#car_list_filter_form_km_driven').value;
  316.         let transmission = carFilter.querySelector('#car_list_filter_form_transmission').value;
  317.         let fuel = carFilter.querySelector('#car_list_filter_form_fuel').value;
  318.         let color = carFilter.querySelector('#car_list_filter_form_color').value;
  319.         let location = carFilter.querySelector('#car_list_filter_form_car_location').value;
  320.         let availability = carFilter.querySelector('#car_list_filter_form_car_availability').value;
  321.         let sortOrder = carFilter.querySelector('#car_list_filter_form_sort_order').value;
  322.         let qualityBadge = carFilter.querySelector('#car_list_filter_form_quality_badge').value;
  323.         let campaignName = carFilter.querySelector('#car_list_filter_form_campaign_name') != null ? carFilter.querySelector('#car_list_filter_form_campaign_name').value : '';
  324.         let path = window.location.href.split('?')[0];
  325.         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=';
  326.         return filterUrl;
  327.     }
  328.     function updateFilterCount() {
  329.         let filterUrl = getFilterUrl() + '&json=1';
  330.         fetch(filterUrl)
  331.             .then(response => response.json())
  332.             .then(data => {
  333.                 let count = data['count'];
  334.                 document.getElementById('car_list_filter_form_submit').textContent = 'Filtern (' + count + ')';
  335.             })
  336.             .catch(error => {
  337.                 // Handle error
  338.             });
  339.     }
  340.     function updateVehicleListing() {
  341.         let filterUrl = getFilterUrl();
  342.         let carListingDomElement = document.getElementById('carlisting');
  343.         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>';
  344.         fetch(filterUrl)
  345.             .then(response => response.text())
  346.             .then(htmlString => {
  347.                 let fetchedCarListing = document.createElement('div');
  348.                 fetchedCarListing.innerHTML = htmlString.trim();
  349.                 let carListing = fetchedCarListing.querySelector('#carlisting');
  350.                 carListingDomElement.innerHTML = carListing.innerHTML;
  351.                 history.pushState(history.state, 'Fahrzeugmarkt', filterUrl);
  352.                 const imageSwiperList = new Swiper('.car-list-image-swiper', {
  353.                     loop: false,
  354.                     navigation: {
  355.                         nextEl: '.swiper-button-next',
  356.                         prevEl: '.swiper-button-prev',
  357.                     },
  358.                 });
  359.             })
  360.             .catch(error => {
  361.                 // Handle error
  362.             });
  363.     }
  364.     function updateVehicleFilter() {
  365.         let filterUrl = getFilterUrl();
  366.         let carFilterDomElement = document.getElementById('car-model-select');
  367.         // 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>';
  368.         fetch(filterUrl)
  369.             .then(response => response.text())
  370.             .then(htmlString => {
  371.                 let fetchedCarFilter = document.createElement('div');
  372.                 fetchedCarFilter.innerHTML = htmlString.trim();
  373.                 let carListing = fetchedCarFilter.querySelector('#car-model-select');
  374.                 carFilterDomElement.innerHTML = carListing.innerHTML;
  375.                 carFilterDomElement.addEventListener('change', (e) => {
  376.                     updateFilterCount();
  377.                     // updateVehicleListing();
  378.                 });
  379.                 history.pushState(history.state, 'Fahrzeugmarkt', filterUrl);
  380.             })
  381.             .catch(error => {
  382.                 // Handle error
  383.             });
  384.     }
  385.     /* Do things after DOM has fully loaded */
  386.     let ready = (callback) => {
  387.         if (document.readyState !== 'loading') callback();
  388.         else document.addEventListener('DOMContentLoaded', callback);
  389.     };
  390.     ready(() => {
  391.         let carFilterForm = document.getElementById('carFilterForm');
  392.         let makeSelect = carFilterForm.querySelector('#car_list_filter_form_car_make');
  393.         makeSelect.addEventListener('change', (e) => {
  394.             updateVehicleFilter();
  395.             updateFilterCount();
  396.             // updateVehicleListing();
  397.         });
  398.         carFilterForm.querySelectorAll('select').forEach(filterSelect => {
  399.             filterSelect.addEventListener('change', (e) => {
  400.                 updateFilterCount();
  401.                 // updateVehicleListing();
  402.             });
  403.         });
  404.         carFilterForm.onsubmit = function(e) {
  405.             e.preventDefault();
  406.             document.getElementById('vehicle-area-filter-toggle').checked = false;
  407.             updateVehicleListing();
  408.         };
  409.         updateFilterCount();
  410.         let carSorting = document.getElementById('car_list_filter_sort');
  411.         carSorting.addEventListener('change', (e) => {
  412.             let filter_form_field = document.getElementById('car_list_filter_form_sort_order');
  413.             filter_form_field.value = carSorting.value;
  414.             updateVehicleListing();
  415.         });
  416.     });
  417. </script>