https://33divana.com/local/templates/.default/js/main.js?172481353011453

1class Lookbook{
2    constructor(root) {
3        this.root = root;
4        this.pointers = this.root.querySelectorAll('.lookbook__pointer');
5        this.bindListeners();
6    }
7    disactivePointers() {
8        this.pointers.forEach(pointer => {
9            pointer.classList.remove('lookbook__pointer_active');
10        });
11    }
12    bindListeners() {
13        this.root.addEventListener('mousemove', (event) => {
14            if (event.target.classList.contains('lookbook__pointer')) {
15                event.target.classList.add('lookbook__pointer_active');
16            }
17        })
18        this.root.addEventListener('mouseout', (event) => {
19            if (!this.root.contains(event.toElement)){
20                this.disactivePointers();
21            }
22        })
23    }
24}
25
26window.onload = () => {
27
28    const isMobile = document.documentElement.clientWidth < 768;
29    const isTablet = document.documentElement.clientWidth < 1100;
30
31    let lookbooks = document.querySelectorAll('.lookbook');
32    lookbooks.forEach((lookbook) => {
33        new Lookbook(lookbook);
34    })
35    
36    const heroSelect = document.querySelector('.hero-select');
37    if (heroSelect !== null) {
38        heroSelect.addEventListener('click', (event) => {
39            heroSelect.classList.toggle('hero-select_active');
40        })
41    }
42    
43
44    const blogSwiper = new Swiper('.blog__swiper', {
45        // Optional parameters
46        slidesPerView: 1,
47        spaceBetween: 20,
48        freeMode: true,
49      
50        scrollbar: {
51          el: '.swiper-scrollbar',
52        },
53
54        breakpoints: {
55            768: {
56                slidesPerView: 3
57            },
58            1100: {
59                slidesPerView: 4
60            }
61        },
62    });
63
64    const headerMenu = document.querySelector('.header-menu');
65    const burgerMenuButton = document.querySelector('.header__burger-button');
66    const burgerInnerLinks = document.querySelectorAll('.header-menu__elem>.header-menu__link');
67
68    burgerMenuButton.addEventListener('click', (event) => {
69        headerMenu.classList.toggle('header-menu_open');
70        burgerInnerLinks.forEach((elem) => {
71            elem.parentElement.classList.remove('header-menu__elem_active');
72        })
73    })
74
75    if(isTablet) {
76        if(burgerInnerLinks.length > 0) {
77            burgerInnerLinks.forEach((elem) => {
78                elem.addEventListener('click', (event) => {
79                    event.preventDefault();
80                    if(elem.parentElement.classList.contains('header-menu__elem_active')) {
81                        window.location.href = elem.getAttribute('href');
82                    }
83                    elem.parentElement.classList.add('header-menu__elem_active');
84                })
85            })
86        }
87    }
88
89    document.addEventListener('click', (event) => {
90        if(!headerMenu.contains(event.target) && !event.target.classList.contains('header__burger-button')){
91            headerMenu.classList.remove('header-menu_open');
92            burgerInnerLinks.forEach((elem) => {
93                elem.parentElement.classList.remove('header-menu__elem_active');
94            })
95        }
96    })
97
98    const productSwiper = new Swiper(".product__swiper-thumb", {
99        spaceBetween: 10,
100        slidesPerView: 3,
101        freeMode: true,
102        watchSlidesProgress: true,
103    });
104
105    const QWE = document.querySelector('.product__swiper');
106
107    if(QWE !== null) {
108        if(!QWE.classList.contains('catalog-full__swiper')){
109            const productSwiperThumb = new Swiper(".product__swiper", {
110                spaceBetween: 10,
111                autoHeight: true,
112                navigation: {
113                    nextEl: ".swiper-button-next",
114                    prevEl: ".swiper-button-prev",
115                },
116                thumbs: {
117                    swiper: productSwiper,
118                },
119            });
120        }
121        else{
122            const catalogFullSwiperThumb = new Swiper(".catalog-full__swiper", {
123                spaceBetween: 10,
124                autoHeight: true,
125                navigation: {
126                    nextEl: ".swiper-button-next",
127                    prevEl: ".swiper-button-prev",
128                },
129            });
130        }
131    }
132
133    
134    
135
136
137    
138
139    const thumbLoader = document.querySelector('.product__swiper-thumb .loader__wrapper');
140    if(thumbLoader !== null) {
141        thumbLoader.classList.add('loader__wrapper_hidden');
142    }
143
144    const catalogSwiper = new Swiper(".catalog__swiper", {
145        slidesPerView: 1,
146        grid: {
147          rows: 1,
148        },
149        spaceBetween: 30,
150        navigation: {
151            nextEl: ".swiper-button-next",
152            prevEl: ".swiper-button-prev",
153        },
154        breakpoints: {
155            768: {
156                grid: {
157                    rows: 2,
158                  },
159                slidesPerView: 2
160            },
161            1100: {
162                grid: {
163                    rows: 2,
164                  },
165                slidesPerView: 3
166            }
167        },
168    });
169
170    let productButton = document.querySelector('.product__button');
171    if(productButton !== null) {
172
173        //Если есть в наличии и ещё не добавлен в корзин

173у, то добавляем ajax корзину
174        if(productButton.classList.contains('product__button_in-stock')){
175            $(productButton).click(function(){
176                if(!productButton.classList.contains('product__button_success')){
177                    productButton.innerHTML = '<img class="loader" src="' + $(this).attr('data-loader') + '">';
178                    $.ajax({
179                        type: "GET",
180                        url: $(this).attr('data-value')+"&quantity=1",
181                        dataType: "html",
182                        success: function(out){
183                            productButton.innerHTML = 'Товар добавлен в корзину';
184                            productButton.classList.add('product__button_success');
185                        }
186                    });
187                }
188            });
189        }
190
191        //Если нет в наличии, то отображаем ФОС
192        else{
193            let productForm = document.querySelector('.product-form__wrapper');
194            productButton.addEventListener('click', (event) => {
195                if(!productForm.classList.contains('product-form__wrapper_active')) {
196                    productForm.classList.add('product-form__wrapper_active');
197                    setTimeout(() => {
198                        productForm.scrollIntoView({block: "center", inline: "center"});
199                    }, 800);
200                }
201                else{
202                    productForm.scrollIntoView({block: "center", inline: "center"});
203                }
204            })
205        }
206    }
207
208    const filterForm = document.querySelector('.filters__form');
209    const filterOverlay = document.querySelector('.filters__overlay');
210    const filterButton = document.querySelector('.filters__icon-wrapper');
211    if(filterButton !== null) {
212        filterButton.addEventListener('click', (event) => {
213            filterForm.classList.toggle('filters__form_active');
214            filterButton.classList.toggle('filters__icon-wrapper_active');
215            filterOverlay.classList.toggle('filters__overlay_active');
216        })
217    }
218
219    const filterClose = document.querySelector('.filters__close');
220    if(filterClose !== null) {
221        filterClose.addEventListener('click', (event) => {
222            filterForm.classList.remove('filters__form_active');
223            filterButton.classList.remove('filters__icon-wrapper_active');
224            filterOverlay.classList.remove('filters__overlay_active');
225        })
226    }
227
228    document.addEventListener('click', (event) => {
229        if(filterButton !== null) {
230            if(!filterForm.contains(event.target) && !filterButton.contains(event.target)) {
231                filterForm.classList.remove('filters__form_active');
232                filterButton.classList.remove('filters__icon-wrapper_active');
233                filterOverlay.classList.remove('filters__overlay_active');
234            }
235        }
236    })
237
238/*
239    var $range = $(".range-input");
240    var $inputFrom = $(".range-from");
241    var $inputTo = $(".range-to");
242    var instance;
243    var min = 0;
244    var max = 200000;
245
246    $range.each((index, elem) => {
247        $(elem).ionRangeSlider({
248            skin: "round",
249            type: "double",
250            min: min,
251            max: max,
252            onStart: updateInputs,
253            onChange: updateInputs,
254            onFinish: updateInputs,
255            hide_min_max: false,
256            hide_from_to: false
257        });
258        instance = $(elem).data("ionRangeSlider");
259        
260        function updateInputs (data) {
261            from = data.from;
262            to = data.to;
263        
264            $($inputFrom[index]).prop("value", from);
265            $($inputTo[index]).prop("value", to);
266        }
267        
268        $($inputFrom[index]).on("change", function () {
269            var val = $(this).prop("value");
270        
271            // validate
272            if (val < min) {
273                val = min;
274            } else if (val > to) {
275                val = to;
276            }
277        
278            instance.update({
279                from: val
280            });
281        
282            $(this).prop("value", val);
283        
284        });
285        
286        $($inputTo[index]).on("change", function () {
287            var val = $(this).prop("value");
288        
289            // validate
290            if (val < from) {
291                val = from;
292            } else if (val > max) {
293                val = max;
294            }
295        
296            instance.update({
297                to: val
298            });
299        
300            $(this).prop("value", val);
301        });
302    }) */
303
304    let phoneInputs = document.querySelectorAll('input[type="tel"');
305    if(phoneInputs.length > 0) {
306        IMask(phoneInputs, {
307            mask: '+{7}(000)000-00-00'
308        })
309    }
310
311    function getActiveOption(select) {
312        let indexSelected = select.selectedIndex;
313        return select.querySelectorAll('option')[indexSelected];
314    }
315
316
317    const selectDelivery = document.querySelector('#select-delivery');
318    const selectPayment = document.querySelector('#select-payment');
319    
320
321    if(selectDelivery !== null && selectPayment !== null) {
322        const selectPaymentOptions = selectPayment.querySelectorAll('option');
323        selectDelivery.addEventListener('change', (event) => {
324            dataDelivery = getActiveOption(selectDelivery).getAttribute('data-delivery');
325            selectPaymentOptions.forEach((option) => {
326                if(option.getAttribute('data-delivery') != dataDelivery && option.getAttribute('data-delivery') != 'default') {
327                    option.style.display = 'none';
328                }
329                else {
330                    option.style.display = 'block';
331                }
332            })
333            selectPayment.value = 'Выбрать...';
334        })
335    }
336
337
338    let lastScroll = window.pageYOffset;
339    let mainHeader = document.querySelector('.header');
340    document.addEventListener('scroll', (event) => {
341        if(lastScroll < window.pageYOffset) {
342            mainHeader.classList.add('header_hidden');
343        }
344        else {
345            mainHeader.classList.remove('header_hidden');
346        }
347        lastScroll = window.pageYOffset;
348    })
349
350}