https://quomoshop.es/assets/store/controllers/promotion3x2_controller

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4    static targets = ['filter', 'containerFilter', 'containerProducts', 'filterMobile']
5
6    connect() {
7
8        const deskFilterForm = document.querySelector('#desk-filter-form')
9        if (deskFilterForm) {
10            deskFilterForm.addEventListener('turbo:before-fetch-response', (event) => {
11                if (event.target.tagName === 'FORM') {
12                    event.target.querySelectorAll('.btn-secondary').forEach(link => {
13                        link.classList.remove('d-none')
14                    })
15                }
16            });
17        }
18
19        const horizontaltoggle = document.querySelector(".toggle-filtros-escritorio2.horizontal");
20        if (horizontaltoggle) {
21            document.querySelector(".toggle-filtros-escritorio2.horizontal").addEventListener('click', this.filterToggleHorizontal.bind(this))
22        }
23
24        const filters = document.querySelector('#filters')
25        if (filters) {
26            //filters.addEventListener('turbo:frame-load', (event) => {
27            //Filtro colores
28            const colorInput = document.querySelectorAll('#desk-filter-form input[name="filter_colors[]"]')
29            colorInput.forEach(input => {
30                input.addEventListener('click', (event) => {
31                    this.filterCounter(event.target, document.querySelector('#color-filter-counter'));
32                })
33            })
34            //Filtro categorias
35            const categoryInput = document.querySelectorAll('#desk-filter-form input[name="filter_categories"]')
36            categoryInput.forEach(input => {
37                input.addEventListener('click', (event) => {
38                    this.filterCounter(event.target, document.querySelector('#category-filter-counter'));
39                })
40            })
41            //Filtro tallas
42            const sizeInput = document.querySelectorAll('#desk-filter-form input[name="filter_sizes[]"]')
43            sizeInput.forEach(input => {
44                input.addEventListener('click', (event) => {
45                    this.filterCounter(event.target, document.querySelector('#size-filter-counter'));
46                })
47            })
48
49            //Filtro marcas
50            const brandInput = document.querySelectorAll('#desk-filter-form input[name="filter_brands[]"]')
51            brandInput.forEach(input => {
52                input.addEventListener('click', (event) => {
53                    this.filterCounter(event.target, document.querySelector('#brand-filter-counter'));
54                })
55            })
56
57            document.querySelectorAll('.label-size').forEach(label => {
58                label.addEventListener('click', (event) => {
59                    const sizeId = event.currentTarget.dataset.id
60                    const checkbox = document.querySelector('#size_desktop_' + sizeId)
61
62                    if (checkbox.checked) {
63                        event.currentTarget.classList.remove('label-size-checked')
64                    } else {
65                        event.currentTarget.classList.add('label-size-checked')
66                    }
67                })
68            })
69
70            //control range de precios
71            var pricesFilter = document.querySelector('#desk-filter-form .filter-price-menu')
72            const priceFilterDropdownBtn = document.querySelector('#desk-filter-form .price-dropdown-btn')
73            console.log('loaded')
74            if (priceFilterDropdownBtn) {
75                priceFilterDropdownBtn.addEventListener('click', (event) => {
76                    this.rangePriceInput(event, pricesFilter)
77                })
78            }
79
80            //legacy
81            if (this.filterVersionValue === '1.0' || !this.hasFilterVersionValue) {
82                document.addEventListener('click', (event) => {
83                    if (event.target.closest('.filter-dropdown-btn') || (event.target.closest('.dropdown-menu'))) {
84                        return;
85                    }
86                    const dropdownBtnActive = document.querySelectorAll('.filter-dropdown-btn.show')
87                    dropdownBtnActive.forEach(btn => {
88
89                        const chevron = btn.querySelector('.filter-chev')
90                        if (chevron) {
91                            chevron.classList.remove('rotate');
92                            btn.classList.remove('show');
93                        }
94                        document.querySelectorAll('.dropdown-menu').forEach(menu => {
95                            menu.classList.remove('show')
96                        })
97                    })
98                });
99
100                const dropdownBtn = document.querySelectorAll('.filter-dropdown-btn')

101                dropdownBtn.forEach(dropdown => {
102                    dropdown.addEventListener('click', (event) => {
103                        this.dropdownAction(event.currentTarget)
104                    })
105                })
106            }
107            //})
108
109
110        }
111
112        const pricesFilterMobile = document.querySelector('#offcanvas-filter #price-accordion')
113        if (pricesFilterMobile) {
114            document.querySelector('#offcanvas-filter #prices .accordion-button').addEventListener('click', (event) => {
115                this.rangePriceInput(event, pricesFilterMobile)
116            })
117        }
118
119    }
120
121
122    filterToggleVertical(event) {
123        if (!this.hasFilterTarget) return
124        const filtros = this.filterTarget
125        const containerFilter = this.containerFilterTarget
126        const containerProducts = this.containerProductsTarget
127        const isVisible = containerFilter.classList.contains('d-lg-flex')
128
129        if (isVisible) {
130            containerFilter.classList.remove('d-lg-flex')
131            containerProducts.classList.remove('col-lg-9')
132            filtros.classList.add('invisible')
133        } else {
134            containerFilter.classList.add('d-lg-flex')
135            containerProducts.classList.add('col-lg-9')
136            filtros.classList.remove('invisible')
137        }
138
139        const texto = filtros.classList.contains('invisible')
140            ? window.I18n[window.I18n.locale].store.promotions.mostrar_filtros
141            : window.I18n[window.I18n.locale].store.promotions.ocultar_filtros;
142
143        document.querySelector('.toggle-filtros-texto2').innerHTML = texto;
144    }
145
146    filterToggleHorizontal(event) {
147        if (!this.hasFilterTarget) return
148        const filtros = this.filterTarget
149
150        if (filtros.classList.contains('invisible')) {
151            filtros.classList.remove('invisible')
152        } else {
153            filtros.classList.add('invisible')
154        }
155        const texto = filtros.classList.contains('invisible')
156            ? window.I18n[window.I18n.locale].store.promotions.mostrar_filtros
157            : window.I18n[window.I18n.locale].store.promotions.ocultar_filtros;
158
159        document.querySelector('.toggle-filtros-texto2').innerHTML = texto;
160    }
161
162    orderSubmit(event) {
163        var orderHiddeInput = document.getElementById('desk-order-input')
164        if (orderHiddeInput) {
165            orderHiddeInput.value = event.currentTarget.value
166        }
167        const filterForm = document.querySelector('#desk-filter-form')
168        filterForm.submit()
169    }
170
171    filterCounter(filterInput, filterTag) {
172        var counter = parseInt(filterTag.innerText);
173        var currentCounter = isNaN(counter) ? 0 : counter;
174
175        if (filterInput.type === "checkbox") {
176            if (filterInput.checked) {
177                currentCounter += 1;  // Incrementar si está marcado
178            } else {
179                currentCounter -= 1;  // Decrementar si se desmarca
180                if (currentCounter < 0) currentCounter = 0;  // Evitar números negativos
181            }
182        } else if (filterInput.type === "radio") {
183            currentCounter = 1;  // Radio selecciona solo una opción
184        }
185
186        // Mostrar/ocultar el tag según el contador
187        if (currentCounter === 0) {
188            filterTag.classList.add('d-none');
189        } else {
190            filterTag.classList.remove('d-none');
191        }
192
193        // Actualizar el valor del tag
194        filterTag.textContent = currentCounter;
195    }
196
197    dropdownAction(btn) {
198        const dropdownBtn = btn
199        const menu = dropdownBtn.nextElementSibling;
200        const chevron = dropdownBtn.querySelector('.filter-chev');
201        chevron.classList.toggle('rotate');
202        document.querySelectorAll('.filter-dropdown-btn .filter-chev').forEach(otherChevron => {
203            if (otherChevron !== chevron) {
204                otherChevron.classList.remove('rotate');
205            }
206        });
207        document.querySelectorAll('.filter-dropdown-menu').forEach(otherMenu => {
208            if (otherMenu !== menu) {
209                otherMenu.classList.remove('show');
210            }
211        });
212    }
213
214    rangePriceInput(e, pricesFilter) {
215        const rangeInput = pricesFilter.querySelectorAll(".range-input input")
216        const priceInput = pricesFilter.querySelectorAll(".price-input input")
217        const range = pricesFilter.querySelector(".slider .progress")
218        let priceGap = pricesFilter.querySelector('.price-gap').dataset.pricegap
219
220        const priceCounter = document.querySelector('#desk-filter-form #price-filter-counter')
221
222        let minVal = parseInt(rangeInput[0].value),
223            maxVal = parseInt(rangeInput[1].value) + 1;
224
225        if ((maxVal - minVal) < priceGap) {
226            if (e.target.className === "range-min") {
227                rangeInput[0].value = maxVal - priceGap
228            } else {
229                rangeInput[1].value = minVal + priceGap;
230            }
231        } else {
232            range.style.left = ((minVal / rangeInput[0].max) * 100) + "%";
233            range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
234        }
235
236        priceInput.forEach(input => {
237            input.addEventListener("input", e => {
238                let minPrice = parseInt(priceInput[0].value),
239                    maxPrice = parseInt(priceInput[1].value) + 1;
240
241                if ((maxPrice - minPrice >= priceGap) && maxPrice <= rangeInput[1].max) {
242                    if (e.target.className === "input-min") {
243                        rangeInput[0].value = minPrice;
244                        range.style.left = ((minPrice / rangeInput[0].max) * 100) + "%";
245                    } else {
246                        rangeInput[1].value = maxPrice;
247                        range.style.right = 100 - (maxPrice / rangeInput[1].max) * 100 + "%";
248                    }
249                }
250                if (priceCounter) {
251                    priceCounter.textContent = "1"
252                    priceCounter.classList.remove('d-none');
253                }
254            });
255        });
256
257        rangeInput.forEach(input => {
258            input.addEventListener("input", e => {
259                let minVal = parseInt(rangeInput[0].value),
260                    maxVal = parseInt(rangeInput[1].value) + 1;
261
262                if ((maxVal - minVal) < priceGap) {
263                    if (e.target.className === "range-min") {
264                        rangeInput[0].value = maxVal - priceGap
265                    } else {
266                        rangeInput[1].value = minVal + priceGap;
267                    }
268                } else {
269                    priceInput[0].value = minVal;
270                    priceInput[1].value = maxVal;
271                    range.style.left = ((minVal / rangeInput[0].max) * 100) + "%";
272                    range.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
273                }
274                if (priceCounter) {
275                    priceCounter.textContent = "1"
276                    priceCounter.classList.remove('d-none');
277                }
278            });
279        });
280    }
281};