https://wk-reifen.de/wp-content/plugins/wheels-elementor-widget/assets/js/frontend.js?ver=1790929332

1(function($) {
2    'use strict';
3
4    class WheelsWidget {
5        constructor(wrapper) {
6            this.wrapper = wrapper;
7            this.data    = window.wheelsWidgetData || {};
8            this.cacheElements();
9            this.bindEvents();
10        }
11
12        cacheElements() {
13            // Scoped to this widget's wrapper so multiple instances on a page work correctly
14            this.el = {
15                wheelsType:      this.wrapper.querySelector('[name="wheels-type"]'),
16                transportType:   this.wrapper.querySelector('[name="transport-type"]'),
17                letsFindButton:  this.wrapper.querySelector('#lets_find'),
18                widthCarInput:   this.wrapper.querySelector('#width-car'),
19                heightCarInput:  this.wrapper.querySelector('#height-car'),
20                radiusCarInput:  this.wrapper.querySelector('#radius-car'),
21            };
22        }
23
24        bindEvents() {
25            this.wrapper.querySelectorAll('.type-action').forEach(el => {
26                el.addEventListener('click', () => {
27                    this.changeTransportType(el.dataset.type, el.dataset.image);
28                });
29            });
30
31            this.wrapper.querySelectorAll('.season-type').forEach(el => {
32                el.addEventListener('click', () => {
33                    this.changeWheelsType(el.dataset.season);
34                });
35            });
36
37            if (this.el.letsFindButton) {
38                this.el.letsFindButton.addEventListener('click', () => this.goShopAction());
39            }
40        }
41
42        changeTransportType(typeValue, imageUrl) {
43            this.wrapper.querySelectorAll('.type-action').forEach(el => el.classList.remove('wheels-active'));
44
45            const active = this.wrapper.querySelector(`[data-type="${typeValue}"]`);
46            if (active) active.classList.add('wheels-active');
47
48            if (this.el.transportType) this.el.transportType.value = typeValue;
49
50            if (imageUrl) {
51                this.wrapper.style.backgroundImage = `url('${imageUrl}')`;
52            }
53
54            this.updateParameters(typeValue);
55        }
56
57        changeWheelsType(seasonValue) {
58            this.wrapper.querySelectorAll('.season-type').forEach(el => el.classList.remove('wheels-active'));
59
60            const active = this.wrapper.querySelector(`[data-season="${seasonValue}"]`);
61            if (active) active.classList.add('wheels-active');
62
63            if (this.el.wheelsType) this.el.wheelsType.value = seasonValue;
64        }
65
66        updateParameters(transportType) {
67            if (!this.data.transportData) return;
68            const typeData = this.data.transportData[transportType];
69            if (!typeData) return;
70
71            this.updateSelect(this.el.widthCarInput,  typeData.widths  || []);
72            this.updateSelect(this.el.heightCarInput, typeData.heights || []);
73            this.updateSelect(this.el.radiusCarInput, typeData.inches  || [], true);
74        }
75
76        // labels = plain values; addZoll = append " Zoll" to display text
77        updateSelect(select, values, addZoll = false) {
78            if (!select) return;
79            const currentValue = select.value;
80
81            select.innerHTML = '';
82
83            values.forEach(value => {
84                const option       = document.createElement('option');
85                option.value       = value;
86                option.textContent = addZoll ? value + ' Zoll' : value;
87                select.appendChild(option);
88            });
89
90            if (values.includes(currentValue)) {
91                select.value = currentValue;
92            }
93        }
94
95        goShopAction() {
96            if (!this.el.wheelsType) {
97                console.warn('WheelsWidget: season select not found in DOM.');
98                return;
99            }
100
101            const seasonSlug = this.el.wheelsType.value;
102            if (!seasonSlug) return;
103
104            const width  = this.el.widthCarInput  ? this.el.widthCarInput.value  : '';
105            const height = this.el.heightCarInput ? this.el.heightCarInput.value : '';
106            const radius = this.el.radiusCarInput ? this.el.radiusCarInput.value : '';
107
108            // Build URL: /product-category/reifen/{season}

108/?größen=205-55-r16&zollgrößen=16-zoll
109            const baseUrl = (this.data.baseUrl || window.location.origin) + '/product-category/reifen/' + seasonSlug + '/';
110            const params  = new URLSearchParams();
111
112            if (width && height && radius) {
113                // e.g. 205-55-r16
114                params.append('größen', width + '-' + height + '-r' + radius);
115                // e.g. 16-zoll
116                params.append('zollgrößen', radius + '-zoll');
117            } else if (width && height) {
118                params.append('größen', width + '-' + height);
119            }
120
121            const finalUrl = baseUrl + (params.toString() ? '?' + params.toString() : '');
122            window.location.href = finalUrl;
123        }
124    }
125
126    function initWheelsWidgets() {
127        document.querySelectorAll('.wheels-wrapper:not([data-wheels-init])').forEach(wrapper => {
128            wrapper.setAttribute('data-wheels-init', '1');
129            new WheelsWidget(wrapper);
130        });
131    }
132
133    // Standard page load
134    document.addEventListener('DOMContentLoaded', initWheelsWidgets);
135
136    // AJAX-loaded content: mega menus, Elementor popups, dynamic widgets
137    $(document).on('ajaxComplete', function() {
138        setTimeout(initWheelsWidgets, 150);
139    });
140
141})(jQuery);