Good-Production
/
cosmopet-architecture
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
dev_10_refactoring
Максим Максимов 2 months ago
parent 21c1a5f156
commit 6121332038
4 changed files with 337 additions and 342 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 49
      wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
  2. 1
      wp-content/themes/cosmopet/static/front-page/css/style.css
  3. 47
      wp-content/themes/cosmopet/static/front-page/js/main.js
  4. 582
      wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js

49
wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js
Unescape View File

@ -492,4 +492,53 @@ jQuery(document).ready(function($) {
$('.close-btn').on('click', function(e) { $('.close-btn').on('click', function(e) {
$('.modalProfile').removeClass('active'); $('.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';
}
}); });

1
wp-content/themes/cosmopet/static/front-page/css/style.css
Unescape View File

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

47
wp-content/themes/cosmopet/static/front-page/js/main.js
Unescape View File

@ -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() { document.addEventListener('DOMContentLoaded', function() {
// Initialize Swiper // Initialize Swiper

582
wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js
Unescape View File

@ -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');
// 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 => { // buttons.forEach(button => {
let input = radioBlock.querySelector('.radio-button__input'); // let input = radioBlock.querySelector('.radio-button__input');
button.onclick = function (e) { // button.onclick = function (e) {
e.preventDefault(); // e.preventDefault();
buttons.forEach(thisButton => { // buttons.forEach(thisButton => {
if (thisButton.classList.contains('active')) { // if (thisButton.classList.contains('active')) {
thisButton.classList.remove('active') // thisButton.classList.remove('active')
} // }
}) // })
let text = button.textContent.trim(); // let text = button.textContent.trim();
button.classList.toggle('active'); // button.classList.toggle('active');
input.value = text; // input.value = text;
} // }
}) // })
}) // })
// radio-button // // radio-button
let products = document.querySelectorAll('.product__item'); // let products = document.querySelectorAll('.product__item');
products.forEach(productItem => { // products.forEach(productItem => {
let button = productItem.querySelector('.open-overlay'), // let button = productItem.querySelector('.open-overlay'),
overlay = productItem.querySelector('.product-item__overlay'); // overlay = productItem.querySelector('.product-item__overlay');
if (button) { // if (button) {
button.onclick = function (e) { // button.onclick = function (e) {
document.querySelectorAll('.product__item').forEach(e => { // document.querySelectorAll('.product__item').forEach(e => {
if (e.classList.contains('active')) { // if (e.classList.contains('active')) {
e.classList.remove('active'); // e.classList.remove('active');
} // }
}); // });
document.querySelectorAll('.product-item__overlay').forEach(e => { // document.querySelectorAll('.product-item__overlay').forEach(e => {
if (e.classList.contains('active')) { // if (e.classList.contains('active')) {
e.classList.remove('active'); // e.classList.remove('active');
} // }
}); // });
productItem.classList.toggle('active'); // productItem.classList.toggle('active');
overlay.classList.toggle('active'); // overlay.classList.toggle('active');
} // }
} // }
}) // })
// select // // select
// toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true); // // toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
// let selects = document.querySelectorAll('.select'); // // let selects = document.querySelectorAll('.select');
// selects.forEach(select => { // // selects.forEach(select => {
// let state = select.querySelector('.select__state'), // // let state = select.querySelector('.select__state'),
// content = select.querySelector('.state__block'), // // content = select.querySelector('.state__block'),
// buttons = select.querySelectorAll('.state__button'); // // buttons = select.querySelectorAll('.state__button');
// buttons.forEach(e => { // // buttons.forEach(e => {
// let button = e; // // let button = e;
// e.onclick = function (event) { // // e.onclick = function (event) {
// event.preventDefault(); // // event.preventDefault();
// buttons.forEach(element => { // // buttons.forEach(element => {
// if (element.classList.contains('active')) { // // if (element.classList.contains('active')) {
// element.classList.remove('active'); // // element.classList.remove('active');
// } // // }
// }) // // })
// let text = e.textContent.trim(); // // let text = e.textContent.trim();
// state.value = text; // // state.value = text;
// button.classList.add('active');
// content.style.height = 0;
// select.classList.remove('active');
// }
// })
// })
// // button.classList.add('active');
// // content.style.height = 0;
// // select.classList.remove('active');
// // }
// // })
// // })
// select
// counter // // select
// let counters = document.querySelectorAll('.counter');
// counters.forEach(e => { // // counter
// let minus = e.querySelector('.minus'), // // let counters = document.querySelectorAll('.counter');
// plus = e.querySelector('.plus'),
// input = e.querySelector('.counter__input');
// minus.onclick = function (e) { // // counters.forEach(e => {
// e.preventDefault(); // // let minus = e.querySelector('.minus'),
// // plus = e.querySelector('.plus'),
// // input = e.querySelector('.counter__input');
// // minus.onclick = function (e) {
// // e.preventDefault();
// let number = input.value; // // let number = input.value;
// if (number >= 2){ // // if (number >= 2){
// input.value = Number(number) - 1; // // input.value = Number(number) - 1;
// } // // }
// } // // }
// plus.onclick = function (e) { // // plus.onclick = function (e) {
// e.preventDefault(); // // e.preventDefault();
// let number = input.value; // // let number = input.value;
// if (number <= 99) { // // if (number <= 99) {
// input.value = Number(number) + 1; // // input.value = Number(number) + 1;
// // }
// // }
// // })
// // 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');
// } // }
// }) // })
// counter // // checkbox
// 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 modalOpen(buttonElement, contentElement) {
// // let modal = document.querySelector('.modal'),
// // aside = document.querySelector('.modal__aside'),
// // elements = document.querySelectorAll(buttonElement),
// // body = document.querySelector('body');
function modalOpen(buttonElement, contentElement) { // // elements.forEach(e => {
let modal = document.querySelector('.modal'), // // let thisContentElement = document.querySelector(contentElement);
aside = document.querySelector('.modal__aside'),
elements = document.querySelectorAll(buttonElement),
body = document.querySelector('body');
elements.forEach(e => { // // e.onclick = function () {
let thisContentElement = document.querySelector(contentElement); // // body.classList.add('overflow-hidden');
// // modal.classList.add('active');
e.onclick = function () { // // thisContentElement.classList.add('active');
body.classList.add('overflow-hidden');
modal.classList.add('active');
thisContentElement.classList.add('active');
// Set width and position based on screen size // // // Set width and position based on screen size
const isMobile = window.matchMedia("(max-width: 768px)").matches; // // const isMobile = window.matchMedia("(max-width: 768px)").matches;
aside.style.width = isMobile ? '80vw' : '20vw'; // // aside.style.width = isMobile ? '80vw' : '20vw';
aside.style.right = '0'; // // aside.style.right = '0';
}; // // };
}); // // });
} // // }
function modalClose(buttonElement) { // // function modalClose(buttonElement) {
let modal = document.querySelector('.modal'), // // let modal = document.querySelector('.modal'),
aside = document.querySelector('.modal__aside'), // // aside = document.querySelector('.modal__aside'),
asideItems = document.querySelectorAll('.modal__item'), // // asideItems = document.querySelectorAll('.modal__item'),
elements = document.querySelectorAll(buttonElement), // // elements = document.querySelectorAll(buttonElement),
body = document.querySelector('body'); // // body = document.querySelector('body');
elements.forEach(e => { // // elements.forEach(e => {
e.onclick = function () { // // e.onclick = function () {
body.classList.remove('overflow-hidden'); // // body.classList.remove('overflow-hidden');
aside.style.width = '0px'; // // aside.style.width = '0px';
asideItems.forEach(e => { // // asideItems.forEach(e => {
if (e.classList.contains('active')) { // // if (e.classList.contains('active')) {
e.style.filter = 'blur(10px)'; // // e.style.filter = 'blur(10px)';
} // // }
}); // // });
setTimeout(() => { // // setTimeout(() => {
asideItems.forEach(e => { // // asideItems.forEach(e => {
if (e.classList.contains('active')) { // // if (e.classList.contains('active')) {
e.classList.remove('active'); // // e.classList.remove('active');
} // // }
}); // // });
modal.classList.remove('active'); // // modal.classList.remove('active');
}, 300); // // }, 300);
} // // }
}) // // })
} // // }
function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) { // function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
let elements = document.querySelectorAll(mainElement); // let elements = document.querySelectorAll(mainElement);
elements.forEach(e => { // elements.forEach(e => {
let thisMainElement = e, // let thisMainElement = e,
thisButtonElement = e.querySelector(buttonElement), // thisButtonElement = e.querySelector(buttonElement),
thisHeightElement = e.querySelector(heightElement), // thisHeightElement = e.querySelector(heightElement),
thisContentElement = e.querySelector(contentElement); // thisContentElement = e.querySelector(contentElement);
thisButtonElement.onclick = function (e) { // thisButtonElement.onclick = function (e) {
let height = thisHeightElement.clientHeight; // let height = thisHeightElement.clientHeight;
if (close == true && !thisMainElement.classList.contains('active')) { // if (close == true && !thisMainElement.classList.contains('active')) {
elements.forEach(e => { // elements.forEach(e => {
if (e.classList.contains('active')) { // if (e.classList.contains('active')) {
e.classList.remove('active'); // e.classList.remove('active');
e.querySelector(contentElement).style.height = null // e.querySelector(contentElement).style.height = null
} // }
}) // })
} // }
if (!thisMainElement.classList.contains('active')) { // if (!thisMainElement.classList.contains('active')) {
thisContentElement.style.height = `${height}px`; // thisContentElement.style.height = `${height}px`;
thisMainElement.classList.add('active'); // thisMainElement.classList.add('active');
}else{ // }else{
thisContentElement.style.height = null; // thisContentElement.style.height = null;
thisMainElement.classList.remove('active'); // thisMainElement.classList.remove('active');
} // }
} // }
}); // });
} // }
function toggleHeader(button, content, blockheight, removeBlock, removeClass) { // function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
let thisButton = document.querySelector(button), // let thisButton = document.querySelector(button),
thisContent = document.querySelector(content), // thisContent = document.querySelector(content),
thisRemoveBlock = document.querySelector(removeBlock) || '', // thisRemoveBlock = document.querySelector(removeBlock) || '',
thisBlockheight = document.querySelector(blockheight); // thisBlockheight = document.querySelector(blockheight);
thisButton.onclick = function () { // thisButton.onclick = function () {
let height = thisBlockheight.clientHeight; // let height = thisBlockheight.clientHeight;
if (!thisContent.classList .contains('open')) { // if (!thisContent.classList .contains('open')) {
thisContent.style.height = `${height}px`; // thisContent.style.height = `${height}px`;
thisContent.classList .add('open'); // thisContent.classList .add('open');
if (removeBlock) { // if (removeBlock) {
thisRemoveBlock.classList.remove(removeClass); // thisRemoveBlock.classList.remove(removeClass);
} // }
}else{ // }else{
thisContent.style.height = null; // thisContent.style.height = null;
thisContent.classList .remove('open'); // thisContent.classList .remove('open');
if (removeBlock) { // if (removeBlock) {
if (window.scrollY <= 25) { // if (window.scrollY <= 25) {
thisRemoveBlock.classList.add(removeClass); // thisRemoveBlock.classList.add(removeClass);
} // }
} // }
} // }
} // }
} // }
// function // // function
// resize // // resize
window.addEventListener('resize', (e) => { // window.addEventListener('resize', (e) => {
let width = window.screen.width; // let width = window.screen.width;
// media // // media
modalOpen('.button--filter', '.modal__filter'); // modalOpen('.button--filter', '.modal__filter');
modalOpen('.basket-open', '.modal__basket'); // modalOpen('.basket-open', '.modal__basket');
modalOpen('.open-to-know', '.modal__to-know'); // modalOpen('.open-to-know', '.modal__to-know');
modalClose('.modal__close'); // modalClose('.modal__close');
let modalItem = document.querySelectorAll('.modal__item'); // let modalItem = document.querySelectorAll('.modal__item');
// if (width <= 720) { // // if (width <= 720) {
modalItem.forEach(modal => { // modalItem.forEach(modal => {
if (modal.classList.contains('active')) { // if (modal.classList.contains('active')) {
let aside = document.querySelector('.modal__aside'); // let aside = document.querySelector('.modal__aside');
if (width <= 720) { // if (width <= 720) {
aside.style.width = `${width}px` // aside.style.width = `${width}px`
}else{ // }else{
let openAside = document.querySelector('.modal__item.active'), // let openAside = document.querySelector('.modal__item.active'),
newWidth = openAside.clientWidth; // newWidth = openAside.clientWidth;
aside.style.width = `${newWidth}px` // aside.style.width = `${newWidth}px`
} // }
} // }
}) // })
// } // // }
}); // });
// resize // // 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

Write Preview
Loading…
Cancel
Save