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. 570
      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

@ -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';
}
});

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

@ -4551,7 +4551,6 @@ color: #f4f1f0;
.modal__aside {
position: fixed;
right: -400px;
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() {
// Initialize Swiper

570
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');
// buttons.forEach(button => {
// let input = radioBlock.querySelector('.radio-button__input');
// 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);
}
}
// button.onclick = function (e) {
// e.preventDefault();
// modal
// buttons.forEach(thisButton => {
// if (thisButton.classList.contains('active')) {
// thisButton.classList.remove('active')
// }
// })
// toggle
toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
// toggle
// let text = button.textContent.trim();
// radio-button
let radioButtons = document.querySelectorAll('.radio-button');
// button.classList.toggle('active');
radioButtons.forEach(radioBlock => {
let buttons = radioBlock.querySelectorAll('.button');
// input.value = text;
// }
// })
// })
// // radio-button
buttons.forEach(button => {
let input = radioBlock.querySelector('.radio-button__input');
button.onclick = function (e) {
e.preventDefault();
// let products = document.querySelectorAll('.product__item');
buttons.forEach(thisButton => {
if (thisButton.classList.contains('active')) {
thisButton.classList.remove('active')
}
})
// products.forEach(productItem => {
// let button = productItem.querySelector('.open-overlay'),
// 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;
}
})
})
// radio-button
// productItem.classList.toggle('active');
// overlay.classList.toggle('active');
// }
// }
// })
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) {
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');
}
});
// // let selects = document.querySelectorAll('.select');
productItem.classList.toggle('active');
overlay.classList.toggle('active');
}
}
// // selects.forEach(select => {
// // 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
// toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
// // let text = e.textContent.trim();
// // 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 => {
// let button = e;
// // select
// e.onclick = function (event) {
// event.preventDefault();
// // counter
// // let counters = document.querySelectorAll('.counter');
// buttons.forEach(element => {
// if (element.classList.contains('active')) {
// element.classList.remove('active');
// }
// })
// // counters.forEach(e => {
// // let minus = e.querySelector('.minus'),
// // plus = e.querySelector('.plus'),
// // input = e.querySelector('.counter__input');
// let text = e.textContent.trim();
// state.value = text;
// // minus.onclick = function (e) {
// // e.preventDefault();
// button.classList.add('active');
// content.style.height = 0;
// select.classList.remove('active');
// }
// })
// })
// // let number = input.value;
// // if (number >= 2){
// // input.value = Number(number) - 1;
// // }
// // }
// select
// // plus.onclick = function (e) {
// // e.preventDefault();
// counter
// let counters = document.querySelectorAll('.counter');
// // let number = input.value;
// counters.forEach(e => {
// let minus = e.querySelector('.minus'),
// plus = e.querySelector('.plus'),
// input = e.querySelector('.counter__input');
// // if (number <= 99) {
// // input.value = Number(number) + 1;
// // }
// // }
// // })
// // counter
// minus.onclick = function (e) {
// e.preventDefault();
// // checkbox
// 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){
// input.value = Number(number) - 1;
// }
// }
// plus.onclick = function (e) {
// e.preventDefault();
// let number = input.value;
// if (number <= 99) {
// input.value = Number(number) + 1;
// if (!e.classList.contains('active')) {
// input.checked = 1;
// }else{
// input.checked = 0;
// }
// 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 => {
e.onclick = function (event) {
let input = e.querySelector('.checkbox__input');
// function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
// let thisButton = document.querySelector(button),
// thisContent = document.querySelector(content),
// thisRemoveBlock = document.querySelector(removeBlock) || '',
// thisBlockheight = document.querySelector(blockheight);
if (!e.classList.contains('active')) {
input.checked = 1;
}else{
input.checked = 0;
}
e.classList.toggle('active');
}
})
// checkbox
// thisButton.onclick = function () {
// let height = thisBlockheight.clientHeight;
// if (!thisContent.classList .contains('open')) {
// thisContent.style.height = `${height}px`;
// thisContent.classList .add('open');
function modalOpen(buttonElement, contentElement) {
let modal = document.querySelector('.modal'),
aside = document.querySelector('.modal__aside'),
elements = document.querySelectorAll(buttonElement),
body = document.querySelector('body');
// if (removeBlock) {
// thisRemoveBlock.classList.remove(removeClass);
// }
// }else{
// thisContent.style.height = null;
// thisContent.classList .remove('open');
elements.forEach(e => {
let thisContentElement = document.querySelector(contentElement);
// if (removeBlock) {
// if (window.scrollY <= 25) {
// thisRemoveBlock.classList.add(removeClass);
// }
// }
// }
// }
// }
// // function
e.onclick = function () {
body.classList.add('overflow-hidden');
modal.classList.add('active');
thisContentElement.classList.add('active');
// // resize
// window.addEventListener('resize', (e) => {
// let width = window.screen.width;
// 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
}
})
}
// // media
// modalOpen('.button--filter', '.modal__filter');
// modalOpen('.basket-open', '.modal__basket');
// modalOpen('.open-to-know', '.modal__to-know');
// modalClose('.modal__close');
if (!thisMainElement.classList.contains('active')) {
thisContentElement.style.height = `${height}px`;
thisMainElement.classList.add('active');
}else{
thisContentElement.style.height = null;
thisMainElement.classList.remove('active');
}
}
// let modalItem = document.querySelectorAll('.modal__item');
});
}
function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
let thisButton = document.querySelector(button),
thisContent = document.querySelector(content),
thisRemoveBlock = document.querySelector(removeBlock) || '',
thisBlockheight = document.querySelector(blockheight);
// // if (width <= 720) {
// modalItem.forEach(modal => {
// if (modal.classList.contains('active')) {
// let aside = document.querySelector('.modal__aside');
thisButton.onclick = function () {
let height = thisBlockheight.clientHeight;
// if (width <= 720) {
// aside.style.width = `${width}px`
// }else{
// let openAside = document.querySelector('.modal__item.active'),
// newWidth = openAside.clientWidth;
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');
// 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
// aside.style.width = `${newWidth}px`
// }
// }
// })
// // }
// });
// // resize
// scroll
// // scroll
if (document.querySelector('.header').classList.contains('white')) {
window.addEventListener("scroll", function (e) {
let header = document.querySelector('.header');
let scroll = window.scrollY;
// if (document.querySelector('.header').classList.contains('white')) {
// window.addEventListener("scroll", function (e) {
// let header = document.querySelector('.header');
// let scroll = window.scrollY;
if (scroll >= 25) {
header.classList.remove('white')
}else{
header.classList.add('white')
}
// if (scroll >= 25) {
// header.classList.remove('white')
// }else{
// header.classList.add('white')
// }
});
}
// scroll
// });
// }
// // scroll

Write Preview
Loading…
Cancel
Save