diff --git a/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css index 5cec87a..958d07b 100644 --- a/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/footer/assets/css/gp-style-desktop.css @@ -172,7 +172,8 @@ } .modal__login { - width: 100%; + max-width: 100vw; + width: 400px; } .modal__item.active { diff --git a/wp-content/themes/cosmopet/modules/footer/assets/js/footer.js b/wp-content/themes/cosmopet/modules/footer/assets/js/footer.js index 4a3b479..eeedb76 100644 --- a/wp-content/themes/cosmopet/modules/footer/assets/js/footer.js +++ b/wp-content/themes/cosmopet/modules/footer/assets/js/footer.js @@ -3,364 +3,7 @@ (function ($) { const metaLocale = document.querySelector('meta[property="og:locale"]'); const localeValue = metaLocale.getAttribute('content'); - // function wc_cart_summary_upd(){ - // let total = 0 - // $('.cart_item').each(function(){ - // total += Number($(this).data('cost')) - // }) - // return total - // } - // $('[data-pname]').on('click', function(){ - // $('#sub_product_name').val($(this).data('pname')) - // }) - - // $(document).on('submit', '.product-item__form, .detail-block__form', function (e) { - // e.preventDefault(); - // var $form = $(this) - // var product_qty = $form.find('input[name=quantity]').val() || 1 - // var product_id = $form.find('input[name=product_id]').val() - // var variation_id = $form.find('input[name=variation_id]').val() || 0; - // var title = $(this).data('name') - // var data = { - // action: 'woocommerce_ajax_add_to_cart', - // product_id: product_id, - // product_sku: '', - // quantity: product_qty, - // variation_id: variation_id, - // }; - // dataLayer.push({ - // "ecommerce": { - // "currencyCode": "RUB", - // "add": { - // "products": [ - // { - // "id": product_id, - // "name": title, - // "quantity": product_qty, - // } - // ] - // } - // } - // }); - - // return false; - // }); - - // $(document).on('submit', '.modal__form-sub', function (e) { - // e.preventDefault(); - // var email = $(this).find('input[name="email"]').val() - // var data = $(this).serialize() - // $.ajax({ - // type: 'post', - // url: woocommerce_params.ajax_url, - // data: data, - // beforeSend: function (response) { - // // $thisbutton.removeClass('added').addClass('loading'); - // }, - // complete: function (response) { - // // $thisbutton.addClass('added').removeClass('loading'); - // }, - // success: function (response) { - // $('.modal__to-know').removeClass('active') - // $('#sub-result-email').html(email) - // $('.modal__to-know-submit').addClass('active').css('filter', 'blur(0px)') - // }, - // }); - // }); - - // $(document).on('submit', '.form--contact', function (e) { - // e.preventDefault(); - // var form = this; - // var data = $(this).serialize() - // $.ajax({ - // type: 'post', - // url: woocommerce_params.ajax_url, - // data: data, - // beforeSend: function (response) { - // // $thisbutton.removeClass('added').addClass('loading'); - // }, - // complete: function (response) { - // // $thisbutton.addClass('added').removeClass('loading'); - // }, - // success: function (response) { - // $(form).addClass('submited') - // }, - // }); - // }); - - // $('body').on('click', '.modal-basket__item-before', function(){ - // var key = $(this).data('id') - // var p_ID = $(this).data('pr'); - // var var_ID = $(this).data('var'); - // var quantity = $(this).closest('.modal-basket__item').find('.counter__input').val() - // var layout = ` - //

- // Удаление товара из корзины: 5с - //

- - // - // ` - // if(localeValue == 'en_US'){ - // var layout = ` - //

- // Removing product from cart: 5s - //

- - // - // ` - // } - - // var old_html = $(this).closest('.modal-basket__item').html() - // $(this).closest('.modal-basket__item').addClass('.modal-basket__item--return').html(layout) - // var title = $(this).closest('.cart_item').find('.modal-basket-item__title').html() - - - // var timerVal = 5; - - // var interval = setInterval(function(){ - // timerVal -= 1; - // if (timerVal > 0){ - // $(`#${key}_timer`).html(timerVal) - // } - // else{ - - // dataLayer.push({ - // "ecommerce": { - // "currencyCode": "RUB", - // "remove": { - // "products": [ - // { - // "id": p_ID, - // "name": title, - // "quantity": quantity, - // } - // ] - // } - // } - // }); - // var input = 0; - // var productID = key; - - // var data = { - // action: 'get_cartprice', - // quantity: input, - // product: productID - // }; - // $.ajax({ - // type: 'post', - // url: '/wp-admin/admin-ajax.php', - // data: data, - // beforeSend: function (response) { - // // $thisbutton.removeClass('added').addClass('loading'); - // }, - // complete: function (response) { - // // $thisbutton.addClass('added').removeClass('loading'); - // }, - // success: function (response) { - - // if(response['cart_count'] > 0){ - // $('.mini-profile__button--counter').removeClass('disabled').html(response['cart_count']) - // } - // else{ - // $('.mini-profile__button--counter').addClass('disabled').html(response['cart_count']) - // } - // }, - // }); - // $(`#${key}_timer`).closest('.modal-basket__item').remove() - // if (Number(wc_cart_summary_upd()) > 0){ - // $('#cart_total').html(wc_cart_summary_upd()) - // } - // else{ - // var tmpl = `
- //

Корзина

- //

Ваша корзина пуста

- //
- - //
- //
- //
- // - // Продолжить покупки - // - //
- //
- //
` - - // if(localeValue == 'en_US'){ - // var tmpl = `
- //

Cart

- //

Your cart is empty

- //
- - //
- //
- //
- // - // Return to catalog - // - //
- //
- //
` - // } - // $('.modal__basket').html(tmpl) - // } - // clearInterval(interval); - // } - // }, 1000) - - - - // $(`#${key}_return`).one('click', function(){ - // $(this).closest('.modal-basket__item').removeClass('.modal-basket__item--return').html(old_html) - // clearInterval(interval); - // }) - // }) - - // $('body').on('click', '.state__button', function(){ - // var s = $(this).closest('.select') - // var id = $(this).data('id') - // var bc = $(this).data('bc') - - // var form = $(this).closest('.product-item__form') - - // $(form).find('input[name="variation_id"]').val(id) - // $(form).find('.counter__input').data('maxcount', $(this).data('stock')).attr('data-maxcount', $(this).data('stock')) - // if (Number($(form).find('.counter__input').val()) > Number($(form).find('.counter__input').data('maxcount'))){ - // $(form).find('.counter__input').val($(form).find('.counter__input').data('maxcount')) - // } - // var input = $(form).find('.counter__input').val() - // $(form).find('.product-item-overlay__price').data('basecost', bc).html(Number(bc) * Number(input)) - // }) - - // $('body').on('click', '.btn-load-ajax', function(){ - // var page = Number($(this).data('page')) + 1 - // var maxpage = Number($(this).data('maxpage')) - // var data = { - // ajax_load: 'ajax', - // }; - // var btn = this - // var baseUrl = jQuery(location).attr('origin') + jQuery(location).attr('pathname') - // baseUrl += 'page/' + page + '/' - // var searchUrl = baseUrl - // if (jQuery(location).attr('search')){ - // searchUrl += jQuery(location).attr('search') + '&ajax_search=ajax' - // } - // else{ - // searchUrl += '?ajax_search=ajax' - // } - // $.ajax({ - // type: 'get', - // url: searchUrl, - // data: data, - // beforeSend: function (response) { - // $(btn).attr('disabled', true) - // $(btn).attr('data-page', page) - // $(btn).data('page', page) - // }, - // complete: function (response) { - // if (page >= maxpage){ - // $(btn).remove() - // } - // else{ - // $(btn).attr('disabled', false) - // } - // }, - // success: function (response) { - // $('.products').append(response) - // initCounters() - // initOverlay() - // initSelect() - // modalOpen('.open-to-know', '.modal__to-know'); - - // /// РЕШЕНИЕ ДЛЯ СТЕНДА AJAX ДЛЯ ПОДГРУЗКИ AJAX - // document.querySelectorAll('img').forEach(img => { - // var str = img.attributes['src'].value.replace('https://cosmopet.good-production.xyz/', 'https://cosmopet.shop/') - // checkImage(str, function(){ img.attributes['src'].value = str }); - // if (img.attributes['srcset']){ - // img.attributes['srcset'].value = img.attributes['srcset'].value.replace('cosmopet.good-production.xyz', '') - // } - // }) - // // - // }, - // }); - // }) - - // $('body').on('click', '.singular-w-btn', function(){ - // var wg = $(this).data('wg') - // var id = $(this).data('id') - // $('#variation_id').val(id) - // $('.detail__block-price').hide() - // $('.detail__block-price[data-wg="' + wg + '"]').show() - // if ($(this).data('available')){ - // $('.detail-block-form__item--tn').hide() - // $('.detail-block-form__item--add').show() - // } - // else{ - // $('.detail-block-form__item--tn').show() - // $('.detail-block-form__item--add').hide() - // } - - // }) - // асинхронный запрос при отправке формы - // $( '#ajaxform' ).on( 'submit',function( event ) { - // event.preventDefault(); - - // const form = $(this); - - // $.ajax( { - // type : 'POST', - // url : woocommerce_params.ajax_url, - // data : form.serialize(), - // beforeSend : function( xhr ) { - // $('.products').addClass('loading') - // form.find('.button-submit').addClass('loading').attr('disabled', true) - // }, - // success : function( data ) { - // $( '.products' ).html( data.products ); - // $('.product__tag').html(data.tags); - // $( '.btn-load-ajax' ).remove() - // form.find('.button-submit').removeClass('loading').attr('disabled', false) - // form.find('.modal__close').click() - // $('.products').removeClass('loading') - // if (data.err){ - // $('.product__error-button').show() - // } - // else{ - // $('.product__error-button').hide() - // } - - // initCounters() - // initOverlay() - // initSelect() - // modalOpen('.open-to-know', '.modal__to-know'); - - // document.querySelectorAll('img').forEach(img => { - // var str = img.attributes['src'].value.replace('https://cosmopet.good-production.xyz/', 'https://cosmopet.shop/') - // checkImage(str, function(){ img.attributes['src'].value = str }); - // if (img.attributes['srcset']){ - // img.attributes['srcset'].value = img.attributes['srcset'].value.replace('cosmopet.good-production.xyz', '') - // } - // }) - // } - - // } ); - - // } ); - - - // $('body').on('click', '.product-tag__item', function(){ - // $('#tax_' + $(this).data('tag')).find('input').prop('checked', false) - // $('#tax_' + $(this).data('tag')).removeClass('active'); - // $(this).remove() - // $('#ajaxform').submit() - // }) - - // Login $('.login_popup').on('click', function(e){ @@ -585,86 +228,6 @@ selects.forEach(select => { } initSelect() -// counter - -// checkbox -// let checkbox = document.querySelectorAll('.checkbox'); - -// checkbox.forEach(e => { -// e.onclick = function (event) { -// let input = e.querySelector('.checkbox__input'); - -// if (!e.classList.contains('active')) { -// input.checked = 1; -// }else{ -// input.checked = 0; -// } -// e.classList.toggle('active'); -// } -// }) -// checkbox - - -// function -// function modalOpen(buttonElement, contentElement){ -// let modal = document.querySelector('.modal'), -// aside = document.querySelector('.modal__aside'), -// elements = document.querySelectorAll(buttonElement), -// device = window.screen.width; - -// elements.forEach(e => { -// let thisContentElement = document.querySelector(contentElement); - -// e.onclick = function () { -// modal.classList.add('active'); -// thisContentElement.classList.add('active'); - -// let width = thisContentElement.clientWidth; - -// setTimeout(() => { -// if (device <= 720) { -// aside.style.width = `${device}px`; -// thisContentElement.style.opacity = 1; -// thisContentElement.style.filter = 'blur(0px)'; -// }else{ -// aside.style.width = `${width}px`; -// thisContentElement.style.opacity = 1; -// thisContentElement.style.filter = 'blur(0px)'; -// } -// }, 10); -// } -// }) -// } - -// function modalClose(buttonElement) { -// let modal = document.querySelector('.modal'), -// aside = document.querySelector('.modal__aside'), -// asideItems = document.querySelectorAll('.modal__item'), -// elements = document.querySelectorAll(buttonElement); - -// elements.forEach(e => { -// e.onclick = function () { -// 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); @@ -728,43 +291,6 @@ function toggleHeader(button, content, blockheight, removeBlock, removeClass) { } } - -// resize -window.addEventListener('resize', (e) => { - let width = window.screen.width; - - // media - 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 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 - -// - - if (document.querySelector('.header').classList.contains('white')) { window.addEventListener("scroll", function (e) { let header = document.querySelector('.header'); diff --git a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css index 6dd7aa8..7549415 100644 --- a/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css +++ b/wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css @@ -778,7 +778,7 @@ textarea{ width: 600px; } .modal__to-know, -.modal__to-know-submit{ +.modal__to-know-submit, .modal__login{ width: 412px; } diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/_gp-function.js b/wp-content/themes/cosmopet/modules/layout/assets/js/_gp-function.js deleted file mode 100644 index d76ad0b..0000000 --- a/wp-content/themes/cosmopet/modules/layout/assets/js/_gp-function.js +++ /dev/null @@ -1,166 +0,0 @@ -// 'use strict'; - -// // Глобальные переменные для управления состоянием -// let currentModalContent = null; - -// function modalOpen(buttonElement, contentElement) { -// const modal = document.querySelector('.modal'); -// const aside = document.querySelector('.modal__aside'); -// const elements = document.querySelectorAll(buttonElement); -// const device = window.screen.width; - -// // Обработчик закрытия по клику на оверлей -// modal.addEventListener('click', function(e) { -// if (e.target === modal && currentModalContent) { -// closeModal(currentModalContent); -// } -// }); - -// // Обработчик закрытия по Escape -// document.addEventListener('keydown', function(e) { -// if (e.key === 'Escape' && currentModalContent) { -// closeModal(currentModalContent); -// } -// }); - -// elements.forEach(e => { -// e.addEventListener('click', function() { -// const content = document.querySelector(contentElement); -// currentModalContent = content; - -// // Сброс стилей перед открытием -// resetModalStyles(); - -// modal.classList.add('active'); -// content.classList.add('active'); - -// const width = content.clientWidth; - -// setTimeout(() => { -// if (device <= 720) { -// aside.style.width = `${device}px`; -// } else { -// aside.style.width = `${width}px`; -// } -// content.style.opacity = '1'; -// content.style.filter = 'blur(0)'; -// }, 10); -// }); -// }); -// } - -// function modalClose(buttonElement) { -// const elements = document.querySelectorAll(buttonElement); - -// elements.forEach(e => { -// e.addEventListener('click', function() { -// if (currentModalContent) { -// closeModal(currentModalContent); -// } -// }); -// }); -// } - -// function closeModal(contentElement) { -// const modal = document.querySelector('.modal'); -// const aside = document.querySelector('.modal__aside'); - -// aside.style.width = '0'; -// contentElement.style.opacity = '0'; -// contentElement.style.filter = 'blur(10px)'; - -// setTimeout(() => { -// contentElement.classList.remove('active'); -// modal.classList.remove('active'); -// currentModalContent = null; -// }, 300); -// } - -// function resetModalStyles() { -// const allModals = document.querySelectorAll('.modal__item'); - -// allModals.forEach(modal => { -// modal.style.opacity = ''; -// modal.style.filter = ''; -// modal.classList.remove('active'); -// }); - -// document.querySelector('.modal__aside').style.width = ''; -// } -// 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'); -// } -// } - -// }); -// } - -// function toggleHeader(button, content, blockheight, removeBlock, removeClass) { -// let thisButton = document.querySelector(button), -// thisContent = document.querySelector(content), -// thisRemoveBlock = document.querySelector(removeBlock) || '', -// thisBlockheight = document.querySelector(blockheight); - -// thisButton.onclick = function () { -// let height = thisBlockheight.clientHeight; - -// if (!thisContent.classList .contains('open')) { -// thisContent.style.height = `${height}px`; -// thisContent.classList .add('open'); - -// if (removeBlock) { -// thisRemoveBlock.classList.remove(removeClass); -// } -// }else{ -// thisContent.style.height = null; -// thisContent.classList .remove('open'); - -// if (removeBlock) { -// if (window.scrollY <= 25) { -// thisRemoveBlock.classList.add(removeClass); -// } -// } -// } -// } -// } - -// function modalFormOpen(formOrNotification) { -// let buttons = document.querySelectorAll(formOrNotification), -// modal = document.querySelector('.modal'); - -// buttons.forEach(button => { -// button.onclick = function (eventButton) { -// let classOpenForm = button.dataset.form, -// form = modal.querySelector(`.${classOpenForm}`); - -// form.classList.add('active'); -// modal.classList.add('active'); -// } -// }) -// } -// // function \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js index 435d5b1..b1b4c4a 100644 --- a/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js +++ b/wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js @@ -134,57 +134,12 @@ toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'whi toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); // header -// modal -modalOpen('.button--filter', '.modal__filter'); -modalOpen('.basket-open', '.modal__basket'); -modalOpen('.open-to-know', '.modal__to-know'); -modalClose('.modal__close'); - -let modal = document.querySelector('.modal'); - -modal.onclick = function (event) { - let target = event.target; - if (target.classList.contains('modal')) { - closeAllModals(); - } -} - // 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'); - -// 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'); @@ -237,70 +192,6 @@ checkbox.forEach(e => { // function -function modalOpen(buttonElement, contentElement){ - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - elements = document.querySelectorAll(buttonElement), - device = window.screen.width, - 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'); - - let width = thisContentElement.clientWidth; - - setTimeout(() => { - if (device <= 720) { - aside.style.width = `${device}px`; - thisContentElement.style.opacity = 1; - thisContentElement.style.filter = 'blur(0px)'; - }else{ - aside.style.width = `${width}px`; - thisContentElement.style.opacity = 1; - thisContentElement.style.filter = 'blur(0px)'; - } - }, 10); - } - }) -} - - -function closeAllModals() { - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - asideItems = document.querySelectorAll('.modal__item'), - body = document.querySelector('body'); - - aside.style.width = '0px'; - body.classList.remove('overflow-hidden'); - - asideItems.forEach(item => { - if (item.classList.contains('active')) { - item.style.opacity = 0; - item.style.filter = 'blur(10px)'; - } - }); - - setTimeout(() => { - asideItems.forEach(item => { - item.classList.remove('active'); - }); - modal.classList.remove('active'); - }, 300); -} - - -function modalClose(buttonElement) { - let elements = document.querySelectorAll(buttonElement); - elements.forEach(e => { - e.onclick = closeAllModals; - }); -} function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { let elements = document.querySelectorAll(mainElement); @@ -365,36 +256,6 @@ function toggleHeader(button, content, blockheight, removeBlock, 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 @@ -414,43 +275,6 @@ if (document.querySelector('.header').classList.contains('white')) { } // scroll -// document.addEventListener('DOMContentLoaded', function () { -// const aboutSwiper = new Swiper('.about_slider', { -// loop: true, -// centeredSlides: true, -// grabCursor: true, -// slidesPerView: 'auto', -// spaceBetween: 30, -// effect: 'coverflow', -// coverflowEffect: { -// rotate: 0, -// stretch: 0, -// depth: 150, -// modifier: 2.5, -// slideShadows: false, -// }, -// navigation: { -// nextEl: '.about_slider_nav.next', -// prevEl: '.about_slider_nav.prev', -// }, -// breakpoints: { -// 0: { -// slidesPerView: 1.5, -// }, -// 480: { -// slidesPerView: 2.5, -// }, -// 768: { -// slidesPerView: 3.5, -// }, -// 1024: { -// slidesPerView: 5, -// }, -// }, -// }); -// }); - - document.addEventListener('DOMContentLoaded', function () { const petsSlider = new Swiper(".discount_cosmodog__slider", { slidesPerView: 1, @@ -467,21 +291,6 @@ document.addEventListener('DOMContentLoaded', function () { }); }); -// document.addEventListener('DOMContentLoaded', function () { -// const marketSlider = new Swiper(".marketplace__swiper", { -// slidesPerView: 'auto', -// spaceBetween: 13, -// freeMode: true, // свободная прокрутка - -// mousewheel: { -// enabled: true, -// // sensitivity: 1, -// // releaseOnEdges: true, -// }, -// }); -// }); - - jQuery(document).ready(function($) { jQuery('.popup-wrap').on('click', function(e) { @@ -495,50 +304,50 @@ jQuery(document).ready(function($) { }); -// Находим все элементы с классом login-open -document.addEventListener('DOMContentLoaded', function() { - const loginButtons = document.querySelectorAll('.login-open'); +// // Находим все элементы с классом login-open +// document.addEventListener('DOMContentLoaded', function() { +// const loginButtons = document.querySelectorAll('.login-open'); - loginButtons.forEach(button => { - button.addEventListener('click', function(event) { - event.preventDefault(); +// 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'); +// 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'); +// modal.classList.add('active'); +// modalLogin.classList.add('active'); - // Set width and slide in from right - modalAside.style.width = '20vw'; - modalAside.style.right = '0'; - }); - }); +// // 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'); +// const closeButtons = document.querySelectorAll('.modal-close'); +// const modal = document.querySelector('.modal'); - closeButtons.forEach(button => { - button.addEventListener('click', closeModal); - }); +// closeButtons.forEach(button => { +// button.addEventListener('click', closeModal); +// }); - modal.addEventListener('click', function(event) { - if (event.target === modal) { - 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'); +// 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'); +// modal.classList.remove('active'); +// modalLogin.classList.remove('active'); - // Reset styles - modalAside.style.width = ''; - modalAside.style.right = '-30vw'; - } -}); +// // Reset styles +// modalAside.style.width = ''; +// modalAside.style.right = '-30vw'; +// } +// }); diff --git a/wp-content/themes/cosmopet/modules/layout/module-controller.php b/wp-content/themes/cosmopet/modules/layout/module-controller.php index 08e4f89..b3510f8 100644 --- a/wp-content/themes/cosmopet/modules/layout/module-controller.php +++ b/wp-content/themes/cosmopet/modules/layout/module-controller.php @@ -4,4 +4,5 @@ include_module('header'); include_component('shop', 'cart'); include_module('shop'); +include_module('popup'); include_module('footer'); diff --git a/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-desktop.css index ed21ee4..e69de29 100644 --- a/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-desktop.css @@ -1,154 +0,0 @@ -/* Footer */ -.footer { - background: var(--main_black); - padding: 40px 0 38px; - color: var(--main_white); -} - -.footer-top { - display: flex; - align-items: stretch; - justify-content: space-between; - gap: 48px; -} - -.footer-top .logo { - display: flex; - align-items: center; - gap: 10px; - font-size: 20px; - font-weight: 500; - text-transform: uppercase; - background: var(--accent-1); - color: transparent; - -webkit-background-clip: text; - background-clip: text; - margin-bottom: 24px; -} - -.footer-content__address { - font-size: 24px; - font-weight: 500; - line-height: 32px; - margin-bottom: 32px; -} - -.footer-content { - width: 100%; -} - -.footer-content ul { - display: flex; - flex-direction: column; - gap: 24px; -} - -.footer-content ul li { - display: flex; - flex-direction: column; - gap: 4px; -} - -.footer-content ul p { - font-size: 16px; - font-weight: bold; - line-height: 20px; -} - -.footer-content ul a { - font-size: 24px; - font-weight: 500; - line-height: 32px; -} - -.footer-content__wrap { - display: flex; - align-items: flex-end; - justify-content: space-between; - width: 100%; -} - -.footer-top__link { - display: flex; - flex-direction: column; - gap: 24px; -} - -.footer-top__link .link-black { - padding: 7px 15px; - color: var(--main_white); - font-size: 24px; - line-height: 32px; - font-weight: 500; - white-space: nowrap; - border: 1px solid var(--main_white); - border-radius: 24px; -} - -.footer-top__link .link-white { - width: 100%; - text-align: center; - background: var(--main_white); - color: var(--main_black); - font-size: 20px; - font-weight: 600; - line-height: 24px; - padding: 12px; - border-radius: 20px; -} - -.footer-contact { - width: 364px; - flex-shrink: 0; - background: var(--accent-1); - border-radius: 24px; - padding: 24px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.footer-contact__title { - color: var(--main_black); - font-size: 24px; - font-weight: 500; - line-height: 32px; -} - -.footer-contact__submit { - width: 100%; - text-align: center; - height: 48px; - border-radius: 16px; - background: var(--main_black); - font-size: 20px; - font-weight: 600; - line-height: 24px; - color: var(--main_white); -} - -.footer-bottom { - display: flex; - align-items: center; - justify-content: space-between; - padding-top: 17px; - margin-top: 19px; - border-top: 1px solid var(--main_white); -} - -.footer-network { - display: flex; - align-items: center; - gap: 32px; -} - -.footer-bottom a { - font-size: 16px; - line-height: 20px; - font-weight: 500; - color: var(--main_white); - opacity: 0.6; - text-decoration: underline; -} -/* Footer end */ - diff --git a/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-mobile.css b/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-mobile.css index 754cfa9..e69de29 100644 --- a/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-mobile.css +++ b/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-mobile.css @@ -1,68 +0,0 @@ -/* Стили для мобильных устройств */ -@media only screen and (max-width: 576px) { - .footer { - padding: 24px 0 58px; - } - - .footer-top { - align-items: flex-start; - text-align: left; - gap: 24px; - } - - .footer-content__wrap { - align-items: flex-start; - gap: 24px; - } - - .footer-content { - align-items: flex-start; - } - - .footer-content .logo { - font-size: 20px; - margin-bottom: 24px; - } - - .footer-content__address { - font-size: 18px; - line-height: 24px; - margin-bottom: 32px; - } - - .footer-content ul { - gap: 24px; - } - - .footer-content ul p { - font-size: 16px; - line-height: 20px; - } - - .footer-content ul a { - font-size: 24px; - line-height: 32px; - } - - .footer-top__link .link-white { - display: none; - } - - .footer-contact { - width: 100%; - padding: 16px; - border-radius: 24px; - } - - .footer-contact__title { - color: var(--main_white); - } - - .footer-bottom { - margin-top: 0; - padding-top: 24px; - border: 0; - align-items: flex-start; - gap: 17px; - } -} \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-tablet.css b/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-tablet.css index ffc5b2e..e69de29 100644 --- a/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-tablet.css +++ b/wp-content/themes/cosmopet/modules/popup/assets/css/gp-style-tablet.css @@ -1,4 +0,0 @@ -/* Стили для планшетов */ -@media only screen and (max-width: 992px) { - -} diff --git a/wp-content/themes/cosmopet/modules/popup/assets/js/modal.js b/wp-content/themes/cosmopet/modules/popup/assets/js/modal.js new file mode 100644 index 0000000..4036f14 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/popup/assets/js/modal.js @@ -0,0 +1,116 @@ +// modal +modalOpen('.button--filter', '.modal__filter'); +modalOpen('.basket-open', '.modal__basket'); +modalOpen('.open-to-know', '.modal__to-know'); +modalOpen('.login-open', '.modal__login'); +modalClose('.modal__close'); + +let modal = document.querySelector('.modal'); + +modal.onclick = function (event) { + let target = event.target; + if (target.classList.contains('modal')) { + closeAllModals(); + } +} + +// function +function modalOpen(buttonElement, contentElement){ + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + elements = document.querySelectorAll(buttonElement), + device = window.screen.width, + 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'); + + let width = thisContentElement.clientWidth; + if (width < 400){ + width = 400 + } + setTimeout(() => { + if (device <= 720) { + aside.style.width = `${device}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + }else{ + + aside.style.width = `${width}px`; + thisContentElement.style.opacity = 1; + thisContentElement.style.filter = 'blur(0px)'; + } + }, 10); + } + }) +} + +function closeAllModals() { + let modal = document.querySelector('.modal'), + aside = document.querySelector('.modal__aside'), + asideItems = document.querySelectorAll('.modal__item'), + body = document.querySelector('body'); + + aside.style.width = '0px'; + body.classList.remove('overflow-hidden'); + + asideItems.forEach(item => { + if (item.classList.contains('active')) { + item.style.opacity = 0; + item.style.filter = 'blur(10px)'; + } + }); + + setTimeout(() => { + asideItems.forEach(item => { + item.classList.remove('active'); + }); + modal.classList.remove('active'); + }, 300); +} + +function modalClose(buttonElement) { + let elements = document.querySelectorAll(buttonElement); + elements.forEach(e => { + e.onclick = closeAllModals; + }); +} + +// 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'); + modalOpen('.login-open', '.modal__login'); + 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; + if (newWidth < 400){ + newWidth = 400 + } + aside.style.width = `${newWidth}px` + } + } + }) + // } +}); +// resize \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js deleted file mode 100644 index 23b16ab..0000000 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js +++ /dev/null @@ -1,156 +0,0 @@ -// 'use strict'; - -// // function -// function modalOpen(buttonElement, contentElement){ -// let modal = document.querySelector('.modal'), -// aside = document.querySelector('.modal__aside'), -// elements = document.querySelectorAll(buttonElement), -// device = window.screen.width; - -// elements.forEach(e => { -// let thisContentElement = document.querySelector(contentElement); - -// e.onclick = function () { -// modal.classList.add('active'); -// thisContentElement.classList.add('active'); - -// let width = thisContentElement.clientWidth; - -// setTimeout(() => { -// if (device <= 720) { -// aside.style.width = `${device}px`; -// thisContentElement.style.opacity = 1; -// thisContentElement.style.filter = 'blur(0px)'; -// }else{ -// aside.style.width = `${width}px`; -// thisContentElement.style.opacity = 1; -// thisContentElement.style.filter = 'blur(0px)'; -// } -// }, 10); -// } -// }) -// } - -// function modalClose(buttonElement) { -// let modal = document.querySelector('.modal'), -// aside = document.querySelector('.modal__aside'), -// asideItems = document.querySelectorAll('.modal__item'), -// elements = document.querySelectorAll(buttonElement); - -// elements.forEach(e => { -// e.onclick = function () { -// 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 closeModalForm(close){ -// let buttons = document.querySelectorAll(close), -// modal = document.querySelector('.modal'); - -// buttons.forEach(button => { -// button.onclick = function (buttonEvent) { -// modal.classList.remove('active'); - -// if (!modal.querySelector('.modal-map.active')) { -// modal.querySelector('.modal-form.active').classList.remove('active'); -// }else{ -// modal.querySelector('.modal-map.active').classList.remove('active'); -// } -// } -// }) -// } - -// 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'); -// } -// } - -// }); -// } - -// function toggleHeader(button, content, blockheight, removeBlock, removeClass) { -// let thisButton = document.querySelector(button), -// thisContent = document.querySelector(content), -// thisRemoveBlock = document.querySelector(removeBlock) || '', -// thisBlockheight = document.querySelector(blockheight); - -// thisButton.onclick = function () { -// let height = thisBlockheight.clientHeight; - -// if (!thisContent.classList .contains('open')) { -// thisContent.style.height = `${height}px`; -// thisContent.classList .add('open'); - -// if (removeBlock) { -// thisRemoveBlock.classList.remove(removeClass); -// } -// }else{ -// thisContent.style.height = null; -// thisContent.classList .remove('open'); - -// if (removeBlock) { -// if (window.scrollY <= 25) { -// thisRemoveBlock.classList.add(removeClass); -// } -// } -// } -// } -// } - -// function modalFormOpen(formOrNotification) { -// let buttons = document.querySelectorAll(formOrNotification), -// modal = document.querySelector('.modal'); - -// buttons.forEach(button => { -// button.onclick = function (eventButton) { -// let classOpenForm = button.dataset.form, -// form = modal.querySelector(`.${classOpenForm}`); - -// form.classList.add('active'); -// modal.classList.add('active'); -// } -// }) -// } -// // function \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js index 17670d2..0605ce4 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js @@ -6,60 +6,6 @@ toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'whi toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white'); // header -// // modal -// modalOpen('.button--filter', '.modal__filter'); -// modalOpen('.basket-open', '.modal__basket'); -// modalOpen('.open-to-know', '.modal__to-know'); -// modalClose('.modal__close'); - -// let modalElement = document.querySelector('.modal'); - -// modalElement.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'); - -// 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 // select toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); @@ -136,156 +82,9 @@ selects.forEach(select => { // // checkbox -// // function -// function modalOpen(buttonElement, contentElement){ -// let modal = document.querySelector('.modal'), -// aside = document.querySelector('.modal__aside'), -// elements = document.querySelectorAll(buttonElement), -// device = window.screen.width; - -// elements.forEach(e => { -// let thisContentElement = document.querySelector(contentElement); - -// e.onclick = function () { -// modal.classList.add('active'); -// thisContentElement.classList.add('active'); - -// let width = thisContentElement.clientWidth; - -// setTimeout(() => { -// if (device <= 720) { -// aside.style.width = `${device}px`; -// thisContentElement.style.opacity = 1; -// thisContentElement.style.filter = 'blur(0px)'; -// }else{ -// aside.style.width = `${width}px`; -// thisContentElement.style.opacity = 1; -// thisContentElement.style.filter = 'blur(0px)'; -// } -// }, 10); -// } -// }) -// } - -// function modalClose(buttonElement) { -// let modal = document.querySelector('.modal'), -// aside = document.querySelector('.modal__aside'), -// asideItems = document.querySelectorAll('.modal__item'), -// elements = document.querySelectorAll(buttonElement); - -// elements.forEach(e => { -// e.onclick = function () { -// 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'); -// } -// } - -// }); -// } -// function toggleHeader(button, content, blockheight, removeBlock, removeClass) { -// let thisButton = document.querySelector(button), -// thisContent = document.querySelector(content), -// thisRemoveBlock = document.querySelector(removeBlock) || '', -// thisBlockheight = document.querySelector(blockheight); -// thisButton.onclick = function () { -// let height = thisBlockheight.clientHeight; -// if (!thisContent.classList .contains('open')) { -// thisContent.style.height = `${height}px`; -// thisContent.classList .add('open'); - -// if (removeBlock) { -// thisRemoveBlock.classList.remove(removeClass); -// } -// }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'); - -// 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 if (document.querySelector('.header').classList.contains('white')) { diff --git a/wp-content/themes/cosmopet/static/front-page/css/style.css b/wp-content/themes/cosmopet/static/front-page/css/style.css index 78cea8b..9429a19 100644 --- a/wp-content/themes/cosmopet/static/front-page/css/style.css +++ b/wp-content/themes/cosmopet/static/front-page/css/style.css @@ -4548,13 +4548,3 @@ color: #f4f1f0; .discount_block{ padding-bottom: 80px; } - -.modal__aside { - position: fixed; - transition: right 0.3s ease-in-out; -} - -.modal__aside.active { - right: 0; -} - diff --git a/wp-content/themes/cosmopet/static/front-page/js/main.js b/wp-content/themes/cosmopet/static/front-page/js/main.js index ed0a66b..4dba9f5 100644 --- a/wp-content/themes/cosmopet/static/front-page/js/main.js +++ b/wp-content/themes/cosmopet/static/front-page/js/main.js @@ -471,55 +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 const reviewsSwiper = new Swiper('.reviews-slider', { diff --git a/wp-content/themes/cosmopet/templates/footer.twig b/wp-content/themes/cosmopet/templates/footer.twig index 2d3dc8b..fc5e174 100644 --- a/wp-content/themes/cosmopet/templates/footer.twig +++ b/wp-content/themes/cosmopet/templates/footer.twig @@ -171,117 +171,6 @@ function onTelegramAuth(user) { } }); }); - -document.addEventListener('DOMContentLoaded', function () { - // Функция для обновления ширины .modal__aside - function updateAsideWidth() { - const modalItem = document.querySelector('.modal__item.active'); - if (modalItem) { - const aside = modalItem.querySelector('.modal__aside'); - if (aside) { - aside.classList.add('active'); // Используем CSS для анимации ширины - } - } - } - - // Общая функция для открытия модальных окон - function modalOpen(triggerSelector, modalSelector) { - const triggers = document.querySelectorAll(triggerSelector); - const modal = document.querySelector('.modal'); - const modalItem = document.querySelector(modalSelector); - const modalAside = modalItem ? modalItem.querySelector('.modal__aside') : null; - - triggers.forEach(trigger => { - // Удаляем старые обработчики, чтобы избежать дублирования - trigger.removeEventListener('click', handleModalOpen); - trigger.addEventListener('click', handleModalOpen); - - function handleModalOpen(e) { - e.preventDefault(); - - // Сбрасываем стили и классы для всех модальных окон - document.querySelectorAll('.modal__item').forEach(item => { - item.classList.remove('active'); - item.style.cssText = ''; // Сбрасываем стили - const aside = item.querySelector('.modal__aside'); - if (aside) { - aside.classList.remove('active'); - aside.style.width = ''; // Сбрасываем style.width - } - }); - - // Открываем нужное модальное окно - if (modal && modalItem) { - modal.classList.add('active'); - modalItem.classList.add('active'); - if (modalAside) { - modalAside.classList.add('active'); // Используем CSS для анимации - } - } - } - }); - } - - // Общая функция для закрытия модальных окон - function modalClose(closeSelector) { - const closes = document.querySelectorAll(closeSelector); - const modal = document.querySelector('.modal'); - - closes.forEach(close => { - // Удаляем старые обработчики - close.removeEventListener('click', handleModalClose); - close.addEventListener('click', handleModalClose); - - function handleModalClose() { - document.querySelectorAll('.modal__item').forEach(item => { - const aside = item.querySelector('.modal__aside'); - if (aside) { - aside.classList.remove('active'); // Запускаем анимацию закрытия - } - item.classList.remove('active'); - item.style.cssText = ''; // Сбрасываем стили - }); - if (modal) { - modal.classList.remove('active'); - } - } - }); - } - - // Обработчик клика по фону модального окна - const modal = document.querySelector('.modal'); - if (modal) { - modal.addEventListener('click', (event) => { - if (event.target.classList.contains('modal')) { - const modalItem = modal.querySelector('.modal__item.active'); - if (modalItem) { - const aside = modalItem.querySelector('.modal__aside'); - if (aside) { - aside.classList.remove('active'); // Запускаем анимацию закрытия - } - modalItem.classList.remove('active'); - modal.classList.remove('active'); - } - } - }); - } - - // Вызываем функции для привязки обработчиков - 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'); - - // Обновляем ширину при изменении размера окна - window.addEventListener('resize', () => { - updateAsideWidth(); - }); - - // Обновляем ширину при загрузке страницы - updateAsideWidth(); -}); {{ function ('tgScript') }} diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/_gp-function.js b/wp-content/themes/cosmopet/woocommerce/assets/js/_gp-function.js index ed4d7ab..76766af 100644 --- a/wp-content/themes/cosmopet/woocommerce/assets/js/_gp-function.js +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/_gp-function.js @@ -1,81 +1,81 @@ 'use strict'; -// function -export function modalOpen(buttonElement, contentElement){ - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - elements = document.querySelectorAll(buttonElement), - device = window.screen.width; - - elements.forEach(e => { - let thisContentElement = document.querySelector(contentElement); - - e.onclick = function () { - modal.classList.add('active'); - thisContentElement.classList.add('active'); +// // function +// export function modalOpen(buttonElement, contentElement){ +// let modal = document.querySelector('.modal'), +// aside = document.querySelector('.modal__aside'), +// elements = document.querySelectorAll(buttonElement), +// device = window.screen.width; + +// elements.forEach(e => { +// let thisContentElement = document.querySelector(contentElement); + +// e.onclick = function () { +// modal.classList.add('active'); +// thisContentElement.classList.add('active'); - let width = thisContentElement.clientWidth; - - setTimeout(() => { - if (device <= 720) { - aside.style.width = `${device}px`; - thisContentElement.style.opacity = 1; - thisContentElement.style.filter = 'blur(0px)'; - }else{ - aside.style.width = `${width}px`; - thisContentElement.style.opacity = 1; - thisContentElement.style.filter = 'blur(0px)'; - } - }, 10); - } - }) -} - -export function modalClose(buttonElement) { - let modal = document.querySelector('.modal'), - aside = document.querySelector('.modal__aside'), - asideItems = document.querySelectorAll('.modal__item'), - elements = document.querySelectorAll(buttonElement); - - elements.forEach(e => { - e.onclick = function () { - aside.style.width = '0px'; +// let width = thisContentElement.clientWidth; + +// setTimeout(() => { +// if (device <= 720) { +// aside.style.width = `${device}px`; +// thisContentElement.style.opacity = 1; +// thisContentElement.style.filter = 'blur(0px)'; +// }else{ +// aside.style.width = `${width}px`; +// thisContentElement.style.opacity = 1; +// thisContentElement.style.filter = 'blur(0px)'; +// } +// }, 10); +// } +// }) +// } + +// export function modalClose(buttonElement) { +// let modal = document.querySelector('.modal'), +// aside = document.querySelector('.modal__aside'), +// asideItems = document.querySelectorAll('.modal__item'), +// elements = document.querySelectorAll(buttonElement); + +// elements.forEach(e => { +// e.onclick = function () { +// 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); - } - }) -} - -export function closeModalForm(close){ - let buttons = document.querySelectorAll(close), - modal = document.querySelector('.modal'); - - buttons.forEach(button => { - button.onclick = function (buttonEvent) { - modal.classList.remove('active'); +// 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); +// } +// }) +// } + +// export function closeModalForm(close){ +// let buttons = document.querySelectorAll(close), +// modal = document.querySelector('.modal'); + +// buttons.forEach(button => { +// button.onclick = function (buttonEvent) { +// modal.classList.remove('active'); - if (!modal.querySelector('.modal-map.active')) { - modal.querySelector('.modal-form.active').classList.remove('active'); - }else{ - modal.querySelector('.modal-map.active').classList.remove('active'); - } - } - }) -} +// if (!modal.querySelector('.modal-map.active')) { +// modal.querySelector('.modal-form.active').classList.remove('active'); +// }else{ +// modal.querySelector('.modal-map.active').classList.remove('active'); +// } +// } +// }) +// } export function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { let elements = document.querySelectorAll(mainElement);