|
|
|
|
@ -11,13 +11,49 @@ jQuery(document).ready(function ($) { |
|
|
|
|
}) |
|
|
|
|
// END OVERLAY
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('.product__main').on('click', '.counter__button', function(evt) { |
|
|
|
|
evt.preventDefault(); |
|
|
|
|
let product = $(this).closest('.product__item'); |
|
|
|
|
let priceElement = product.find('.select__state'); |
|
|
|
|
let price = parseFloat(priceElement.data('product_price')); |
|
|
|
|
let qty = product.find('.counter__input'); |
|
|
|
|
|
|
|
|
|
// Если цена не найдена, пытаемся взять её из .product-item__price
|
|
|
|
|
if (!price || isNaN(price)) { |
|
|
|
|
let priceText = product.find('.product-item__price p').text(); |
|
|
|
|
price = parseFloat(priceText.replace(/[^0-9\.,]/g, '').replace(',', '.')); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Обновляем количество
|
|
|
|
|
if ($(this).hasClass('minus') && parseInt(qty.val()) >= 2) { |
|
|
|
|
qty.val(parseInt(qty.val()) - 1); |
|
|
|
|
} else if ($(this).hasClass('plus')) { |
|
|
|
|
qty.val(parseInt(qty.val()) + 1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Обновляем атрибут data-quantity для кнопки "Добавить в корзину"
|
|
|
|
|
product.find('.product-item-overlay__button a').attr('data-quantity', qty.val()); |
|
|
|
|
|
|
|
|
|
// Обновляем цену без символа валюты (он добавляется через ::after)
|
|
|
|
|
console.log(price * qty.val()) |
|
|
|
|
product.find('.product-item-overlay__price').html((price * qty.val())); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$('.product__main').on('click', '.state__button', function(evt) { |
|
|
|
|
evt.preventDefault(); |
|
|
|
|
let product = $(this).closest('.product__item'); |
|
|
|
|
let price = $(this).data('product_price'); |
|
|
|
|
let id = $(this).data('product_id'); |
|
|
|
|
let qty = product.find('.counter__input').val(); |
|
|
|
|
product.find('.product-item-overlay__price').html(price * qty + ' '); |
|
|
|
|
console.log('qty', price * qty) |
|
|
|
|
window.t = product.find('.product-item-overlay__price') |
|
|
|
|
console.log(t) |
|
|
|
|
var new_price = price * Number(qty) |
|
|
|
|
product.find('.product-item-overlay__price').html(new_price + ' '); |
|
|
|
|
product.find('.select__state').data('product_price', price).data('product_id', id).val($(this).text().trim()); |
|
|
|
|
product.find('.state__block').removeClass('expanded').css('height', '0'); |
|
|
|
|
|
|
|
|
|
@ -25,34 +61,6 @@ jQuery(document).ready(function ($) { |
|
|
|
|
product.find('.product-item-overlay__button').prepend('<a href="?add-to-cart=' + id + '" class="ajax_add_to_cart add_to_cart_button button button--gradient button--base button--100-perc" data-product_id="'+id+'">Добавить в корзину</a>'); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
$('.product__main').on('click', '.counter__button', function(evt) { |
|
|
|
|
evt.preventDefault(); |
|
|
|
|
let product = $(this).closest('.product__item'); |
|
|
|
|
let priceElement = product.find('.select__state'); |
|
|
|
|
let price = parseFloat(priceElement.data('product_price')); |
|
|
|
|
let qty = product.find('.counter__input'); |
|
|
|
|
|
|
|
|
|
// Если цена не найдена, пытаемся взять её из .product-item__price
|
|
|
|
|
if (!price || isNaN(price)) { |
|
|
|
|
let priceText = product.find('.product-item__price p').text(); |
|
|
|
|
price = parseFloat(priceText.replace(/[^0-9\.,]/g, '').replace(',', '.')); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Обновляем количество
|
|
|
|
|
if ($(this).hasClass('minus') && parseInt(qty.val()) >= 2) { |
|
|
|
|
qty.val(parseInt(qty.val()) - 1); |
|
|
|
|
} else if ($(this).hasClass('plus')) { |
|
|
|
|
qty.val(parseInt(qty.val()) + 1); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// Обновляем атрибут data-quantity для кнопки "Добавить в корзину"
|
|
|
|
|
product.find('.product-item-overlay__button a').attr('data-quantity', qty.val()); |
|
|
|
|
|
|
|
|
|
// Обновляем цену без символа валюты (он добавляется через ::after)
|
|
|
|
|
console.log(price * qty.val()) |
|
|
|
|
product.find('.product-item-overlay__price').html((price * qty.val())); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('.product__main').on('click', '.select__state', function(evt) { |
|
|
|
|
evt.preventDefault(); |
|
|
|
|
let product = $(this).closest('.product__item'), |
|
|
|
|
@ -128,348 +136,3 @@ $('.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');
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// let products = document.querySelectorAll('.product__item');
|
|
|
|
|
|
|
|
|
|
// products.forEach(productItem => {
|
|
|
|
|
// let button = productItem.querySelector('.open-overlay'),
|
|
|
|
|
// overlay = productItem.querySelector('.product-item__overlay');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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');
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// productItem.classList.toggle('active');
|
|
|
|
|
// overlay.classList.toggle('active');
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // select
|
|
|
|
|
// // toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
|
|
|
|
|
|
|
|
|
|
// // let selects = document.querySelectorAll('.select');
|
|
|
|
|
|
|
|
|
|
// // 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');
|
|
|
|
|
// // }
|
|
|
|
|
// // })
|
|
|
|
|
|
|
|
|
|
// // let text = e.textContent.trim();
|
|
|
|
|
// // state.value = text;
|
|
|
|
|
|
|
|
|
|
// // button.classList.add('active');
|
|
|
|
|
// // content.style.height = 0;
|
|
|
|
|
// // select.classList.remove('active');
|
|
|
|
|
// // }
|
|
|
|
|
// // })
|
|
|
|
|
// // })
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // select
|
|
|
|
|
|
|
|
|
|
// // counter
|
|
|
|
|
// // let counters = document.querySelectorAll('.counter');
|
|
|
|
|
|
|
|
|
|
// // counters.forEach(e => {
|
|
|
|
|
// // let minus = e.querySelector('.minus'),
|
|
|
|
|
// // plus = e.querySelector('.plus'),
|
|
|
|
|
// // input = e.querySelector('.counter__input');
|
|
|
|
|
|
|
|
|
|
// // minus.onclick = function (e) {
|
|
|
|
|
// // e.preventDefault();
|
|
|
|
|
|
|
|
|
|
// // let number = input.value;
|
|
|
|
|
|
|
|
|
|
// // 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;
|
|
|
|
|
// // }
|
|
|
|
|
// // }
|
|
|
|
|
// // })
|
|
|
|
|
// // 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 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');
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// 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');
|
|
|
|
|
|
|
|
|
|
// // 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
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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')
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
// // scroll
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
