https://sure-trac.com/wp-content/themes/suretrac-elementor-theme/assets/js/choose-model.js?ver=7.0.6

1document.addEventListener('DOMContentLoaded', () => {
2
3    function chooseModelWidget() {
4        const trailerForm = document.querySelector('#choose-trailer')
5        const trailerTypes = document.querySelector('#trailer-types')
6        const trailerModels = document.querySelector('#trailer-models')
7
8        // Populate trailer types on page load
9        let payloadTypes = new URLSearchParams();
10        payloadTypes.append('action', 'populate_dropdown_types')
11
12        fetch('/wp-admin/admin-ajax.php', {
13            method: 'POST',
14            body: payloadTypes
15        })
16            .then(response => {
17                if (!response.ok) {
18                    throw new Error('Network response error!')
19                }
20                return response.json()
21            })
22            .then(data => {
23                trailerTypes.innerHTML = data
24            })
25            .catch(error => {
26                console.error(error);
27            })
28
29        // Populate trailer models dropdown when trailer types is changed
30        trailerTypes.addEventListener('change', () => {
31            let seriesId = trailerTypes.value
32            let payloadModels = new URLSearchParams();
33            payloadModels.append('action', 'populate_dropdown_models')
34            payloadModels.append('seriesId', seriesId)
35
36            fetch('/wp-admin/admin-ajax.php', {
37                method: 'POST',
38                body: payloadModels
39            })
40                .then(response => {
41                    if (!response.ok) {
42                        throw new Error('Network response error!')
43                    }
44                    return response.json()
45                })
46                .then(data => {
47                    trailerModels.innerHTML = data
48                })
49                .catch(error => {
50                    console.error(error);
51                })
52        })
53
54        // Update form action when trailer model is changed
55        trailerModels.addEventListener('change', () => {
56            let productSlug = trailerModels.value
57            trailerForm.action = `/trailers/${productSlug}`
58        })
59
60        // Handle submission
61        trailerForm.addEventListener('submit', (e) => {
62            if (trailerModels.value == '' || trailerModels.value == null) {
63                e.preventDefault()
64                trailerModels.style.outline = '2px solid red'
65            }
66        })
67    }
68
69    function populateVariantCard() {
70        let variantModalWrapper = document.querySelector('#variant-modal-wrapper')
71        let variantModal = document.querySelector('#variant-modal')
72        let viewDetails = document.querySelectorAll('.card-view-details')
73        const variantLoading = variantModal.querySelector('.variant-modal-loading')
74
75        variantModalWrapper.addEventListener('click', (e) => {
76            if (e.target == variantModalWrapper) {
77                variantModalWrapper.classList.toggle('modal-hide')
78            }
79        })
80
81        for (let viewDetail of viewDetails) {
82            viewDetail.addEventListener('click', (e) => {
83                e.preventDefault()
84                let variantId = viewDetail.dataset.variantId
85                let payload = new URLSearchParams();
86                payload.append('action', 'populate_variant_modal')
87                payload.append('variantId', variantId)
88                variantModal.innerHTML = variantLoading.outerHTML
89                variantModalWrapper.classList.toggle('modal-hide')
90                document.querySelector('body').style.overflow = 'hidden'
91
92                fetch('/wp-admin/admin-ajax.php', {
93                    method: 'POST',
94                    body: payload
95                })
96                    .then(response => {
97                        if (!response.ok) {
98                            throw new Error('Network response error!')
99                        }
100                        return response.json()
101                    })
102                    .then(data => {
103                        variantModal.innerHTML = data
104                        variantModal.querySelector('.variant-modal-close').addEventListener('click', () => {
105                            variantModalWrapper.classList.toggle('modal-hide')
106                            document.querySelector('body').style.overflow = 'auto'
107                        })
108                    })
109                    .catch(error => {
110                        console.error(error);
111                    })
112            })
113        }
114    }
115
116    function addSubnavListeners() {
117        const subnavOpen = document.querySelector('.subnav-mobile-open')
118        const subnavClose = document.querySelector('.subnav-mobile-close')
119        const subnavLinks = document.querySelector('.subnav-links-mobile')
120        const subnavLinkItems = subnavLinks.querySelectorAll('.subnav-link-mobile')
121
122        subnavOpen.addEventListener('click', () => {
123            subnavLinks.classList.toggle('subnav-mobile-show')
124            subnavOpen.classList.toggle('hide-toggle')
125            subnavClose.classList.toggle('hide-toggle')
126        })
127
128        subnavClose.addEventListener('click', () => {
129            subnavLinks.classList.toggle('subnav-mobile-show')
130            subnavOpen.classList.toggle('hide-toggle')
131            subnavClose.classList.toggle('hide-toggle')
132        })
133
134        for (let subnavLinkItem of subnavLinkItems) {
135            subnavLinkItem.addEventListener('click', () => {
136                subnavLinks.classList.toggle('subnav-mobile-show')
137                subnavOpen.classList.toggle('hide-toggle')
138                subnavClose.classList.toggle('hide-toggle')
139            })
140        }
141    }
142
143    // function addConfiguratorListeners() {
144    //     const loadedDimInputs = document.querySelectorAll('.loaded-dims input')
145    //     const loadedGvwrInputs = document.querySelector('.loaded-gvwr')
146    //     const gvwrInputs = loadedGvwrInputs.querySelectorAll('input')
147
148    //     for (let loadedDimInput of loadedDimInputs) {
149    //         loadedDimInput.addEventListener('click', () => {
150    //             for (let gvwrInput of gvwrInputs) {
151    //                 gvwrInput.parentElement.style.display = 'flex'
152    //                 if (!gvwrInput.value.includes(loadedDimInput.value)) {
153    //                     gvwrInput.parentElement.style.display = 'none'
154    //                 }
155    //             }
156    //             loadedGvwrInputs.classList.remove('loaded-gvwr')
157    //         })
158    //     }
159    // }
160
161    
162
163    const loadedDims = document.querySelector('.loaded-dims')
164    if (loadedDims) {
165        addConfiguratorListeners()
166    }
167
168    const trailerForm = document.querySelector('#choose-trailer')
169    if (trailerForm) {
170        chooseModelWidget()
171    }
172
173    const variantModal = document.querySelector('#variant-modal-wrapper')
174    if (variantModal) {
175        populateVariantCard()
176    }
177
178    const subNav = document.querySelector('#subnav')
179    if (subNav) {
180        addSubnavListeners()
181    }
182})
183
184function addConfiguratorListeners() {
185        const loadedDimInputs = document.querySelectorAll('.loaded-dims input');
186        const gvwrWrapper = document.querySelector('.loaded-gvwr');
187
188        if (!gvwrWrapper) return;
189
190        const gvwrInputs = gvwrWrapper.querySelectorAll('input');
191
192        function filterGvwrOptions(selectedValue) {

193            gvwrInputs.forEach(gvwrInput => {
194                gvwrInput.checked = false;
195            });
196
197            gvwrInputs.forEach(gvwrInput => {
198                const wrapper = gvwrInput.closest('label') || gvwrInput.parentElement;
199
200                // Reset display to ensure it's not stuck hidden
201                wrapper.style.display = 'flex';
202
203                if (!gvwrInput.value.includes(selectedValue)) {
204                    wrapper.style.display = 'none';
205                }
206            });
207
208            if (gvwrWrapper) {
209                gvwrWrapper.classList.remove('gvwr-hidden');
210            }
211        }
212
213        loadedDimInputs.forEach(input => {
214            input.addEventListener('change', () => {
215                filterGvwrOptions(input.value);
216            });
217
218            // Also re-trigger if already selected (e.g. after submit)
219            if (input.checked) {
220                filterGvwrOptions(input.value);
221            }
222        });
223    }
224
225document.addEventListener('DOMContentLoaded', () => {
226    if (document.querySelector('.loaded-dims')) {
227        addConfiguratorListeners();
228    }
229});
230
231jQuery(document).on('gform_post_render', function () {
232    setTimeout(() => {
233        if (document.querySelector('.loaded-dims')) {
234            addConfiguratorListeners();
235        }
236    }, 100);
237});