https://derlak.ru/local/templates/derlak/js/main.js

1document.addEventListener('DOMContentLoaded', function() {
2    const header = document.querySelector('.header');
3    let lastScrollTop = 0;
4    
5    function handleScroll() {
6        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
7
8        if (scrollTop > 400) {
9            header.classList.add('fixed');
10        } else if (scrollTop < 300) {
11            header.classList.remove('fixed');
12        }
13        
14        lastScrollTop = scrollTop;
15    }
16    
17    window.addEventListener('scroll', handleScroll);
18    
19    handleScroll();
20
21    const swiperImp = new Swiper('.important-slider', {
22        loop: true,
23        speed: 1000,
24        effect: "fade",
25        autoplay: {
26            delay: 4000,
27            disableOnInteraction: false,        
28        },
29        pagination: {
30            el: '.important-pagination',
31        },
32        navigation: {
33            nextEl: '.important-button-next',
34            prevEl: '.important-button-prev',
35        },
36    });
37    Fancybox.bind('[data-fancybox]', {
38    }); 
39
40    const swiperBann = new Swiper('.banners-slider', {
41        loop: true,
42        speed: 1000,
43        autoHeight: false,
44        autoplay: {
45            delay: 5000,
46            disableOnInteraction: false,        
47        },
48        pagination: {
49            el: '.important-pagination',
50        },
51        navigation: {
52            nextEl: '.important-button-next',
53            prevEl: '.important-button-prev',
54        },
55    });
56
57    const swiperRecom = new Swiper('.recommended-slider', {
58        spaceBetween: 30,
59        slidesPerView: 4,
60        pagination: {
61            el: '.recommended-pagination',
62        },
63        navigation: {
64            nextEl: '.recommended-button-next',
65            prevEl: '.recommended-button-prev',
66        },
67        breakpoints: {
68            320: {
69                slidesPerView: 1,
70                spaceBetween: 20,
71                pagination: {enabled: true},
72            },
73            640: {
74                slidesPerView: 2,
75                spaceBetween: 20,
76                pagination: {enabled: false},
77            },
78            768: {
79                slidesPerView: 2,
80                spaceBetween: 30,
81                pagination: {enabled: false},
82            },
83            1024: {
84                slidesPerView: 4,
85                spaceBetween: 30,
86                pagination: {enabled: false},
87            },
88        },
89    });
90
91    // фон у блоков на главной
92    const catalogContainer = document.querySelector('.main-catalog');
93    const catalogItems = document.querySelectorAll('.main-catalog__item');
94    
95    catalogItems.forEach(item => {
96        if (window.getComputedStyle(item).backgroundSize === 'cover') {
97            item.style.backgroundSize = '110% auto';
98        }
99    });
100   
101    if (catalogContainer) {
102        catalogContainer.addEventListener('mousemove', function(e) {
103            const rect = this.getBoundingClientRect();
104            const normalizedX = (e.clientX - rect.left) / rect.width - 0.5;
105        
106            const parallaxOffset = normalizedX * -30;
107        
108            catalogItems.forEach(item => {
109                item.style.backgroundPosition = `${50 + parallaxOffset}% 50%`;
110            });
111        });
112    
113        catalogContainer.addEventListener('mouseleave', function() {
114            catalogItems.forEach(item => {
115                item.style.backgroundPosition = 'center center';
116            });
117        });
118    }
119
120});
121
122document.addEventListener('DOMContentLoaded', function() {
123    const searchBtn = document.getElementById('search-btn');
124    
125    if (searchBtn) {
126        searchBtn.addEventListener('click', function() {
127            let searchElement = document.querySelector('.header.fixed .search');
128            if (searchElement) {
129                searchElement.classList.add('active');
130            }
131        });
132        document.body.addEventListener('click', (e) => {
133            if (e.target.closest('#title-search') === null && e.target.id !== 'search-btn') {
134                let searchElement = document.querySelector('.header.fixed .search');
135                if (searchElement) {
136                    searchElement.classList.remove("active");
137                }
138            }
139        });
140    }
141
142    const burger = document.querySelector('.t-menuburger');
143    const mobileMenu = document.querySelector('.mobile-menu');
144    
145    if (burger && mobileMenu) {
146        burger.addEventListener('click', function() {
147            const isOpened = this.classList.contains('t-menuburger-opened');
148            
149            this.classList.toggle('t-menuburger-opened');
150            
151            if (!isOpened) {
152                mobileMenu.style.display = 'flex';
153                setTimeout(() => {
154                    mobileMenu.style.maxHeight = '100vh';
155                    mobileMenu.style.opacity = '1';
156                }, 10);
157            } else {
158                mobileMenu.style.maxHeight = '0';
159                mobileMenu.style.opacity = '0';
160                setTimeout(() => {
161                    mobileMenu.style.display = 'none';
162                }, 300);
163            }
164        });
165        
166    }
167});
168
169
170
171function openAlert(title = '', msg = '', showLogo = false, button = {}) {
172    if (!msg && !title) {
173        return false;

174    }
175
176    let html = '';
177    if (showLogo) {
178        html += '<img class="dl-alert__logo" src="/local/templates/derlak/images/derlak-logo.png.webp">';
179    }
180    if (title) {
181        html += '<div class="dl-alert__title">'+title+'</div>';
182    }
183    if (msg) {
184        html += '<div class="dl-alert__msg">'+msg+'</div>';
185    }
186    if (button && typeof button.text !== 'undefined') {
187        html += '<a href="'+button.href+'" class="dl-alert__btn btn">'+button.text+'</a>';
188    }
189    
190    openPopup (html);
191}
192
193function openPopup (html) {
194    Fancybox.close();
195    Fancybox.show(
196        [{
197            html: '<div class="dl-alert">'+html+'</div>',
198        }],
199        {
200            mainClass: 'dl-alert-wrap',
201            on: {
202                ready: () => {
203                    setTimeout(function () {
204                        initEventOpenAuthPopup(document.querySelector('.dl-alert-wrap'));
205                    }, 500);
206                }
207            }
208        }
209    )
210}
211
212function bindAdd2Cart () {
213    document.querySelectorAll('.qty').forEach(function(qtyBlock) {
214        var productId = qtyBlock.querySelector('input').id.replace('qty-', '');
215        var qtyInput = document.getElementById('qty-' + productId);
216        var incBtn = document.getElementById('inc-' + productId);
217        var decBtn = document.getElementById('dec-' + productId);
218        var addToCartBtn = document.getElementById('addToCart-' + productId);
219        var step = parseInt(qtyInput.step);
220        if (!step) {
221            step = 1;
222        }
223
224        if (incBtn) {
225            incBtn.addEventListener('click', function() {
226                var v = parseInt(qtyInput.value) || step;
227                qtyInput.value = v + step;
228            });
229        }
230
231        if (decBtn) {
232            decBtn.addEventListener('click', function() {
233                var v = parseInt(qtyInput.value) || step;
234                if (v > step) {
235                    qtyInput.value = v - step;
236                }
237            });
238        }
239
240        if (addToCartBtn) {
241            addToCartBtn.addEventListener('click', function() {
242                var productId = this.getAttribute('data-product-id');
243                var qty = parseInt(document.getElementById('qty-' + productId).value) || 1;
244                var addId = productId;
245
246                var data = new FormData();
247                data.append('action', 'add2basket');
248                data.append('id', addId);
249                data.append('quantity', qty);
250                data.append('sessid', BX.bitrix_sessid());
251
252                fetch('/local/templates/derlak/ajax/add2basket.php', {
253                    method: 'POST',
254                    credentials: 'same-origin',
255                    body: data
256                }).then(function(resp){ return resp.json(); })
257                    .then(function(json){
258                        if (json && json.STATUS === 'OK') {
259                            openAlert('Добавлено в корзину: ' + qty + ' шт.', '', 1, {href: '/basket/', text: 'Перейти в корзину'});
260                            BX.onCustomEvent('OnBasketChange');
261                        } else {
262                            openAlert('Ошибка добавления в корзину', '', 1);
263                        }
264                    }).catch(function(){
265
266                });
267            });
268        }
269    });
270
271    // Обработка ввода вручную в поле количества
272    document.querySelectorAll('input[id^="qty-"]').forEach(function(input) {
273        input.addEventListener('change', function() {
274            var v = parseInt(this.value) || 1;
275            if (v < 1) this.value = 1;
276        });
277
278        input.addEventListener('input', function() {
279            // Удаляем все нецифровые символы
280            this.value = this.value.replace(/[^\d]/g, '');
281        });
282    });
283}
284
285document.addEventListener('DOMContentLoaded', function() {
286    bindAdd2Cart();
287});