From 0f44aab8f9243d5f4594d61fcddbb95573114f0a Mon Sep 17 00:00:00 2001 From: Andrei-10 Date: Sat, 17 May 2025 06:19:46 +0000 Subject: [PATCH] Fix | js and layout bugs fix Co-authored-by: Your Name Reviewed-on: https://git.good-production.xyz/Good-Production/cosmopet-architecture/pulls/15 --- wp-content/themes/cosmopet/functions.php | 13 + .../modules/header/module-controller.php | 6 +- .../layout/assets/img/svg/main/filter.svg | 3 + .../modules/layout/assets/js/gp-main.js | 69 +++-- .../shop/components/cart/assets/js/cart.js | 21 ++ .../assets/css/gp-style-core.css | 73 ----- .../assets/css/gp-style-desktop.css | 50 ++- .../single-product/assets/js/gp-form.js | 286 ++++++++++++++++++ .../single-product/assets/js/gp-function.js | 156 ++++++++++ .../single-product/assets/js/gp-main.js | 88 +++--- .../assets/js/single-product.js | 129 -------- .../single-product/assets/js/tabs.js | 1 - .../single-product/assets/js/toggle.js | 1 - .../single-product/component-template.twig | 13 +- .../archive-product-tease.twig | 7 +- .../assets/css/gp-style-desktop.css | 4 +- .../cosmopet/woocommerce/assets/js/gp-main.js | 55 ++-- 17 files changed, 674 insertions(+), 301 deletions(-) create mode 100644 wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/filter.svg create mode 100644 wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-form.js create mode 100644 wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js delete mode 100644 wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/single-product.js diff --git a/wp-content/themes/cosmopet/functions.php b/wp-content/themes/cosmopet/functions.php index 4b71c88..ced12ab 100644 --- a/wp-content/themes/cosmopet/functions.php +++ b/wp-content/themes/cosmopet/functions.php @@ -957,3 +957,16 @@ function remove_view_cart_button_js() { '; + } + return $tag; +}, 10, 3 ); + + \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/header/module-controller.php b/wp-content/themes/cosmopet/modules/header/module-controller.php index ca66363..b34b565 100644 --- a/wp-content/themes/cosmopet/modules/header/module-controller.php +++ b/wp-content/themes/cosmopet/modules/header/module-controller.php @@ -41,7 +41,11 @@ add_filter('timber/context', function($context) { if ($about_page) { $context['about_url'] = '/o-kompanii/'; $context['about_url_en'] = '/en/about-us/'; - } else { + } + else if (SITE_DOMAIN == 'AE'){ + $context['about_url_en'] = '/en/about-us/'; + } + else { $context['about_url'] = 'https://cosmopet.shop/chto-takoe-entoprotein/'; $context['about_url_en'] = 'https://cosmopet.shop/en/about-2/'; } diff --git a/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/filter.svg b/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/filter.svg new file mode 100644 index 0000000..efa46c8 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/layout/assets/img/svg/main/filter.svg @@ -0,0 +1,3 @@ + + + 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 a46047a..9ab3958 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 @@ -156,35 +156,68 @@ toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-con // toggle // radio-button -let radioButtons = document.querySelectorAll('.radio-button'); +// let radioButtons = document.querySelectorAll('.radio-button'); -radioButtons.forEach(radioBlock => { - let buttons = radioBlock.querySelectorAll('.button'); +// radioButtons.forEach(radioBlock => { +// let buttons = radioBlock.querySelectorAll('.button'); - buttons.forEach(button => { - let input = radioBlock.querySelector('.radio-button__input'); +// buttons.forEach(button => { +// let input = radioBlock.querySelector('.radio-button__input'); - button.onclick = function (e) { - e.preventDefault(); +// button.onclick = function (e) { +// e.preventDefault(); - buttons.forEach(thisButton => { - if (thisButton.classList.contains('active')) { - thisButton.classList.remove('active') - } - }) +// buttons.forEach(thisButton => { +// if (thisButton.classList.contains('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 + +// overlay +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) { + console.log('Открытие overlay для товара', productItem); + 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'); + console.log('overlay toggled', overlay.classList.contains('active')); + } + } + +}) +// overlay + + // checkbox let checkbox = document.querySelectorAll('.checkbox'); diff --git a/wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js b/wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js index 4d94394..8d6f7c1 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js +++ b/wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js @@ -278,6 +278,27 @@ jQuery(document).ready(function($) { } }); } + + $('body').on('click', '.add_to_cart_button', function() { + var btn = $(this); + if (!btn.hasClass('loading')) { + btn.addClass('loading'); + btn.data('original-text', btn.html()); + btn.css('position', 'relative'); + btn.html(''); + } + }); + + // Убираем спиннер после завершения ajax WooCommerce + $(document.body).on('added_to_cart', function(e, fragments, cart_hash, $button) { + if ($button && $button.length) { + $button.removeClass('loading'); + if ($button.data('original-text')) { + $button.html($button.data('original-text')); + $button.removeData('original-text'); + } + } + }); }); diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css index 992adcc..ad3fb04 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-core.css @@ -17,79 +17,6 @@ a{ cursor: pointer; } -/* Craftwork Grotesk */ -@font-face { - font-family: "Craftwork Grotesk"; - src: local("Craftwork Grotesk Bold"), - url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), - url("../fonts/craftwork/CraftworkGrotesk-Bold.woff") format("woff"), - url("../fonts/craftwork/craftwork-grotesk-bold.ttf") format("ttf"); - font-weight: 700; -} -@font-face { - font-family: "Craftwork Grotesk"; - src: local("Craftwork Grotesk SemiBold"), - url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff2") format("woff2"), - url("../fonts/craftwork/CraftworkGrotesk-SemiBold.woff") format("woff"), - url("../fonts/craftwork/craftwork-grotesk-semi-bold.ttf") format("ttf"); - font-weight: 600; -} -@font-face { - font-family: "Craftwork Grotesk"; - src: local("Craftwork Grotesk Medium"), - url("../fonts/craftwork/CraftworkGrotesk-Medium.woff2") format("woff2"), - url("../fonts/craftwork/CraftworkGrotesk-Medium.woff") format("woff"), - url("../fonts/craftwork/craftwork-grotesk-medium.ttf") format("ttf"); - font-weight: 500; -} -@font-face { - font-family: "Craftwork Grotesk"; - src: local("Craftwork Grotesk Regular"), - url("../fonts/craftwork/CraftworkGrotesk-Regular.woff2") format("woff2"), - url("../fonts/craftwork/CraftworkGrotesk-Regular.woff") format("woff"), - url("../fonts/craftwork/craftwork-grotesk-regular.ttf") format("ttf"); - font-weight: 400; -} -/* Craftwork Grotesk */ - -/* din 2014 */ -@font-face { - font-family: "DIN 2014 Rounded"; - src: local("DIN 2014 Rounded Demi"), - url("../fonts/din-2014/din-2014-rounded-demi.woff2") format("woff2"), - url("../fonts/din-2014/din-2014-rounded-demi.woff") format("woff"), - url("../fonts/din-2014/din-2014-rounded-demi.ttf") format("ttf"); - font-weight: 600; -} -@font-face { - font-family: "DIN 2014 Rounded"; - src: local("DIN 2014 Rounded Regular"), - url("../fonts/din-2014/din-2014-rounded-regular.woff2") format("woff2"), - url("../fonts/din-2014/din-2014-rounded-regular.woff") format("woff"), - url("../fonts/din-2014/din-2014-rounded-regular.ttf") format("ttf"); - font-weight: 400; -} -/* din 2014 */ - -/* roboto */ -@font-face { - font-family: "Roboto"; - src: local("Roboto Medium"), - url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), - url("../fonts/roboto/Roboto-Medium.woff") format("woff"), - url("../fonts/roboto/roboto-medium.ttf") format("ttf"); - font-weight: 500; -} -@font-face { - font-family: "Roboto"; - src: local("Roboto Regular"), - url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), - url("../fonts/roboto/Roboto-Regular.woff") format("woff"), - url("../fonts/roboto/roboto-medium.ttf") format("ttf"); - font-weight: 400; -} -/* roboto */ - /* Глобальные переменные: */ :root { diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css index 8ac9011..7251dda 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-desktop.css @@ -15,6 +15,20 @@ } /* header end */ + +.product__item.active::before{ + opacity: 0; +} + +.product-item__overlay.active{ + top: 0; +} + +.gallery.active{ + opacity: 1; + pointer-events: auto; +} + /* product */ .product__item{ margin: 12px; @@ -144,10 +158,34 @@ text-transform: uppercase; color: var(--text-black); } - .product-item__price p::after{ + + .detail__image--width-perc-100{ + width: calc(100% - 24px); + height: 600px; + + } + .detail__image--width-perc-50{ + width: calc(50% - 24px); + height: 288px; + } + .detail__image--width-perc-100 img{ + width: 90%; + height: 90%; + + object-fit: contain; + } + .detail__image--width-perc-50 img{ + width: 100%; + height: 100%; + + object-fit: contain; + } + + + /* .product-item__price p::after{ content: '₽'; padding-left: 5px; - } + } */ .product-item__bye{ margin-top: 8px; } @@ -333,9 +371,9 @@ line-height: 111%; text-transform: uppercase; } -.detail-block-price__price::after{ +/* .detail-block-price__price::after{ content: '₽'; -} +} */ .detail-block-price__sale{ margin-left: 22px; @@ -351,9 +389,9 @@ text-decoration: line-through; color: var(--text-6); } -.detail-block-price-sale__text::after{ +/* .detail-block-price-sale__text::after{ content: '₽'; -} +} */ .detail-block-price-sale__perc{ margin-left: 9px; diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-form.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-form.js new file mode 100644 index 0000000..a014802 --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-form.js @@ -0,0 +1,286 @@ +'use strict'; + + +inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search'); + +function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) { + let inputs = document.querySelectorAll(main); + + inputs.forEach(e => { + let thisMainFlag = e.querySelector(mainFlag), + thisMainCode = e.querySelector(mainCode), + thisInput = e.querySelector(input), + thisList = e.querySelector(list), + thisSelects = e.querySelectorAll(`.${selects}`), + thisSearchInput = e.querySelector(`.${searchInput}`); + + thisInput.onblur = function (input) { + if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) { + thisList.classList.remove('active'); + } + } + + e.onclick = function (event) { + if (!event.target.classList.contains(searchInput)) { + if (thisList.classList.contains('active')) { + thisList.classList.remove('active'); + } + + thisInput.focus(); + thisList.classList.add('active'); + } + } + + thisSelects.forEach(e => { + let newIcon = e.querySelector(selectIcon), + newCode = e.querySelector(selectCode); + + e.onclick = function (event) { + event.preventDefault(); + thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`; + thisMainCode.textContent = newCode.textContent; + + + setTimeout(() => { + thisList.classList.remove('active'); + }, 0); + } + + }) + }) +} + +if (document.querySelector('.form-input-phone__input')) { + checkPhone('.form-input-phone__input'); +} + +function checkPhone(input) { + document.querySelector(input).addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (!(/^\d+$/.test(text.replaceAll(' ', '')))) { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 4 || length == 8) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + }) +} + +inputTabs('.form-input__tabs', '.form-input-tabs__button'); +inputTabs('.modal-map__control', '.modal-map-control__item'); + +function inputTabs(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let buttons = main.querySelectorAll(button); + + buttons.forEach(button => { + button.onclick = function () { + if (button.classList.contains('active')) { + return ; + } + + main.querySelector('.active').classList.remove('active'); + + button.classList.add('active'); + + if (button.querySelector('input')){ + button.querySelector('input').click(); + } + } + }) + + }) +} + + +inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input') + +function inputRadio(main ,item, textClass, input) { + let inputRadios = document.querySelectorAll(main); + + inputRadios.forEach(inputRadio => { + let items = inputRadio.querySelectorAll(item), + thisInput = inputRadio.querySelector(input); + + items.forEach(radio => { + let thisText = radio.querySelector(textClass).textContent; + + radio.onclick = function (event) { + event.preventDefault(); + + if (inputRadio.querySelector(`${item}.active`)) { + inputRadio.querySelector(`${item}.active`).classList.remove('active'); + } + thisInput.value = thisText; + radio.classList.add('active'); + } + }) + }) +} + +listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content'); + +function listInputRadio(main ,item, textClass, input, content, block) { + let listInputRadios = document.querySelectorAll(main); + + listInputRadios.forEach(listInputRadio => { + let thisInput = listInputRadio.querySelector(input), + items = listInputRadio.querySelectorAll(item), + thisContent = listInputRadio.querySelector(content), + thisBlock = listInputRadio.querySelector(block); + + thisInput.onclick = function () { + thisBlock.classList.add('active'); + thisBlock.style.height = '192px'; + } + + + thisInput.onblur = function(){ + thisBlock.classList.remove('active'); + thisBlock.style.height = '0px'; + }; + + items.forEach(item => { + item.onclick = function (event) { + event.preventDefault(); + let newText = item.querySelector(textClass).textContent; + + thisInput.value = newText; + + if (thisContent.querySelector('.active')) { + thisContent.querySelector('.active').classList.remove('active'); + } + + item.classList.add('active'); + } + }) + }) +} + +remoteControl('.form-input__remote-control', '.form-input-tabs__button'); +remoteControl('.modal-map__control', '.modal-map-control__item'); + +function remoteControl(main, button) { + let mains = document.querySelectorAll(main); + + mains.forEach(main => { + let subjectClass = main.dataset.content, + subject = document.querySelector(`.${subjectClass}`), + buttons = Array.from(main.querySelectorAll(button)); + + main.addEventListener('click', function (eventMain) { + setTimeout(() => { + let indexActive = buttons.findIndex((button, index) => { + if (button.classList.contains('active')) { + return true; + } + }); + if(subject.children[indexActive].classList.contains('active')){ + return ; + } + + subject.querySelector('.remote-control__item.active').classList.remove('active'); + subject.children[indexActive].classList.add('active'); + + let mandatorys = subject.querySelectorAll('.mandatory'); + + mandatorys.forEach(mandatory => { + if (mandatory.required) { + mandatory.required = false; + }else{ + mandatory.required = true; + } + }) + }, 0); + }) + }) +} + +formCheck('.modal-form__content', 'input[type=submit]'); +formCheck('.modal-map__form', 'input[type=submit]'); + +function formCheck(form, submit) { + let forms = document.querySelectorAll(form); + + forms.forEach(form => { + let thisSubmit = form.querySelector(submit); + + thisSubmit.onclick = function () { + form.classList.add('check') + } + + }) +} + +inputPhoneNoFlag('.no-flag'); + +function inputPhoneNoFlag(input){ + let inputs = document.querySelectorAll(input); + + inputs.forEach(input => { + let code = '+' + input.dataset.code; + + input.onfocus = function () { + if (input.value == '') { + input.value = code; + } + } + + input.addEventListener('input', function(event) { + let text = event.target.value; + let length = text.length; + let newSymbol = event.data; + + if (isNaN(event.data) || event.data == ' ') { + event.target.value = text.slice(0, -1); + return; + } + + if (length == 3 || length == 7 || length == 11) { + if (newSymbol != null) { + event.target.value = text.slice(0, -1) + ' ' + newSymbol; + } + } + + }) + }) +} + + +inputCheck('.form-agreement__check'); + +function inputCheck(className) { + let checks = document.querySelectorAll(className); + + checks.forEach(check => { + let square = check.querySelector('.form-agreement__square'), + input = check.querySelector('input'); + + square.onclick = function () { + input.click(); + } + }) +} + + +inputRead('.input-read'); +function inputRead(className) { + let inputs = document.querySelectorAll(className); + + inputs.forEach(input => { + input.addEventListener("input", function (event) { + let text = event.target.value; + + event.target.value = text.slice(0, -1); + }) + }) +} \ 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 new file mode 100644 index 0000000..975bcdd --- /dev/null +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js @@ -0,0 +1,156 @@ +'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 a1bc687..d046b87 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 @@ -1,5 +1,6 @@ 'use strict'; +console.log('gp-main.js загружен'); // header toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false); toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white'); @@ -12,20 +13,21 @@ modalOpen('.basket-open', '.modal__basket'); modalOpen('.open-to-know', '.modal__to-know'); modalClose('.modal__close'); -let modal = document.querySelector('.modal'); +let modalElement = document.querySelector('.modal'); -modal.onclick = function (event) { +modalElement.onclick = function (event) { let target = event.target; - + console.log('Клик по modalElement', target); if (target.classList.contains('modal')) { let aside = target.querySelector('.modal__aside'), modalItem = target.querySelector('.modal__item.active'); - + console.log('Закрытие модального окна'); aside.style.width = '0px'; setTimeout(() => { modalItem.style.cssText = ''; modalItem.classList.remove('active'); target.classList.remove('active'); + console.log('Модальное окно закрыто'); }, 300); } } @@ -36,33 +38,34 @@ modal.onclick = function (event) { toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true); // toggle -// // radio-button -// let radioButtons = document.querySelectorAll('.radio-button'); +// radio-button +let radioButtons = document.querySelectorAll('.radio-button'); -// radioButtons.forEach(radioBlock => { -// let buttons = radioBlock.querySelectorAll('.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(button => { + let input = radioBlock.querySelector('.radio-button__input'); -// buttons.forEach(thisButton => { -// if (thisButton.classList.contains('active')) { -// thisButton.classList.remove('active') -// } -// }) + button.onclick = function (e) { + e.preventDefault(); + console.log('Клик по radio-button', button.textContent.trim()); + buttons.forEach(thisButton => { + if (thisButton.classList.contains('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; -// } -// }) -// }) -// // radio-button + input.value = text; + console.log('radio-button value:', input.value); + } + }) +}) +// radio-button // overlay let products = document.querySelectorAll('.product__item'); @@ -74,6 +77,7 @@ products.forEach(productItem => { if (button) { button.onclick = function (e) { + console.log('Открытие overlay для товара', productItem); document.querySelectorAll('.product__item').forEach(e => { if (e.classList.contains('active')) { e.classList.remove('active'); @@ -86,7 +90,8 @@ products.forEach(productItem => { }); productItem.classList.toggle('active'); - overlay.classList.toggle('active'); + overlay.classList.toggle('active'); + console.log('overlay toggled', overlay.classList.contains('active')); } } @@ -109,7 +114,7 @@ selects.forEach(select => { e.onclick = function (event) { event.preventDefault(); - + console.log('Клик по select', button.textContent.trim()); buttons.forEach(element => { if (element.classList.contains('active')) { element.classList.remove('active'); @@ -122,6 +127,7 @@ selects.forEach(select => { button.classList.add('active'); content.style.height = 0; select.classList.remove('active'); + console.log('select value:', state.value); } }) }) @@ -137,21 +143,21 @@ counters.forEach(e => { minus.onclick = function (e) { e.preventDefault(); - let number = input.value; - + console.log('Клик по минусу', number); if (number >= 2){ input.value = Number(number) - 1; + console.log('Новое значение counter:', input.value); } } plus.onclick = function (e) { e.preventDefault(); - let number = input.value; - + console.log('Клик по плюсу', number); if (number <= 99) { input.value = Number(number) + 1; + console.log('Новое значение counter:', input.value); } } }) @@ -163,13 +169,14 @@ let checkbox = document.querySelectorAll('.checkbox'); checkbox.forEach(e => { e.onclick = function (event) { let input = e.querySelector('.checkbox__input'); - + console.log('Клик по checkbox', input.checked); if (!e.classList.contains('active')) { input.checked = 1; }else{ input.checked = 0; } e.classList.toggle('active'); + console.log('checkbox теперь', input.checked); } }) // checkbox @@ -186,6 +193,7 @@ function modalOpen(buttonElement, contentElement){ let thisContentElement = document.querySelector(contentElement); e.onclick = function () { + console.log('Открытие модального окна', contentElement); modal.classList.add('active'); thisContentElement.classList.add('active'); @@ -201,6 +209,7 @@ function modalOpen(buttonElement, contentElement){ thisContentElement.style.opacity = 1; thisContentElement.style.filter = 'blur(0px)'; } + console.log('Модальное окно открыто', contentElement); }, 10); } }) @@ -213,7 +222,8 @@ function modalClose(buttonElement) { elements = document.querySelectorAll(buttonElement); elements.forEach(e => { - e.onclick = function () { + e.onclick = function () { + console.log('Закрытие модального окна через кнопку', buttonElement); aside.style.width = '0px'; asideItems.forEach(e => { @@ -230,6 +240,7 @@ function modalClose(buttonElement) { }); modal.classList.remove('active'); + console.log('Модальное окно закрыто через кнопку', buttonElement); }, 300); } }) @@ -246,7 +257,7 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, thisButtonElement.onclick = function (e) { let height = thisHeightElement.clientHeight; - + console.log('toggleOpenX', mainElement, 'active:', thisMainElement.classList.contains('active')); if (close == true && !thisMainElement.classList.contains('active')) { elements.forEach(e => { if (e.classList.contains('active')) { @@ -259,9 +270,11 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, if (!thisMainElement.classList.contains('active')) { thisContentElement.style.height = `${height}px`; thisMainElement.classList.add('active'); + console.log('toggleOpenX открыт', mainElement); }else{ thisContentElement.style.height = null; thisMainElement.classList.remove('active'); + console.log('toggleOpenX закрыт', mainElement); } } @@ -276,7 +289,7 @@ function toggleHeader(button, content, blockheight, removeBlock, removeClass) { thisButton.onclick = function () { let height = thisBlockheight.clientHeight; - + console.log('toggleHeader', button, 'active:', thisContent.classList.contains('open')); if (!thisContent.classList .contains('open')) { thisContent.style.height = `${height}px`; thisContent.classList .add('open'); @@ -301,7 +314,7 @@ function toggleHeader(button, content, blockheight, removeBlock, removeClass) { // resize window.addEventListener('resize', (e) => { let width = window.screen.width; - + console.log('resize', width); // media modalOpen('.button--filter', '.modal__filter'); modalOpen('.basket-open', '.modal__basket'); @@ -323,6 +336,7 @@ window.addEventListener('resize', (e) => { aside.style.width = `${newWidth}px` } + console.log('resize modal aside', aside.style.width); } }) // } @@ -336,7 +350,7 @@ if (document.querySelector('.header').classList.contains('white')) { window.addEventListener("scroll", function (e) { let header = document.querySelector('.header'); let scroll = window.scrollY; - + console.log('scroll', scroll); if (scroll >= 25) { header.classList.remove('white') }else{ diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/single-product.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/single-product.js deleted file mode 100644 index 4e04391..0000000 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/single-product.js +++ /dev/null @@ -1,129 +0,0 @@ -jQuery(document).ready(function($) { - // Инициализация слайдера для мобильной галереи - const mobileGallerySwiper = new Swiper('.detail__images-phone', { - slidesPerView: 1, - spaceBetween: 10, - pagination: { - el: '.swiper-pagination', - clickable: true - } - }); - - // Инициализация слайдера для полноэкранной галереи - const gallerySwiper = new Swiper('.gallery__slider', { - slidesPerView: 1, - spaceBetween: 10, - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - }, - pagination: { - el: '.swiper-pagination', - clickable: true - } - }); - - // Инициализация слайдера для рекомендованных товаров - const recommendedSwiper = new Swiper('.detail__catalot .detail-catalot__content', { - slidesPerView: 1, - spaceBetween: 20, - navigation: { - nextEl: '.detail-catalot__control .next', - prevEl: '.detail-catalot__control .prev', - }, - breakpoints: { - 768: { - slidesPerView: 2, - }, - 1024: { - slidesPerView: 3, - }, - 1280: { - slidesPerView: 4, - } - } - }); - - // Обработка переключения веса продукта - $('.detail-block-form__item--radio button').on('click', function(e) { - e.preventDefault(); - const variationId = $(this).data('variation-id'); - - // Убираем активный класс у всех кнопок - $('.detail-block-form__item--radio button').removeClass('active'); - // Добавляем активный класс текущей кнопке - $(this).addClass('active'); - - // Отправляем AJAX запрос для получения данных вариации - $.ajax({ - url: '/wp-admin/admin-ajax.php', - type: 'POST', - data: { - action: 'get_variation_data', - variation_id: variationId - }, - success: function(response) { - if (response.success) { - // Обновляем цену - $('.detail-block-price__price').text(response.data.price); - - // Обновляем скидку если есть - if (response.data.regular_price !== response.data.price) { - $('.detail-block-price__sale').html(` -

${response.data.regular_price}

-

${response.data.discount_percentage}

- `); - } else { - $('.detail-block-price__sale').empty(); - } - } - } - }); - }); - - // Обработка открытия/закрытия аккордеона - $('.toggle__title').on('click', function() { - const content = $(this).next('.toggle__block-content'); - const isOpen = content.is(':visible'); - - // Закрываем все открытые блоки - $('.toggle__block-content').slideUp(); - - // Если текущий блок был закрыт, открываем его - if (!isOpen) { - content.slideDown(); - } - }); - - // Обработка открытия галереи - $('.detail__image').on('click', function() { - const imageIndex = $(this).data('count-img'); - - // Открываем галерею - $('.gallery').addClass('active'); - - // Устанавливаем активный слайд - gallerySwiper.slideTo(imageIndex); - - // Добавляем активный класс соответствующей миниатюре - $('.gallery-pagination__item').removeClass('active'); - $(`.gallery-pagination__item[data-count-img="${imageIndex}"]`).addClass('active'); - }); - - // Обработка закрытия галереи - $('.gallery__close').on('click', function() { - $('.gallery').removeClass('active'); - }); - - // Обработка клика по миниатюрам в галерее - $('.gallery-pagination__item').on('click', function() { - const imageIndex = $(this).data('count-img'); - - // Переключаем слайд - gallerySwiper.slideTo(imageIndex); - - // Обновляем активную миниатюру - $('.gallery-pagination__item').removeClass('active'); - $(this).addClass('active'); - }); -}); \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/tabs.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/tabs.js index 10c8130..431b952 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/tabs.js +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/tabs.js @@ -64,4 +64,3 @@ class TabsCollection { } } -export default TabsCollection; \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/toggle.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/toggle.js index bb162e9..d1a76ad 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/toggle.js +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/toggle.js @@ -86,4 +86,3 @@ class TogglesCollection{ } } -export default TogglesCollection; \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig index 7fd37a6..591f39a 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig @@ -75,16 +75,16 @@

- {{ product.get_price }} + {{ product.get_price }} {{ fn('get_woocommerce_currency_symbol') }}

{% if product.is_on_sale() %}

- {{ product.get_regular_price }} + {{ product.get_regular_price }} {{ fn('get_woocommerce_currency_symbol') }}

- {{ ((product.get_regular_price - product.get_price) / product.get_regular_price * 100)|round }} + {{ ((product.get_regular_price - product.get_price) / product.get_regular_price * 100)|round }} {{ fn('get_woocommerce_currency_symbol') }}

{% endif %} @@ -111,8 +111,9 @@
- -
+ + {{ function('pll_e', 'Добавить в корзину') }} +
@@ -312,7 +313,7 @@
{{ wc_product.get_name() }}
-

{{ wc_product.get_price() }}

+

{{ wc_product.get_price() }} {{ fn('get_woocommerce_currency_symbol') }}

- {{ post.title }} + {{ post.title }}
-

{{ post._price() }}

+

{{ post._price() }} {{ fn('get_woocommerce_currency_symbol') }}

- {{ post.title }} + {{ post.title }} +
    {% set features = fn('wc_get_product_terms', post.id, 'pa_features') %} {% for option in features %} diff --git a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css index 28ab323..5939fdd 100644 --- a/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css +++ b/wp-content/themes/cosmopet/woocommerce/assets/css/gp-style-desktop.css @@ -547,10 +547,10 @@ main{ text-transform: uppercase; color: var(--text-black); } - .product-item__price p::after{ + /* .product-item__price p::after{ content: '₽'; padding-left: 5px; - } + } */ .product-item__price span{ margin-left: 9px; font-family: var(--font-family); diff --git a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js index 477626e..e011909 100644 --- a/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js +++ b/wp-content/themes/cosmopet/woocommerce/assets/js/gp-main.js @@ -29,6 +29,10 @@ jQuery(document).ready(function ($) { evt.preventDefault(); let product = $(this).closest('.product__item'); let price = parseFloat(product.find('.select__state').data('product_price')); + if (!price || isNaN(price)) { + let priceText = product.find('.product-item__price p').text(); + price = parseFloat(priceText.replace(/[^0-9\.,]/g, '').replace(',', '.')); + } let qty = product.find('.counter__input'); if ($(this).hasClass('minus') && parseInt(qty.val()) >= 2) { @@ -39,7 +43,8 @@ jQuery(document).ready(function ($) { } } - product.find('.product-item-overlay__price').html(price * qty.val() + ' '); + product.find('.product-item-overlay__button a').attr('data-quantity', qty.val()) + product.find('.product-item-overlay__price').html((price * qty.val()) + ' '); }) $('.product__main').on('click', '.select__state', function(evt) { @@ -190,34 +195,34 @@ radioButtons.forEach(radioBlock => { }) // radio-button -// overlay -// let products = document.querySelectorAll('.product__item'); +overlay +let products = document.querySelectorAll('.product__item'); -// products.forEach(productItem => { -// let button = productItem.querySelector('.open-overlay'), -// overlay = productItem.querySelector('.product-item__overlay'); +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'); -// } -// }); + 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'); -// } -// } + productItem.classList.toggle('active'); + overlay.classList.toggle('active'); + } + } -// }) -// overlay +}) +overlay // select @@ -478,3 +483,5 @@ if (document.querySelector('.header').classList.contains('white')) { }); } // scroll + +