доделал product

assets/js/gp-main.js

@@ -16,6 +16,34 @@ modalClose('.modal__close');
 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');
+
+        button.onclick = function (e) {
+            e.preventDefault();
+
+            buttons.forEach(thisButton => {
+                if (thisButton.classList.contains('active')) {
+                    thisButton.classList.remove('active')
+                }
+            })
+
+            let text = button.textContent.trim();
+
+            button.classList.toggle('active');
+
+            input.value = text;            
+        } 
+    })   
+})
+// radio-button
+
 // overlay
 let products = document.querySelectorAll('.product__item');
 
@@ -123,6 +151,120 @@ checkbox.forEach(e => {
 })
 // checkbox 
 
+
+
+
+// slider gallery modal
+const gallery = new Swiper('.gallery__slider', {
+    spaceBetween: 100,
+  
+    pagination: {
+      el: '.swiper-pagination',
+    },
+  
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  
+    scrollbar: {
+      el: '.swiper-scrollbar',
+    },
+});
+
+let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
+
+paginationButtons.forEach(button => {
+    let index = button.dataset.countImg;
+
+    button.onclick = function () {
+        gallery.slideTo(index);
+    }
+})
+
+// open gallery
+let detailImage= document.querySelectorAll('.detail__image');
+detailImage.forEach(button => {
+    let index = button.dataset.countImg;
+
+    button.onclick = function () {
+        gallery.slideTo(index);
+        
+        document.querySelector('.gallery').classList.add('active');
+    }
+})
+
+// close gallery
+
+document.querySelector('.gallery__close').onclick = function () {
+    document.querySelector('.gallery').classList.remove('active');
+}
+// slider gallery modal
+
+// slider gallery main phone
+
+// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
+
+const detailPhone = new Swiper('.detail__images-phone', {
+    spaceBetween: 100,
+  
+    pagination: {
+      el: '.swiper-pagination',
+    },
+  
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  
+    scrollbar: {
+      el: '.swiper-scrollbar',
+    },
+});
+
+let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
+
+detailImagesPhones.forEach(button => {
+    button.onclick = function (e) {
+        let index = button.dataset.countImg;
+
+        gallery.slideTo(index);
+        
+        document.querySelector('.gallery').classList.add('active');
+    }
+})
+
+// slider gallery main phone
+
+// detail catalog
+const detailCatalot = new Swiper('.detail__catalot', {
+    // Navigation arrows
+    navigation: {
+      nextEl: '.detail-catalot-control__button.next',
+      prevEl: '.detail-catalot-control__button.prev',
+    },
+    breakpoints: {
+        1600: {
+            slidesPerView: 4,
+        },
+        1200: {
+            slidesPerView: 3,
+        },
+        780: {
+            slidesPerView: 2.2,
+        },
+        100: {
+            slidesPerView: 1.3,
+            spaceBetween: 20
+        },
+    }
+
+
+});
+// detail catalog
+
+
+// function
 function modalOpen(buttonElement, contentElement){
     let modal = document.querySelector('.modal'),
         aside = document.querySelector('.modal__aside'),
@@ -139,7 +281,7 @@ function modalOpen(buttonElement, contentElement){
             let width = thisContentElement.clientWidth;
 
             setTimeout(() => {
-                if (device <= 576) {
+                if (device <= 720) {
                     aside.style.width = `${device}px`;
                     thisContentElement.style.opacity = 1;
                     thisContentElement.style.filter = 'blur(0px)';
@@ -231,4 +373,54 @@ function singleToggleOpenX(button, content, blockheight) {
             thisContent.classList .remove('open');
         }
     }
-}
+}
+
+function createGalleryPhone(swiper, wrapper, slide, width) {
+    if (window.screen.width <= width) {
+        let thisSwiper = document.querySelector(swiper),
+            thisWrapper = document.querySelector(wrapper),
+            thisSlides = document.querySelectorAll(slide);
+
+        
+        
+        thisSwiper.classList.add('swiper');
+        thisWrapper.classList.add('swiper-wrapper'); 
+        thisSlides.forEach(e => {
+            e.classList.add('swiper-slide'); 
+        })
+
+        const t = new Swiper('.detail__images', {
+            spaceBetween: 100,
+          
+            pagination: {
+              el: '.swiper-pagination',
+            },
+          
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+          
+            scrollbar: {
+              el: '.swiper-scrollbar',
+            },
+        });
+         
+    }
+}
+
+
+// resize
+window.addEventListener('resize', (e) => {
+    // media
+    modalOpen('.button--filter', '.modal__filter');
+    modalOpen('.basket-open', '.modal__basket');
+    modalClose('.modal__close');
+    // media
+    // gallery
+    // if (!document.querySelector('.detail__images').classList.contains('swiper')) {
+    //     createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
+    // }
+    // gallery
+});
+// resize