https://xn--90aisff1g.xn--p1ai/local/templates/agency_ux_nobel/js/custom.js

1initPhone();
2initFileInput();
3removeValInput();
4initButtonB1C();
5initFavorites();
6initComparisonSwiper();
7initCheckRequirements();
8initTabs('.js-detail-tabs', '.js-detail-blocks', "click");
9initTabs('.js-info-tabs', '.js-info-blocks', "click");
10const selectElements = document.querySelectorAll("[data-custom]")
11if(selectElements){
12    selectElements.forEach(selectElement => {
13        new Select(selectElement);
14    });
15}
16const sortFilter = document.querySelector(".js-sort-filter");
17if(sortFilter){
18    const filterLink = sortFilter.querySelectorAll("li");
19    filterLink.forEach(link => {
20        link.addEventListener("click", function(){
21            const attr = this.getAttribute("data-value");
22            window.location.href = attr;
23        })
24    })
25}
26/*const viewButton = document.querySelector(".catalog__btn");
27viewButton.addEventListener("click", function() {
28    setTimeout(() => {
29        initTabs('.js-detail-tabs', '.js-detail-blocks', "click");
30        window.JCCatalogItem.prototype.initTabsPay();
31    }, 1000);
32})
33*/
34
35// fancybox
36const options = {
37    compact: false,
38    on:{
39        "ready": (fancybox, eventName) => {
40            setTimeout(() => {
41                fancybox.container.querySelector(".smart-captcha").style = "height:102px"
42            }, 200);
43            loadFormButton();
44            initCheckRequirements();
45        }
46    }
47};
48Fancybox.bind("[data-fancybox]", options);
49
50Fancybox.bind("[data-fancybox-credit]",
51    {
52        on: {
53            "ready": (fancybox, eventName) => {
54                setTimeout(() => {
55                    fancybox.container.querySelector(".smart-captcha").style = "height:102px"
56                }, 200);
57                const creditImg = document.querySelector(".js-credit-img");
58                const creditItem = document.querySelector(".js-credit-item");
59                const creditTerm = document.querySelector(".js-credit-term");
60                const selectOptions = document.querySelectorAll(".item-prop.selected");
61                let optionsVal = "";
62                if(selectOptions){
63                    selectOptions.forEach(option => {
64                        optionsVal += option.getAttribute('title') + " ";
65                    });
66                }
67                if(creditImg){
68                    creditImg.innerHTML = document.querySelector(".detail-slider__element.swiper-slide-active").innerHTML;
69                }
70                if(creditItem){
71                    creditItem.value = document.querySelector(".popup-mini-item__title").innerHTML + " " + optionsVal;
72                }
73                if(creditTerm){
74                    creditTerm.value = document.querySelector(".js-loantime[checked]").value
75                }
76                loadFormButton();
77            },
78            "close": (fancybox, eventName) => {
79                
80            }
81        },
82        compact: false,
83    },
84);
85
86function initFavorites() {
87    document.addEventListener("DOMContentLoaded", function(){
88        let buttonsFavorites = document.querySelectorAll(".js-favourites");
89        if(buttonsFavorites){
90            buttonsFavorites.forEach(btn => {
91                btn.addEventListener("click", function(){
92                    let idItem = this.getAttribute("data-id"),
93                        actionItem
94                    if(this.classList.contains('active')){
95                        actionItem = 'delete';
96                    }else{
97                        actionItem = 'add';
98                    }
99                    $.ajax({
100                        url: '/ajax/wishlist.php',
101                        method:'GET',
102                        dataType: 'json',
103                        data: {
104                            'id': idItem,
105                            'action': actionItem,
106                        },
107                        success: function(response) {
108                            let result = $.parseJSON(response);
109                            switch (result) {
110                                case 1:
111                                    btn.classList.add('active');
112                                    break;
113                                case 2:
114                                    btn.classList.remove('active');
115                                    break;
116                            }
117                        }
118                    });
119                })
120            })
121        }
122    })
123}
124
125function initPhone(){
126    let maskOptions = {
127        mask: '+{7}(000)000-00-00'
128    };
129    let phoneField = document.querySelectorAll('[data-phone]');
130    phoneField.forEach(field => {
131        const mask = IMask(field, maskOptions);
132        field.onpaste = function(e) {
133            let copyText = e.clipboardData.getData('text/plain');
134            console.log(copyText.charAt(0));
135            if(copyText.charAt(0) === "8"){
136                copyText = copyText.substring(1);
137            }
138            if(copyText.charAt(1) === "8"){
139                copyText = copyText.substring(2);
140            }
141            mask.value = copyText;
142        };
143        mask.on('accept', function() {
144            switch (mask.value) {
145                case "+7(8":
146                case "+7(7":
147                case "+7":
148                case "+":
149                    mask.value = "+7(";
150                    break;
151            }
152        })
153    });
154}
155function filterCity() {
156    let input = document.querySelector('.js-search-city');
157    let filter = input.value.toUpperCase();
158    let listCityBlock = document.querySelectorAll('.js-city-link');
159    let listCityText = document.querySelectorAll('.js-city-link a');
160    for (let i = 0; i < listCityBlock.length; i++) {
161        let value = listCityText[i].innerText;
162      
163        if (value.toUpperCase().includes(filter)) {
164            listCityBlock[i].style.display = '';
165        } else {
166            listCityBlock[i].style.display = 'none';
167        }
168    }
169}
170
171function initFileInput(){
172    let fileInput = document.querySelectorAll('.js-form-label');
173    fileInput.forEach(element =>{
174        let input = element.querySelector('input[type=file]');
175        input.addEventListener('change', function(){
176            let file = this.files[0];
177            if(file.size > 15728640){
178                alert('Превышен допустимый размер файла');
179            }else{
180                let div = document.createElement("div");
181                div.innerHTML = file.name + ' <span class="js-form-clear">&#10005;

181</span>';
182                document.querySelector('.js-form-upload').appendChild(div);
183                document.querySelector('.js-form-label').classList.add('disabled');
184                document.querySelector('.js-form-link').classList.add('hidden');
185                removeValInput(input);
186            }
187        });
188    });
189}
190
191function removeValInput(input){
192    let clear = document.querySelector('.js-form-clear');
193    if(clear){
194        clear.addEventListener('click', function(){
195            input.value = '';
196            document.querySelector('.js-form-upload').innerHTML = '';
197            document.querySelector('.js-form-label').classList.remove('disabled')
198            document.querySelector('.js-form-link').classList.remove('hidden')
199            //input.disabled = false;
200        });
201    }
202}
203function sendFormBuyOneClick(event) {
204    event.preventDefault();
205    //event.target.querySelector('input[name=pay]').value = document.querySelector(".cart-item-element__price span").innerHTML;
206    let data = new FormData(event.target);
207    $.ajax({
208        url: '/ajax/buy_one_click.php',
209        method: 'post',
210        contentType: false,
211        processData: false,
212        dataType: 'html',
213        data: data,
214        success: function(response){
215            console.log(response);
216            let res = $.parseJSON(response);
217            if(res["ID"]){
218                location.replace("/personal/order/make/?ORDER_ID=" + res["ID"]);
219            }else{
220                Fancybox.show([
221                    {
222                        src: "/ajax/custom_modals.php?type=user-error&error=" + res["ERROR"],
223                        type: "ajax",
224                    }
225                ]);
226            }
227        },
228        error: function(data) {
229            console.log(data);
230        }
231    });
232}
233function viewModalAddItem(status){
234    Fancybox.show([
235        {
236            src: "/ajax/custom_modals.php?type=add-item&status="+status,
237            type: "ajax",
238        }
239    ],{
240        on: {
241            "done": (fancybox, eventName) => {}
242        }
243    });
244}
245function viewModalCompare(status){
246    Fancybox.show([
247        {
248            src: "/ajax/custom_modals.php?type=modal-compare&status="+status,
249            type: "ajax",
250        }
251    ],{
252        on: {
253            "done": (fancybox, eventName) => {}
254        }
255    });
256}
257function initButtonB1C(){
258    const b1c = document.querySelector('.js-buy1click');
259    if(b1c){
260        b1c.addEventListener("click", function(){
261            let itemId = "";
262            let count = "";
263            if(this.getAttribute("data-id")){
264                itemId = this.getAttribute("data-id");
265            }
266            if(document.querySelector(".js-counter")){
267                count = document.querySelector(".js-counter").value;
268            }
269            Fancybox.show([
270                {
271                    src: "/ajax/custom_modals.php?type=buy-one-click&ID="+itemId+"&count="+count,
272                    type: "ajax",
273                }
274            ],{
275                on: {
276                    "done": (fancybox, eventName) => {
277                        initPhone();
278                        initCheckRequirements();
279                        loadFormButton();
280                    }
281                }
282            });
283            
284        })
285    }
286}
287
288let carousel = document.querySelector(".js-carousel");
289if (carousel) {
290    let footer = document.querySelector(".footer");
291    function checkCollision() {
292        let carouselRect = carousel.getBoundingClientRect();
293        let footerRect = footer.getBoundingClientRect();
294
295        if (carouselRect.bottom >= footerRect.top) {
296            carousel.classList.add("hide")
297        }
298        else{
299            carousel.classList.remove("hide")
300        }
301    }
302
303    window.addEventListener('scroll', checkCollision);
304    window.addEventListener('resize', checkCollision);
305    checkCollision();
306}
307
308//Добавление товара в корзину
309const add2basketBtns = document.querySelectorAll('.js-add-2-basket');
310
311if(add2basketBtns){
312    add2basketBtns.forEach(btn => {
313        btn.addEventListener('click', function(e){
314            e.preventDefault();
315            let itemId = this.closest('div[data-item]').getAttribute('data-item');
316            console.log(itemId);
317            $.ajax({
318                url: '/ajax/add_2_basket.php',
319                method:'post',
320                dataType: 'json',
321                data: {
322                    'quantity': 1,
323                    'product-id': itemId,
324                },
325                success: function(obj) {
326                    if (obj.hasError) {
327                        alert('Ошибка добавления товара в корзин

327у');
328                        return false;
329                    }else{
330                        btn.classList.add("active");
331                        BX.onCustomEvent('OnBasketChange'); //обновление малой корзины
332                    }
333                },
334                error: function(p1, p2, p3) {
335                    console.log(p1, p2, p3);
336                }
337            });
338            return false;
339        })
340    })
341}
342
343//Подгрузка мобильного меню при клике
344const mobileBtnMenu = document.querySelectorAll('.js-menu-btn')
345const menuBlock = document.querySelector('.js-mobile-menu')
346const mobileBtnMenuClose = document.querySelectorAll('.js-menu-close-btn');
347
348mobileBtnMenu.forEach(element => {
349    element.addEventListener('click', function(){
350        menuBlock.classList.toggle('active');
351        if(menuBlock.classList.contains('active')){
352            document.querySelector('body').classList.add('active');
353            BX.ajax.insertToNode('/ajax/mobile_menu.php', menuBlock);
354            setTimeout(() => {
355                initMobileMenuChild();
356                initSubmenuSwiper();
357            }, 200);
358
359            // console.log("parent opened")
360        } else {
361            document.querySelector('body').classList.remove('active');
362            document.querySelector('.js-mobmenu-field').classList.remove('submenu-active');
363            menuBlock.innerHTML = '';
364        }
365    })
366});
367
368initMobileMenuChild();
369function initMobileMenuChild(){
370    const mobileBtnMenuClose = document.querySelectorAll('.js-menu-close-btn');
371    const menuBlock = document.querySelector('.js-mobile-menu');
372    mobileBtnMenuClose.forEach(element => {
373        element.addEventListener('click', function(){
374            menuBlock.classList.remove('active');
375            document.querySelectorAll('.mobile-submenu').forEach(sub => {
376                // sub.classList.remove('active');
377                sub.style.right = "-300%"
378            })
379        })
380    });
381
382    const listMenu = document.querySelectorAll('.js-menu-parent');
383    const menuBack = document.querySelectorAll('.js-children-menu-back');
384    const menuField = document.querySelector('.js-mobmenu-field');
385
386    listMenu.forEach(item => {
387        item.addEventListener('click', function(){
388            this.classList.toggle('active');
389            this.closest('li').querySelector('.js-menu-children').classList.toggle('active');
390            menuField.classList.add('submenu-active');
391        });
392    })
393    menuBack.forEach(item => {
394        item.addEventListener('click', function(){
395            this.closest('.js-menu-children').classList.remove('active');
396            this.closest('li').querySelector('.js-menu-parent').classList.remove('active');
397            let status = false;
398
399            // console.log("child menu closed")
400
401            document.querySelectorAll(".js-menu-children").forEach(el=>{
402                if(el.classList.contains('active')){
403                    status = true;
404                }
405            })
406            if(!status){
407                menuField.classList.remove('submenu-active');
408            }
409        });
410    })
411}
412function initComparisonSwiper(){
413    const comparisonSwiper = new Swiper('.js-comparison-swiper', {
414        slidesPerView: 2,
415        allowTouchMove: false,
416        spaceBetween: 20,
417        breakpoints: {
418            577: {
419                slidesPerView: 4,
420            },
421            1025: {
422                slidesPerView: 4,
423                spaceBetween: 30,
424            }
425        },
426        pagination: {
427            el: '.swiper-comparison-pagination',
428            clickable: true,
429        },
430        navigation: {
431            nextEl: '.swiper-comparison-next',
432            prevEl: '.swiper-comparison-prev',
433        },
434    });
435}
436loadFormButton();
437function loadFormButton(){
438    const allForms = document.querySelectorAll("form");
439    allForms.forEach(form => {
440        const captcha = form.querySelector(".smart-captcha");
441        if(captcha){
442            form.addEventListener("submit", function(e){
443                if(window.smartCaptcha.getResponse() == ""){
444                    e.preventDefault();
445                    window.smartCaptcha.showError();
446                }else{
447                    const button = this.querySelector("button");
448                    button.setAttribute("disabled", true);
449                    button.classList.add("load");
450                    button.innerHTML = "";
451                }
452            })
453        }
454    })
455}
456function initCheckRequirements() {
457    const inputs = document.querySelectorAll('.js-check-requirements input');

458    inputs.forEach(input => {
459        input.addEventListener('change', function() {
460            const button = input.closest('form').querySelector(".js-form-send");
461            button.disabled = !this.checked;
462        });
463    })
464}
465const cookies = document.querySelector(".js-cookies")
466if(cookies){
467    const cookieBtn = document.querySelector(".js-cookies-button")
468    cookieBtn.addEventListener("click", function() {
469        $.ajax({
470            url: '/ajax/cookies.php',
471            method:'GET',
472            dataType: 'json',
473            data: {
474                'cookie': "Y",
475            },
476            success: function(response) {
477                cookies.remove()
478            }
479        });
480    })
481}