Fix | 6743 баг при открытии корзины

wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js

@@ -493,3 +493,52 @@ jQuery(document).ready(function($) {
       $('.modalProfile').removeClass('active');
   });
 });
+
+
+// Находим все элементы с классом login-open
+document.addEventListener('DOMContentLoaded', function() {
+    const loginButtons = document.querySelectorAll('.login-open');
+    
+    loginButtons.forEach(button => {
+      button.addEventListener('click', function(event) {
+        event.preventDefault();
+        
+        const modal = document.querySelector('.modal');
+        const modalAside = document.querySelector('.modal__aside');
+        const modalLogin = document.querySelector('.modal__login');
+        
+        modal.classList.add('active');
+        modalLogin.classList.add('active');
+        
+        // Set width and slide in from right
+        modalAside.style.width = '20vw';
+        modalAside.style.right = '0';
+      });
+    });
+    
+    const closeButtons = document.querySelectorAll('.modal-close');
+    const modal = document.querySelector('.modal');
+    
+    closeButtons.forEach(button => {
+      button.addEventListener('click', closeModal);
+    });
+    
+    modal.addEventListener('click', function(event) {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
+    
+    function closeModal() {
+      const modal = document.querySelector('.modal');
+      const modalAside = document.querySelector('.modal__aside');
+      const modalLogin = document.querySelector('.modal__login');
+      
+      modal.classList.remove('active');
+      modalLogin.classList.remove('active');
+      
+      // Reset styles
+      modalAside.style.width = '';
+      modalAside.style.right = '0';
+    }
+});

wp-content/themes/cosmopet/static/front-page/css/style.css

@@ -4551,7 +4551,6 @@ color: #f4f1f0;
 
 .modal__aside {
     position: fixed;
-    right: -400px;
     transition: right 0.3s ease-in-out;
 }
 

wp-content/themes/cosmopet/static/front-page/js/main.js

@@ -471,53 +471,6 @@ document.addEventListener('DOMContentLoaded', function () {
     });
 });
 
-// Находим все элементы с классом login-open
-document.addEventListener('DOMContentLoaded', function() {
-    const loginButtons = document.querySelectorAll('.login-open');
-    
-    loginButtons.forEach(button => {
-      button.addEventListener('click', function(event) {
-        event.preventDefault();
-        
-        const modal = document.querySelector('.modal');
-        const modalAside = document.querySelector('.modal__aside');
-        const modalLogin = document.querySelector('.modal__login');
-        
-        modal.classList.add('active');
-        modalLogin.classList.add('active');
-        
-        // Set width and slide in from right
-        modalAside.style.width = '20vw';
-        modalAside.style.right = '0';
-      });
-    });
-    
-    const closeButtons = document.querySelectorAll('.modal-close');
-    const modal = document.querySelector('.modal');
-    
-    closeButtons.forEach(button => {
-      button.addEventListener('click', closeModal);
-    });
-    
-    modal.addEventListener('click', function(event) {
-      if (event.target === modal) {
-        closeModal();
-      }
-    });
-    
-    function closeModal() {
-      const modal = document.querySelector('.modal');
-      const modalAside = document.querySelector('.modal__aside');
-      const modalLogin = document.querySelector('.modal__login');
-      
-      modal.classList.remove('active');
-      modalLogin.classList.remove('active');
-      
-      // Reset styles
-      modalAside.style.width = '';
-      modalAside.style.right = '-30vw';
-    }
-});
 
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize Swiper

wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js

@@ -129,353 +129,347 @@ $('.product__main').on('click', '.counter__button', function(evt) {
 })
 
 
+// // header
+// toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
+// toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white');
+// toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white');
+// // header 
+
+// // modal
+// modalOpen('.button--filter', '.modal__filter');
+// modalOpen('.basket-open', '.modal__basket');
+// modalOpen('.login-open', '.modal__login');
+// modalOpen('.open-to-know', '.modal__to-know');
+// modalClose('.modal__close');
+// modalClose('.modal-form-sub__close');
+// let modalWindow = document.querySelector('.modal'); // Изменено с modal на modalWindow
+
+// modalWindow.onclick = function (event) {
+//     let target = event.target;
+
+//     if (target.classList.contains('modal')) {
+//         let aside = target.querySelector('.modal__aside'),
+//             modalItem = target.querySelector('.modal__item.active');
+
+//         aside.style.width = '0px';
+//         setTimeout(() => {
+//             modalItem.style.cssText = '';
+//             modalItem.classList.remove('active');
+//             target.classList.remove('active');
+//         }, 300);
+//     }
+// }
 
+// // modal
 
+// // toggle
+// toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// // toggle
 
+// // radio-button
+// let radioButtons = document.querySelectorAll('.radio-button');
 
+// radioButtons.forEach(radioBlock => {
+//     let buttons = radioBlock.querySelectorAll('.button');
     
+//     buttons.forEach(button => {
+//         let input = radioBlock.querySelector('.radio-button__input');
 
-// header
+//         button.onclick = function (e) {
-toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
+//             e.preventDefault();
-toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white');
-toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white');
-// header 
-
-// modal
-modalOpen('.button--filter', '.modal__filter');
-modalOpen('.basket-open', '.modal__basket');
-modalOpen('.login-open', '.modal__login');
-modalOpen('.open-to-know', '.modal__to-know');
-modalClose('.modal__close');
-modalClose('.modal-form-sub__close');
-let modalWindow = document.querySelector('.modal'); // Изменено с modal на modalWindow
-
-modalWindow.onclick = function (event) {
-    let target = event.target;
-
-    if (target.classList.contains('modal')) {
-        let aside = target.querySelector('.modal__aside'),
-            modalItem = target.querySelector('.modal__item.active');
-
-        aside.style.width = '0px';
-        setTimeout(() => {
-            modalItem.style.cssText = '';
-            modalItem.classList.remove('active');
-            target.classList.remove('active');
-        }, 300);
-    }
-}
 
-// modal
+//             buttons.forEach(thisButton => {
+//                 if (thisButton.classList.contains('active')) {
+//                     thisButton.classList.remove('active')
+//                 }
+//             })
 
-// toggle
+//             let text = button.textContent.trim();
-toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
-// toggle
 
-// radio-button
+//             button.classList.toggle('active');
-let radioButtons = document.querySelectorAll('.radio-button');
 
-radioButtons.forEach(radioBlock => {
+//             input.value = text;            
-    let buttons = radioBlock.querySelectorAll('.button');
+//         } 
+//     })   
+// })
+// // radio-button
 
-    buttons.forEach(button => {
-        let input = radioBlock.querySelector('.radio-button__input');
 
-        button.onclick = function (e) {
+// let products = document.querySelectorAll('.product__item');
-            e.preventDefault();
 
-            buttons.forEach(thisButton => {
+// products.forEach(productItem => {
-                if (thisButton.classList.contains('active')) {
+//     let button = productItem.querySelector('.open-overlay'),
-                    thisButton.classList.remove('active')
+//         overlay = productItem.querySelector('.product-item__overlay');
-                }
-            })
 
-            let text = button.textContent.trim();
     
-            button.classList.toggle('active');
+//     if (button) {
+//         button.onclick = function (e) {
+//             document.querySelectorAll('.product__item').forEach(e => {
+//                 if (e.classList.contains('active')) {
+//                     e.classList.remove('active');
+//                 }
+//             });
+//             document.querySelectorAll('.product-item__overlay').forEach(e => {
+//                 if (e.classList.contains('active')) {
+//                     e.classList.remove('active');
+//                 }
+//             });
 
-            input.value = text;            
+//             productItem.classList.toggle('active'); 
-        } 
+//             overlay.classList.toggle('active');            
-    })   
+//         }
-})
+//     }
-// radio-button
     
+// })
 
-let products = document.querySelectorAll('.product__item');
 
-products.forEach(productItem => {
-    let button = productItem.querySelector('.open-overlay'),
-        overlay = productItem.querySelector('.product-item__overlay');
 
+// // select
+// // toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
 
-    if (button) {
+// // let selects = document.querySelectorAll('.select');
-        button.onclick = function (e) {
-            document.querySelectorAll('.product__item').forEach(e => {
-                if (e.classList.contains('active')) {
-                    e.classList.remove('active');
-                }
-            });
-            document.querySelectorAll('.product-item__overlay').forEach(e => {
-                if (e.classList.contains('active')) {
-                    e.classList.remove('active');
-                }
-            });
 
-            productItem.classList.toggle('active'); 
+// // selects.forEach(select => {
-            overlay.classList.toggle('active');            
+// //     let state = select.querySelector('.select__state'),
-        }
+// //         content = select.querySelector('.state__block'),
-    }
+// //         buttons = select.querySelectorAll('.state__button');
         
-})
+// //     buttons.forEach(e => {
+// //         let button = e;
 
+// //         e.onclick = function (event) {
+// //             event.preventDefault();
 
+// //             buttons.forEach(element => {
+// //                 if (element.classList.contains('active')) {
+// //                     element.classList.remove('active');
+// //                 }
+// //             })
             
-// select
+// //             let text = e.textContent.trim();
-// toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
+// //             state.value = text;
 
-// let selects = document.querySelectorAll('.select');
+// //             button.classList.add('active');
+// //             content.style.height = 0;
+// //             select.classList.remove('active');
+// //         }        
+// //     })
+// // })
 
-// selects.forEach(select => {
-//     let state = select.querySelector('.select__state'),
-//         content = select.querySelector('.state__block'),
-//         buttons = select.querySelectorAll('.state__button');
 
-//     buttons.forEach(e => {
+// // select
-//         let button = e;
 
-//         e.onclick = function (event) {
+// // counter
-//             event.preventDefault();
+// // let counters = document.querySelectorAll('.counter');
 
-//             buttons.forEach(element => {
+// // counters.forEach(e => {
-//                 if (element.classList.contains('active')) {
+// //     let minus = e.querySelector('.minus'),
-//                     element.classList.remove('active');
+// //         plus  = e.querySelector('.plus'),
-//                 }
+// //         input = e.querySelector('.counter__input');
-//             })
 
-//             let text = e.textContent.trim();
+// //     minus.onclick = function (e) {
-//             state.value = text;
+// //         e.preventDefault();
         
-//             button.classList.add('active');
+// //         let number = input.value;
-//             content.style.height = 0;
-//             select.classList.remove('active');
-//         }        
-//     })
-// })
         
+// //         if (number >= 2){
+// //             input.value = Number(number) - 1;
+// //         }
+// //     }
 
-// select
+// //     plus.onclick = function (e) {
+// //         e.preventDefault();
         
-// counter
+// //         let number = input.value;
-// let counters = document.querySelectorAll('.counter');
         
-// counters.forEach(e => {
+// //         if (number <= 99) {
-//     let minus = e.querySelector('.minus'),
+// //             input.value = Number(number) + 1;
-//         plus  = e.querySelector('.plus'),
+// //         }
-//         input = e.querySelector('.counter__input');
+// //     }
+// // })
+// // counter
 
-//     minus.onclick = function (e) {
+// // checkbox 
-//         e.preventDefault();
+// let checkbox = document.querySelectorAll('.checkbox');
 
-//         let number = input.value;
+// checkbox.forEach(e => {
+//     e.onclick = function (event) {
+//         let input = e.querySelector('.checkbox__input');
 
-//         if (number >= 2){
+//         if (!e.classList.contains('active')) {
-//             input.value = Number(number) - 1;
+//             input.checked = 1;
-//         }
+//         }else{
-//     }
+//             input.checked = 0;
-
-//     plus.onclick = function (e) {
-//         e.preventDefault();
-        
-//         let number = input.value;
-        
-//         if (number <= 99) {
-//             input.value = Number(number) + 1;
 //         }
+//         e.classList.toggle('active');
 //     }
 // })
-// counter
+// // checkbox 
+
+
+// // function modalOpen(buttonElement, contentElement) {
+// //     let modal = document.querySelector('.modal'),
+// //         aside = document.querySelector('.modal__aside'),
+// //         elements = document.querySelectorAll(buttonElement),
+// //         body = document.querySelector('body');
+
+// //     elements.forEach(e => {
+// //         let thisContentElement = document.querySelector(contentElement);
+
+// //         e.onclick = function () {
+// //             body.classList.add('overflow-hidden');
+// //             modal.classList.add('active');
+// //             thisContentElement.classList.add('active');
+            
+// //             // Set width and position based on screen size
+// //             const isMobile = window.matchMedia("(max-width: 768px)").matches;
+// //             aside.style.width = isMobile ? '80vw' : '20vw';
+// //             aside.style.right = '0';
+// //         };
+// //     });
+// // }
+
+// // function modalClose(buttonElement) {
+// //     let modal = document.querySelector('.modal'),
+// //         aside = document.querySelector('.modal__aside'),
+// //         asideItems = document.querySelectorAll('.modal__item'),
+// //         elements = document.querySelectorAll(buttonElement),
+// //         body = document.querySelector('body');
+
+// //     elements.forEach(e => {
+// //         e.onclick = function () {   
+// //             body.classList.remove('overflow-hidden');         
+// //             aside.style.width = '0px';
+            
+// //             asideItems.forEach(e => {
+// //                 if (e.classList.contains('active')) {
+// //                     e.style.filter  = 'blur(10px)';
+// //                 }
+// //             });
+
+// //             setTimeout(() => {
+// //                 asideItems.forEach(e => {
+// //                     if (e.classList.contains('active')) {
+// //                         e.classList.remove('active');
+// //                     }
+// //                 });
+
+// //                 modal.classList.remove('active');
+// //             }, 300);
+// //         }
+// //     })
+// // }
+
+// function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+//     let elements = document.querySelectorAll(mainElement);
+
+//     elements.forEach(e => {
+//         let thisMainElement = e,
+//             thisButtonElement = e.querySelector(buttonElement),
+//             thisHeightElement = e.querySelector(heightElement),
+//             thisContentElement = e.querySelector(contentElement);        
+
+//         thisButtonElement.onclick = function (e) {
+//             let height = thisHeightElement.clientHeight;
+
+//             if (close == true && !thisMainElement.classList.contains('active')) {
+//                 elements.forEach(e => {
+//                     if (e.classList.contains('active')) {
+//                         e.classList.remove('active');
+//                         e.querySelector(contentElement).style.height = null
+//                     }                    
+//                 })
+//             }
+
+//             if (!thisMainElement.classList.contains('active')) {
+//                 thisContentElement.style.height = `${height}px`;
+//                 thisMainElement.classList.add('active');
+//             }else{
+//                 thisContentElement.style.height = null;
+//                 thisMainElement.classList.remove('active');
+//             }
+//         }
         
-// checkbox 
+//     });
-let checkbox = document.querySelectorAll('.checkbox');
+// }
 
-checkbox.forEach(e => {
+// function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
-    e.onclick = function (event) {
+//     let thisButton = document.querySelector(button), 
-        let input = e.querySelector('.checkbox__input');
+//         thisContent = document.querySelector(content),
+//         thisRemoveBlock = document.querySelector(removeBlock) || '',
+//         thisBlockheight = document.querySelector(blockheight);
 
-        if (!e.classList.contains('active')) {
+//     thisButton.onclick = function () {
-            input.checked = 1;
+//         let height = thisBlockheight.clientHeight;
-        }else{
-            input.checked = 0;
-        }
-        e.classList.toggle('active');
-    }
-})
-// checkbox 
 
+//         if (!thisContent.classList .contains('open')) {
+//             thisContent.style.height = `${height}px`;
+//             thisContent.classList .add('open');
 
-function modalOpen(buttonElement, contentElement) {
+//             if (removeBlock) {
-    let modal = document.querySelector('.modal'),
+//                 thisRemoveBlock.classList.remove(removeClass);
-        aside = document.querySelector('.modal__aside'),
+//             }
-        elements = document.querySelectorAll(buttonElement),
+//         }else{
-        body = document.querySelector('body');
+//             thisContent.style.height = null;
+//             thisContent.classList .remove('open');
 
-    elements.forEach(e => {
+//             if (removeBlock) {
-        let thisContentElement = document.querySelector(contentElement);
+//                 if (window.scrollY <= 25) {
+//                     thisRemoveBlock.classList.add(removeClass);
+//                 }
+//             }
+//         }
+//     }
+// }
+// // function
 
-        e.onclick = function () {
+// // resize
-            body.classList.add('overflow-hidden');
+// window.addEventListener('resize', (e) => {
-            modal.classList.add('active');
+//     let width = window.screen.width;
-            thisContentElement.classList.add('active');
 
-            // Set width and position based on screen size
+//     // media
-            const isMobile = window.matchMedia("(max-width: 768px)").matches;
+//     modalOpen('.button--filter', '.modal__filter');
-            aside.style.width = isMobile ? '80vw' : '20vw';
+//     modalOpen('.basket-open', '.modal__basket');
-            aside.style.right = '0';
+//     modalOpen('.open-to-know', '.modal__to-know');
-        };
+//     modalClose('.modal__close');
-    });
-}
-
-function modalClose(buttonElement) {
-    let modal = document.querySelector('.modal'),
-        aside = document.querySelector('.modal__aside'),
-        asideItems = document.querySelectorAll('.modal__item'),
-        elements = document.querySelectorAll(buttonElement),
-        body = document.querySelector('body');
-
-    elements.forEach(e => {
-        e.onclick = function () {   
-            body.classList.remove('overflow-hidden');         
-            aside.style.width = '0px';
-            
-            asideItems.forEach(e => {
-                if (e.classList.contains('active')) {
-                    e.style.filter  = 'blur(10px)';
-                }
-            });
-
-            setTimeout(() => {
-                asideItems.forEach(e => {
-                    if (e.classList.contains('active')) {
-                        e.classList.remove('active');
-                    }
-                });
-
-                modal.classList.remove('active');
-            }, 300);
-        }
-    })
-}
-
-function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
-    let elements = document.querySelectorAll(mainElement);
-
-    elements.forEach(e => {
-        let thisMainElement = e,
-            thisButtonElement = e.querySelector(buttonElement),
-            thisHeightElement = e.querySelector(heightElement),
-            thisContentElement = e.querySelector(contentElement);        
-
-        thisButtonElement.onclick = function (e) {
-            let height = thisHeightElement.clientHeight;
-
-            if (close == true && !thisMainElement.classList.contains('active')) {
-                elements.forEach(e => {
-                    if (e.classList.contains('active')) {
-                        e.classList.remove('active');
-                        e.querySelector(contentElement).style.height = null
-                    }                    
-                })
-            }
     
-            if (!thisMainElement.classList.contains('active')) {
+//     let modalItem = document.querySelectorAll('.modal__item');
-                thisContentElement.style.height = `${height}px`;
-                thisMainElement.classList.add('active');
-            }else{
-                thisContentElement.style.height = null;
-                thisMainElement.classList.remove('active');
-            }
-        }
 
-    });
+//     // if (width <= 720) {
-}
+//         modalItem.forEach(modal => {
-
+//             if (modal.classList.contains('active')) {
-function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
+//                 let aside = document.querySelector('.modal__aside');
-    let thisButton = document.querySelector(button), 
-        thisContent = document.querySelector(content),
-        thisRemoveBlock = document.querySelector(removeBlock) || '',
-        thisBlockheight = document.querySelector(blockheight);
 
-    thisButton.onclick = function () {
+//                 if (width <= 720) {
-        let height = thisBlockheight.clientHeight;
+//                     aside.style.width = `${width}px`
+//                 }else{
+//                     let openAside = document.querySelector('.modal__item.active'),
+//                         newWidth = openAside.clientWidth;
 
-        if (!thisContent.classList .contains('open')) {
+//                     aside.style.width = `${newWidth}px`
-            thisContent.style.height = `${height}px`;
+//                 }
-            thisContent.classList .add('open');
+//             }
-
+//         })
-            if (removeBlock) {
+//     // }
-                thisRemoveBlock.classList.remove(removeClass);
+// });
-            }
+// // resize
-        }else{
-            thisContent.style.height = null;
-            thisContent.classList .remove('open');
-
-            if (removeBlock) {
-                if (window.scrollY <= 25) {
-                    thisRemoveBlock.classList.add(removeClass);
-                }
-            }
-        }
-    }
-}
-// function
-
-// resize
-window.addEventListener('resize', (e) => {
-    let width = window.screen.width;
-
-    // media
-    modalOpen('.button--filter', '.modal__filter');
-    modalOpen('.basket-open', '.modal__basket');
-    modalOpen('.open-to-know', '.modal__to-know');
-    modalClose('.modal__close');
-    
-    let modalItem = document.querySelectorAll('.modal__item');
-
-    // if (width <= 720) {
-        modalItem.forEach(modal => {
-            if (modal.classList.contains('active')) {
-                let aside = document.querySelector('.modal__aside');
-
-                if (width <= 720) {
-                    aside.style.width = `${width}px`
-                }else{
-                    let openAside = document.querySelector('.modal__item.active'),
-                        newWidth = openAside.clientWidth;
-
-                    aside.style.width = `${newWidth}px`
-                }
-            }
-        })
-    // }
-});
-// resize
 
-// scroll
+// // scroll
 
 
-if (document.querySelector('.header').classList.contains('white')) {
+// if (document.querySelector('.header').classList.contains('white')) {
-    window.addEventListener("scroll", function (e) {
+//     window.addEventListener("scroll", function (e) {
-        let header = document.querySelector('.header');
+//         let header = document.querySelector('.header');
-        let scroll = window.scrollY;
+//         let scroll = window.scrollY;
         
-        if (scroll >= 25) {
+//         if (scroll >= 25) {
-            header.classList.remove('white')
+//             header.classList.remove('white')
-        }else{
+//         }else{
-            header.classList.add('white')
+//             header.classList.add('white')
-        }
+//         }
         
-    });
+//     });
-}
+// }
-// scroll
+// // scroll