Fix | bugfix

Co-authored-by: Your Name <you@example.com>
Reviewed-on: #18

wp-content/themes/cosmopet/modules/forms/assets/js/form.js

@@ -1,9 +1,8 @@
 // Функция для показа модальных окон
 function showModal(modalClass) {
-    const modal = document.querySelector('.' + modalClass);
+  const modal = document.querySelector('.' + modalClass);
-    if (modal) {
+  if (modal) {
-      modal.style.display = 'flex';
+    modal.style.display = 'flex';
-    }
   }
   
   // Функция для закрытия модальных окон
@@ -35,6 +34,17 @@ function showModal(modalClass) {
     });
   });
   
+  // Закрытие при клике вне контента
+  window.addEventListener('click', function(event) {
+    const modals = document.querySelectorAll('.modal-success, .modal-offer');
+    modals.forEach(modal => {
+      if (event.target === modal) {
+        modal.style.display = 'none';
+      }
+    });
+  });
+});
+
 
 jQuery(document).ready(function($) {
     $('.form-process').submit(function(event) {
@@ -63,65 +73,65 @@ const metaLocale = document.querySelector('meta[property="og:locale"]');
 const localeValue = metaLocale.getAttribute('content');
 
 
-        // Функция валидации формы
+      // Функция валидации формы
-        function validateForm(form) {
+      function validateForm(form) {
-            // Очищаем предыдущие сообщения об ошибках внутри этой формы
+          // Очищаем предыдущие сообщения об ошибках внутри этой формы
-            clearErrorMessages(form);
+          clearErrorMessages(form);
-            let validated = true
+          let validated = true
-            // Валидация поля имени
+          // Валидация поля имени
-            const nameInput = form.querySelector('input[name="name"]');
+          const nameInput = form.querySelector('input[name="name"]');
           
-            if (nameInput && !nameInput.value.trim()) {
+          if (nameInput && !nameInput.value.trim()) {
-                if(localeValue == 'en_US'){
+              if(localeValue == 'en_US'){
-                    showError(nameInput, 'The name is requeried field');
+                  showError(nameInput, 'The name is requeried field');
-                }
+              }
-                if(localeValue == 'ru_RU'){
+              if(localeValue == 'ru_RU'){
-                    showError(nameInput, 'Поле имени обязательно для заполнения.');
+                  showError(nameInput, 'Поле имени обязательно для заполнения.');
-                }
+              }
-                validated = false
+              validated = false
-            }
+          }
 
-            // Валидация поля email
+          // Валидация поля email
-            const emailInput = form.querySelector('input[name="email"]');
+          const emailInput = form.querySelector('input[name="email"]');
-            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-            if (emailInput && !emailPattern.test(emailInput.value.trim())) {
+          if (emailInput && !emailPattern.test(emailInput.value.trim())) {
 
-                if(localeValue == 'en_US'){
+              if(localeValue == 'en_US'){
-                    showError(emailInput, 'Email is incorrect.');
+                  showError(emailInput, 'Email is incorrect.');
-                }
+              }
-                if(localeValue == 'ru_RU'){
+              if(localeValue == 'ru_RU'){
-                    showError(emailInput, 'Введите корректный email.');
+                  showError(emailInput, 'Введите корректный email.');
-                }
+              }
-                validated = false
+              validated = false
-            }
+          }
 
-            // Валидация поля телефона
+          // Валидация поля телефона
-            const phoneInput = form.querySelector('input[name="phone"]');
+          const phoneInput = form.querySelector('input[name="phone"]');
-            const phonePattern = /^\+?\d{10,15}$/;
+          const phonePattern = /^\+?\d{10,15}$/;
-            if (phoneInput && !phonePattern.test(phoneInput.value.trim())) {
+          if (phoneInput && !phonePattern.test(phoneInput.value.trim())) {
-                if(localeValue == 'en_US'){
+              if(localeValue == 'en_US'){
-                    showError(phoneInput, 'The phone is incorrect.');
+                  showError(phoneInput, 'The phone is incorrect.');
-                }
+              }
-                if(localeValue == 'ru_RU'){
+              if(localeValue == 'ru_RU'){
-                    showError(phoneInput, 'Введите корректный номер телефона.');
+                  showError(phoneInput, 'Введите корректный номер телефона.');
-                }
+              }
-                validated = false
+              validated = false
-            }
+          }
-            return validated
+          return validated
-        }
+      }
 
-        // Функция для отображения сообщения об ошибке
+      // Функция для отображения сообщения об ошибке
-        function showError(input, message) {
+      function showError(input, message) {
-            const errorMessage = document.createElement('div');
+          const errorMessage = document.createElement('div');
-            errorMessage.className = 'error-message';
+          errorMessage.className = 'error-message';
-            errorMessage.textContent = message;
+          errorMessage.textContent = message;
-            input.insertAdjacentElement('afterend', errorMessage);
+          input.insertAdjacentElement('afterend', errorMessage);
-        }
+      }
 
-        // Функция для очистки сообщений об ошибках внутри конкретной формы
+      // Функция для очистки сообщений об ошибках внутри конкретной формы
-        function clearErrorMessages(form) {
+      function clearErrorMessages(form) {
-            const errorMessages = form.querySelectorAll('.error-message');
+          const errorMessages = form.querySelectorAll('.error-message');
-            errorMessages.forEach(errorMessage => {
+          errorMessages.forEach(errorMessage => {
-                errorMessage.remove();
+              errorMessage.remove();
-            });
+          });
-        }
+      }

wp-content/themes/cosmopet/modules/layout/assets/js/gp-main.js

@@ -413,3 +413,5 @@ if (document.querySelector('.header').classList.contains('white')) {
     });
 }
 // scroll
+
+

wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js

@@ -213,9 +213,65 @@ jQuery(document).ready(function($) {
         });
     }
     
+    // --- Работа с cookie ---
+    function setCookie(name, value, days) {
+        let expires = '';
+        if (days) {
+            const date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = '; expires=' + date.toUTCString();
+        }
+        document.cookie = name + '=' + (value || '')  + expires + '; path=/';
+    }
+    function getCookie(name) {
+        const nameEQ = name + '=';
+        const ca = document.cookie.split(';');
+        for(let i=0;i < ca.length;i++) {
+            let c = ca[i];
+            while (c.charAt(0)==' ') c = c.substring(1,c.length);
+            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+        }
+        return null;
+    }
+    // --- Конец работы с cookie ---
+
+    // Открытие корзины при первом добавлении товара
+    function openBasketOnFirstAdd() {
+        if (!getCookie('basket_popup_shown')) {
+            console.log('[openBasketOnFirstAdd] Срабатывает открытие корзины');
+            // Выбираем только модалку, в которой находится корзина
+            var $basket = $('#modal-basket');
+            var $modal = $basket.closest('.modal');
+            var $aside = $modal.find('.modal__aside');
+            var device = window.screen.width;
+
+            // Сброс только внутри этой модалки
+            var $items = $modal.find('.modal__item');
+            console.log('[openBasketOnFirstAdd] modal:', $modal.get(), 'modal__item:', $items.get());
+            $items.removeClass('active').attr('style', '');
+            $modal.addClass('active').show();
+            $basket.addClass('active').css({opacity: 1, filter: 'blur(0px)'});
+            console.log('[openBasketOnFirstAdd] basket:', $basket.get());
+            var width = $basket[0] ? $basket[0].clientWidth : 600;
+            setTimeout(function() {
+                if (device <= 720) {
+                    $aside.css('width', device + 'px');
+                    console.log('[openBasketOnFirstAdd] aside width:', device + 'px');
+                } else {
+                    $aside.css('width', width + 'px');
+                    console.log('[openBasketOnFirstAdd] aside width:', width + 'px');
+                }
+            }, 10);
+            setCookie('basket_popup_shown', '1', 30);
+        } else {
+            console.log('[openBasketOnFirstAdd] Куки уже установлены, попап не открывается');
+        }
+    }
+
     // Обновление корзины при добавлении товара
     $(document.body).on('added_to_cart', function() {
         updateCartFragment();
+        openBasketOnFirstAdd();
     });
     
     // Функция обновления количества
@@ -279,6 +335,7 @@ jQuery(document).ready(function($) {
         });
     }
 
+    // Добавляем спиннер на кнопку 'Добавить в корзину' в корзине
     $('body').on('click', '.add_to_cart_button', function() {
         var btn = $(this);
         if (!btn.hasClass('loading')) {

wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-mobile.css

@@ -6,7 +6,138 @@
 }
 /* product */
 
+/* modal */
+.modal__basket{
+    width: 100%;
+}
+.modal__filter{
+    width: 100%;
+}
+.modal__to-know,
+.modal__to-know-submit{
+    width: 100%;
+}
+.modal__button .to-know{
+    display: flex;
+
+    background: none;
+}
+.modal__basket .modal__header {
+    height: calc(100% - 156px);
+    margin-bottom: -36px;
+}
+.modal-basket-item__block-image{
+    position: absolute;
+    width: 80px;
+}
+.modal-basket-item__image{
+    width: 48px;
+}
+.modal-basket-item__content{
+    margin-left: 0;
+
+    padding-left: 96px;
+}
+.modal-basket-item__control{
+    margin-left: -80px;
+}
+.modal-basket-item__title{
+    min-height: 40px;
+    
+    font-size: 16px;
+}
+.modal-basket__item--return{
+    flex-direction: column;
+    align-items: start;
+}
+.modal-basket__item--return .modal-basket-item__title{
+    margin-right: auto;
+}
+.notification--width-584{
+    width: 100%;
+}
+.notification__title{
+    font-size: 20px;
+}
+.notification__text--center-pc{
+    text-align: start;
+}
+.notification__img{
+    height: 360px;
+}
+.notification__title{
+    padding-right: 96px;
+}
+.modal-form__buttons--two{
+    flex-wrap: wrap;
+}
+.modal-form__buttons--two button, .modal-form__buttons--two input{
+    margin-top: 24px;
+    width: 100%;
+}
+.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{
+    margin-top: 0;
+}
+.modal-map__control{
+    flex-wrap: wrap;
+}
+.modal-map-control__item{
+    width: calc(100% - 24px);
+}
+.form__full-mobile{
+    width: 100%;
+    border-radius: 0;
+    border: none;
+}
+
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
+    width: 69px;
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
+
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
+    width: 82px;
+}
+.form__input{
+    padding: 12px 14px;
+}
+.modal-form--height-100-phone{
+    min-height: 100%;
+}
+/* modal */
+
+/* footer */
+.footer__about{
+    display: none;
+}
+.footer__wrapper{
+    flex-direction: column;
+}
+.footer__content{
+    width: 100%;
+}
+.footer__form{
+    margin-top: 24px;
+    margin-left: 0;
+
+    width: 100%;
+}
+.footer__social-media{
+    display: block;
+
+    margin-top: 24px;
 }
+.footer-about__text{
+    padding-top: 35px;
+    display: block;
+    text-align: left;
+}
+.footer__list{
+    margin-top: 20px;
+}
+/* footer */
+
 /* detail */
 .toggle__table--two .toggle-table__block{
     width: 100%;
@@ -20,6 +151,67 @@
 }
 /* detail */
 
+/* cabinet */
+.cabinet-card__title{
+    font-size: 20px;
+}
+.cabinet-card__no-orders{
+    margin-top: 16px;
+}
+.cabinet-card-order__header{
+    flex-direction: column;
+}
+.cabinet-card-order__payment{
+    margin-top: 16px;
+}
+.cabinet-card-order-detail__main{
+    flex-direction: column;
+}
+.cabinet-card-order-detail-main__links{
+    margin-top: 24px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__img{
+    width: 70px;
+    height: 70px;
+}
+.cabinet-card-order-detail-main__product{
+    margin-top: 16px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__content{
+    margin-left: 16px;
+
+    flex-wrap: wrap;
+
+    position: relative;
+}
+.cabinet-card-order-detail-main-product__description{
+    width: 100%;
+}
+.cabinet-card-order-detail-main-product__count{
+    position: absolute;
+    left: 116px;
+    bottom: 0;
+}
+.cabinet-card-order-detail-main-product__price{
+    position: absolute;
+    left: 153px;
+    bottom: 0;
+}
+.cabinet-card__content{
+    padding-right: 19px;
+}
+.cabinet-card-order-main__date{
+    font-size: 20px;
+}
+/* .cabinet-card__order.active */
+/* .cabinet-card__order.active */
+/* cabinet */
+}
+
 @media only screen and (max-width: 576px) {
 /* header */
 
@@ -35,4 +227,110 @@
 }
 /* product */
 
+/* modal */
+.modal__aside{
+    left: 0;
+}
+.form-input-radio__title span{
+    display: block;
+    width: 100%;
+
+    color: var(--text-grey);
+}
+.modal-form__title{
+    font-size: 20px;
+}
+/* modal */
+
+/* detail */
+.detail-block-form__item,
+.detail-block-form__submit{
+    min-width: 100%;
+}
+/* detail */
+
+/* cabinet */
+
+.cabinet-card-order-detail-main-product__img{
+    width: 40px;
+    height: 40px;
+}
+
+.cabinet-card-order-detail-main-product__count{
+    left: auto;
+    right: 71px;
 }
+.cabinet-card-order-detail-main-product__price{
+    left: auto;
+    right: 0;
+}
+.cabinet-card-order__detail-short{
+    transition-delay: 0;
+    transition-duration: 0;
+}
+/* cabinet */
+}
+
+@media only screen and (max-width: 720px) {
+    .subscription__item{
+        flex-direction: column;
+    }
+
+    .subscription__item > p:first-child{
+        font-size: 16px;
+        color: var(--text-6);
+    }
+    .subscription__item > p:last-child{
+        margin-top: 6px;
+    }
+
+    .subscription__add-title {
+        font-size: 20px;
+    }
+
+    .subscription__add-product{
+        flex-wrap: wrap;
+    }
+
+    .subscription__add-product > *:not(:first-child){
+        padding-top: 0;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__img{
+        width: 73px;
+        height: 66px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__what{
+        font-size: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{
+        margin-top: 8px;
+
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__description {
+        width: calc(100% - 73px);
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__content{
+        position: static;
+        margin-top: -10px;
+        margin-left: auto;
+        width: calc(100% - 73px);
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__count{
+        position: static;
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__price{
+        position: static;
+        font-size: 16px;
+    }
+}
+

wp-content/themes/cosmopet/modules/shop/components/single-product/assets/css/gp-style-order.css

@@ -0,0 +1,241 @@
+.order{
+    display: flex;
+}
+.order__title{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order__contacts{
+    width: calc(50% - 0.5px);
+
+    padding: 24px;
+
+    border-right: 1px solid #121212;
+}
+.order-contacts__header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-contacts__form{
+    margin-top: 24px;
+}
+.order-contacts__delivery{
+    margin-top: 47.5px;
+
+    padding-top: 48px;
+
+    border-top: 1px solid var(--background-grey);
+}
+
+.order-contacts-deliver__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date{
+    padding: 8px;
+
+    border-radius: 24px;
+
+    background: var(--background-grey);
+}
+.order-contacts-deliver__date .form-input-radio__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date .form-input-radio__item:first-child{
+    margin-top: 0;
+}
+.order__your{  
+    width: calc(50% - 0.5px);
+
+    padding: 24px 24px 24px 48px;
+
+    background: var(--background-grey);
+}
+.order-your__products{
+    margin-top: 48px;
+}
+.order-your-products__item{
+    margin-top: 16px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.order-your-products__left{
+    display: flex;
+}
+.order-your-products__img{
+    width: 40px;
+    aspect-ratio: 1;
+
+    border-radius: 16px;
+}
+.order-your-products__content{
+    margin-left: 16px;
+}
+.order-your-products__name{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-black);
+
+    text-decoration: none;
+}
+.order-your-products__description{
+    margin-top: 8px;
+
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-6);
+}
+.order-your-products__description span{
+    font-weight: 700;
+}
+.order-your-products__description span::before{
+    margin-left: 3px;
+
+    content: 'x ';
+}
+.order-your-products__right{
+    display: flex;
+}
+.order-your-products__count{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-6);
+}
+.order-your-products__count::before{
+    content: 'x';
+}
+.order-your-products__price{
+    margin-left: 16px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-products__price::after{
+    content: 'Р';
+}
+.order-your__calculation{
+    margin-top: 48px;
+}
+.order-your__promo{
+    display: flex;
+}
+.order-your-promo__button{
+    margin-left: 8px;
+}
+.order-your-calculation__item{
+    margin-top: 24px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-your-calculation__title{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+}
+.order-your-calculation__value{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 200%;
+    text-transform: uppercase;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-calculation__value--price::after{
+    content: ' ₽';
+}
+.order-your-calculation__value--discount{
+    background: var(--gradient-red);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.order-your-calculation__value--discount::before{
+    content: '- ';
+}
+.order-your-calculation__description{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-9);
+}
+.order-your-calculation__line{
+    margin-top: 23px;
+    border: 1px solid var(--background-9);
+}
+.order-your-calculation__result{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order-your-calculation__submit{
+    margin-top: 48px;
+}
+
+@media only screen and (max-width: 1200px) {
+.order{
+    display: block;
+}
+.order__contacts, .order__your{
+    border: none;
+    width: 100%;
+}
+}
+
+@media only screen and (max-width: 720px) {
+.order__title{
+    max-width: 181px;
+
+    font-size: 20px;
+    line-height: 120%;
+}
+.order__your{
+    margin-top: 16px;
+}
+.order__contacts{
+    padding: 24px 16px;
+}
+.order__your{
+    padding: 40px 16px 9px 16px;
+}
+.order-your__promo{
+    display: block;
+}
+.order-your-promo__button{
+    margin-left: 0;
+    margin-top: 24px;
+
+    width: 100%;
+}
+.order-your-products__content{
+    max-width: 164px;
+}
+.order-your-products__count, .order-your-products__price{
+    flex-shrink: 0;
+}
+}

wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-back.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 12.3643H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 18.7282" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 6.0003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

wp-content/themes/cosmopet/modules/shop/components/single-product/assets/img/svg/main/arrow-selected.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M15.7071 0.292893C16.0976 0.683417 16.0976 1.31658 15.7071 1.70711L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071L0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289C0.683417 5.90237 1.31658 5.90237 1.70711 6.29289L5 9.58579L14.2929 0.292893C14.6834 -0.0976311 15.3166 -0.0976311 15.7071 0.292893Z" fill="url(#paint0_radial_79_10214)" />
+  <defs>
+    <radialGradient id="paint0_radial_79_10214" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.9562 -7.00625) rotate(143.344) scale(34.5677 45.2811)">
+      <stop stop-color="#0F5881" />
+      <stop offset="0.512169" stop-color="#1EA49C" />
+      <stop offset="0.807073" stop-color="#76CE75" />
+      <stop offset="0.911458" stop-color="#ECF39F" />
+    </radialGradient>
+  </defs>
+</svg>

wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-function.js

@@ -1,156 +1,156 @@
-'use strict';
+// 'use strict';
-
+
-// function
+// // function
-function modalOpen(buttonElement, contentElement){
+// function modalOpen(buttonElement, contentElement){
-    let modal = document.querySelector('.modal'),
+//     let modal = document.querySelector('.modal'),
-        aside = document.querySelector('.modal__aside'),
+//         aside = document.querySelector('.modal__aside'),
-        elements = document.querySelectorAll(buttonElement),
+//         elements = document.querySelectorAll(buttonElement),
-        device = window.screen.width;
+//         device = window.screen.width;
-
+
-    elements.forEach(e => {
+//     elements.forEach(e => {
-        let thisContentElement = document.querySelector(contentElement);
+//         let thisContentElement = document.querySelector(contentElement);
-
+
-        e.onclick = function () {
+//         e.onclick = function () {
-            modal.classList.add('active');
+//             modal.classList.add('active');
-            thisContentElement.classList.add('active');
+//             thisContentElement.classList.add('active');
-            
+            
-            let width = thisContentElement.clientWidth;
+//             let width = thisContentElement.clientWidth;
-
+
-            setTimeout(() => {
+//             setTimeout(() => {
-                if (device <= 720) {
+//                 if (device <= 720) {
-                    aside.style.width = `${device}px`;
+//                     aside.style.width = `${device}px`;
-                    thisContentElement.style.opacity = 1;
+//                     thisContentElement.style.opacity = 1;
-                    thisContentElement.style.filter = 'blur(0px)';
+//                     thisContentElement.style.filter = 'blur(0px)';
-                }else{
+//                 }else{
-                    aside.style.width = `${width}px`;
+//                     aside.style.width = `${width}px`;
-                    thisContentElement.style.opacity = 1;
+//                     thisContentElement.style.opacity = 1;
-                    thisContentElement.style.filter = 'blur(0px)';
+//                     thisContentElement.style.filter = 'blur(0px)';
-                }
+//                 }
-            }, 10);
+//             }, 10);
-        }
+//         }
-    })
+//     })
-}
+// }
-
+
-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);
-
+
-    elements.forEach(e => {
+//     elements.forEach(e => {
-        e.onclick = function () {            
+//         e.onclick = function () {            
-            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 closeModalForm(close){
+// function closeModalForm(close){
-    let buttons = document.querySelectorAll(close),
+//     let buttons = document.querySelectorAll(close),
-        modal = document.querySelector('.modal');
+//         modal = document.querySelector('.modal');
-
+
-    buttons.forEach(button => {
+//     buttons.forEach(button => {
-        button.onclick = function (buttonEvent) {
+//         button.onclick = function (buttonEvent) {
-            modal.classList.remove('active');
+//             modal.classList.remove('active');
-            
+            
-            if (!modal.querySelector('.modal-map.active')) {
+//             if (!modal.querySelector('.modal-map.active')) {
-                modal.querySelector('.modal-form.active').classList.remove('active');
+//                 modal.querySelector('.modal-form.active').classList.remove('active');
-            }else{
+//             }else{
-                modal.querySelector('.modal-map.active').classList.remove('active');
+//                 modal.querySelector('.modal-map.active').classList.remove('active');
-            }
+//             }
-        }
+//         }
-    })
+//     })
-}
+// }
-
+
-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 modalFormOpen(formOrNotification) {
+// function modalFormOpen(formOrNotification) {
-    let buttons = document.querySelectorAll(formOrNotification),
+//     let buttons = document.querySelectorAll(formOrNotification),
-        modal = document.querySelector('.modal');
+//         modal = document.querySelector('.modal');
-
+
-    buttons.forEach(button => {
+//     buttons.forEach(button => {
-        button.onclick = function (eventButton) {
+//         button.onclick = function (eventButton) {
-            let classOpenForm = button.dataset.form,
+//             let classOpenForm = button.dataset.form,
-                form = modal.querySelector(`.${classOpenForm}`);                
+//                 form = modal.querySelector(`.${classOpenForm}`);                
-
+
-            form.classList.add('active');
+//             form.classList.add('active');
-            modal.classList.add('active');
+//             modal.classList.add('active');
-        }
+//         }
-    })
+//     })
-}
+// }
-// function
+// // function

wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-main.js

@@ -1,103 +1,65 @@
 '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');
 toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white');
 // header 
 
-// modal
+// // modal
-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 modalElement = document.querySelector('.modal');
+// let modalElement = document.querySelector('.modal');
-
+
-modalElement.onclick = function (event) {
+// modalElement.onclick = function (event) {
-    let target = event.target;
+//     let target = event.target;
-    console.log('Клик по modalElement', target);
+//     if (target.classList.contains('modal')) {
-    if (target.classList.contains('modal')) {
+//         let aside = target.querySelector('.modal__aside'),
-        let aside = target.querySelector('.modal__aside'),
+//             modalItem = target.querySelector('.modal__item.active');
-            modalItem = target.querySelector('.modal__item.active');
+//         aside.style.width = '0px';
-            console.log('Закрытие модального окна');
+//         setTimeout(() => {
-            aside.style.width = '0px';
+//             modalItem.style.cssText = '';
-            setTimeout(() => {
+//             modalItem.classList.remove('active');
-                modalItem.style.cssText = '';
+//             target.classList.remove('active');
-                modalItem.classList.remove('active');
+//         }, 300);
-                target.classList.remove('active');
+//     }
-                console.log('Модальное окно закрыто');
+// }
-            }, 300);
+
-    }
+// // modal
-}
-
-// modal
 
 // toggle
-toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
-// toggle
+// // 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();
-            console.log('Клик по radio-button', button.textContent.trim());
-            buttons.forEach(thisButton => {
-                if (thisButton.classList.contains('active')) {
-                    thisButton.classList.remove('active')
-                }
-            })
-
-            let text = button.textContent.trim();
-
-            button.classList.toggle('active');
-
-            input.value = text;    
-            console.log('radio-button value:', input.value);        
-        } 
-    })   
-})
-// radio-button
 
-// overlay
+// // radio-button
-let products = document.querySelectorAll('.product__item');
+// let radioButtons = document.querySelectorAll('.radio-button');
 
-products.forEach(productItem => {
+// radioButtons.forEach(radioBlock => {
-    let button = productItem.querySelector('.open-overlay'),
+//     let buttons = radioBlock.querySelectorAll('.button');
-        overlay = productItem.querySelector('.product-item__overlay');
     
+//     buttons.forEach(button => {
+//         let input = radioBlock.querySelector('.radio-button__input');
 
-    if (button) {
+//         button.onclick = function (e) {
-        button.onclick = function (e) {
+//             e.preventDefault();
-            console.log('Открытие overlay для товара', productItem);
+//             buttons.forEach(thisButton => {
-            document.querySelectorAll('.product__item').forEach(e => {
+//                 if (thisButton.classList.contains('active')) {
-                if (e.classList.contains('active')) {
+//                     thisButton.classList.remove('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'); 
+//             let text = button.textContent.trim();
-            overlay.classList.toggle('active');    
-            console.log('overlay toggled', overlay.classList.contains('active'));        
-        }
-    }
 
-})
+//             button.classList.toggle('active');
-// overlay
 
+//             input.value = text;        
+//         } 
+//     })   
+// })
+// // radio-button
 
 // select
 toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
@@ -114,7 +76,6 @@ 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');
@@ -127,221 +88,202 @@ selects.forEach(select => {
             button.classList.add('active');
             content.style.height = 0;
             select.classList.remove('active');
-            console.log('select value:', state.value);
         }        
     })
 })
 // select
 
-// counter
+// // counter
-let counters = document.querySelectorAll('.counter');
+// let counters = document.querySelectorAll('.counter');
-
+
-counters.forEach(e => {
+// counters.forEach(e => {
-    let minus = e.querySelector('.minus'),
+//     let minus = e.querySelector('.minus'),
-        plus  = e.querySelector('.plus'),
+//         plus  = e.querySelector('.plus'),
-        input = e.querySelector('.counter__input');
+//         input = e.querySelector('.counter__input');
-
+
-        minus.onclick = function (e) {
+//         minus.onclick = function (e) {
-            e.preventDefault();
+//             e.preventDefault();
-            let number = input.value;
+//             let number = input.value;
-            console.log('Клик по минусу', number);
+//             if (number >= 2){
-            if (number >= 2){
+//                 input.value = Number(number) - 1;
-                input.value = Number(number) - 1;
+//             }
-                console.log('Новое значение counter:', input.value);
+//         }
-            }
+
-        }
+//         plus.onclick = function (e) {
-
+//             e.preventDefault();
-        plus.onclick = function (e) {
+//             let number = input.value;
-            e.preventDefault();
+//             if (number <= 99) {
-            let number = input.value;
+//                 input.value = Number(number) + 1;
-            console.log('Клик по плюсу', number);
+//             }
-            if (number <= 99) {
+//         }
-                input.value = Number(number) + 1;
+// })
-                console.log('Новое значение counter:', input.value);
+// // counter
-            }
+
-        }
+// // checkbox 
-})
+// let checkbox = document.querySelectorAll('.checkbox');
-// counter
+
-
+// checkbox.forEach(e => {
-// checkbox 
+//     e.onclick = function (event) {
-let checkbox = document.querySelectorAll('.checkbox');
+//         let input = e.querySelector('.checkbox__input');
-
+//         if (!e.classList.contains('active')) {
-checkbox.forEach(e => {
+//             input.checked = 1;
-    e.onclick = function (event) {
+//         }else{
-        let input = e.querySelector('.checkbox__input');
+//             input.checked = 0;
-        console.log('Клик по checkbox', input.checked);
+//         }
-        if (!e.classList.contains('active')) {
+//         e.classList.toggle('active');
-            input.checked = 1;
+//     }
-        }else{
+// })
-            input.checked = 0;
+// // checkbox 
-        }
+
-        e.classList.toggle('active');
+
-        console.log('checkbox теперь', input.checked);
+// // function
-    }
+// function modalOpen(buttonElement, contentElement){
-})
+//     let modal = document.querySelector('.modal'),
-// checkbox 
+//         aside = document.querySelector('.modal__aside'),
-
+//         elements = document.querySelectorAll(buttonElement),
-
+//         device = window.screen.width;
+
+//     elements.forEach(e => {
+//         let thisContentElement = document.querySelector(contentElement);
+
+//         e.onclick = function () {
+//             modal.classList.add('active');
+//             thisContentElement.classList.add('active');
+            
+//             let width = thisContentElement.clientWidth;
+
+//             setTimeout(() => {
+//                 if (device <= 720) {
+//                     aside.style.width = `${device}px`;
+//                     thisContentElement.style.opacity = 1;
+//                     thisContentElement.style.filter = 'blur(0px)';
+//                 }else{
+//                     aside.style.width = `${width}px`;
+//                     thisContentElement.style.opacity = 1;
+//                     thisContentElement.style.filter = 'blur(0px)';
+//                 }
+//             }, 10);
+//         }
+//     })
+// }
+
+// function modalClose(buttonElement) {
+//     let modal = document.querySelector('.modal'),
+//         aside = document.querySelector('.modal__aside'),
+//         asideItems = document.querySelectorAll('.modal__item'),
+//         elements = document.querySelectorAll(buttonElement);
+
+//     elements.forEach(e => {
+//         e.onclick = function () {        
+//             aside.style.width = '0px';
+            
+//             asideItems.forEach(e => {
+//                 if (e.classList.contains('active')) {
+//                     e.style.filter  = 'blur(10px)';
+//                 }
+//             });
+
+//             setTimeout(() => {
+//                 asideItems.forEach(e => {
+//                     if (e.classList.contains('active')) {
+//                         e.classList.remove('active');
+//                     }
+//                 });
+
+//                 modal.classList.remove('active');
+//             }, 300);
+//         }
+//     })
+// }
+
+// function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+//     let elements = document.querySelectorAll(mainElement);
+
+//     elements.forEach(e => {
+//         let thisMainElement = e,
+//             thisButtonElement = e.querySelector(buttonElement),
+//             thisHeightElement = e.querySelector(heightElement),
+//             thisContentElement = e.querySelector(contentElement);        
+
+//         thisButtonElement.onclick = function (e) {
+//             let height = thisHeightElement.clientHeight;
+//             if (close == true && !thisMainElement.classList.contains('active')) {
+//                 elements.forEach(e => {
+//                     if (e.classList.contains('active')) {
+//                         e.classList.remove('active');
+//                         e.querySelector(contentElement).style.height = null
+//                     }                    
+//                 })
+//             }
+
+//             if (!thisMainElement.classList.contains('active')) {
+//                 thisContentElement.style.height = `${height}px`;
+//                 thisMainElement.classList.add('active');
+//             }else{
+//                 thisContentElement.style.height = null;
+//                 thisMainElement.classList.remove('active');
+//             }
+//         }
+        
+//     });
+// }
+
+// function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
+//     let thisButton = document.querySelector(button), 
+//         thisContent = document.querySelector(content),
+//         thisRemoveBlock = document.querySelector(removeBlock) || '',
+//         thisBlockheight = document.querySelector(blockheight);
+
+//     thisButton.onclick = function () {
+//         let height = thisBlockheight.clientHeight;
+//         if (!thisContent.classList .contains('open')) {
+//             thisContent.style.height = `${height}px`;
+//             thisContent.classList .add('open');
+
+//             if (removeBlock) {
+//                 thisRemoveBlock.classList.remove(removeClass);
+//             }
+//         }else{
+//             thisContent.style.height = null;
+//             thisContent.classList .remove('open');
+
+//             if (removeBlock) {
+//                 if (window.scrollY <= 25) {
+//                     thisRemoveBlock.classList.add(removeClass);
+//                 }
+//             }
+//         }
+//     }
+// }
 // function
-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 () {
-            console.log('Открытие модального окна', contentElement);
-            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)';
-                }
-                console.log('Модальное окно открыто', contentElement);
-            }, 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 => {
+// // resize
-        e.onclick = function () {    
+// window.addEventListener('resize', (e) => {
-            console.log('Закрытие модального окна через кнопку', buttonElement);        
+//     let width = window.screen.width;
-            aside.style.width = '0px';
+//     // media
-            
+//     modalOpen('.button--filter', '.modal__filter');
-            asideItems.forEach(e => {
+//     modalOpen('.basket-open', '.modal__basket');
-                if (e.classList.contains('active')) {
+//     modalOpen('.open-to-know', '.modal__to-know');
-                    e.style.filter  = 'blur(10px)';
+//     modalClose('.modal__close');
-                }
+    
-            });
+//     let modalItem = document.querySelectorAll('.modal__item');
-
+
-            setTimeout(() => {
+//     modalItem.forEach(modal => {
-                asideItems.forEach(e => {
+//         if (modal.classList.contains('active')) {
-                    if (e.classList.contains('active')) {
+//             let aside = document.querySelector('.modal__aside');
-                        e.classList.remove('active');
+
-                    }
+//             if (width <= 720) {
-                });
+//                 aside.style.width = `${width}px`
-
+//             }else{
-                modal.classList.remove('active');
+//                 let openAside = document.querySelector('.modal__item.active'),
-                console.log('Модальное окно закрыто через кнопку', buttonElement);
+//                     newWidth = openAside.clientWidth;
-            }, 300);
+
-        }
+//                 aside.style.width = `${newWidth}px`
-    })
+//             }
-}
+//         }
-
+//     })
-function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+// });
-    let elements = document.querySelectorAll(mainElement);
+// // resize
-
-    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;
-            console.log('toggleOpenX', mainElement, 'active:', thisMainElement.classList.contains('active'));
-            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');
-                console.log('toggleOpenX открыт', mainElement);
-            }else{
-                thisContentElement.style.height = null;
-                thisMainElement.classList.remove('active');
-                console.log('toggleOpenX закрыт', mainElement);
-            }
-        }
-        
-    });
-}
-
-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;
-        console.log('toggleHeader', button, 'active:', thisContent.classList.contains('open'));
-        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;
-    console.log('resize', 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`
-                }
-                console.log('resize modal aside', aside.style.width);
-            }
-        })
-    // }
-});
-// resize
 
 // scroll
 
@@ -350,7 +292,6 @@ 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{
@@ -360,3 +301,4 @@ if (document.querySelector('.header').classList.contains('white')) {
     });
 }
 // scroll
+

wp-content/themes/cosmopet/modules/shop/components/single-product/component-template.twig

@@ -1,4 +1,4 @@
-
+{% set current_path = template_path ~ '/modules/shop/components/single-product' %}
 
         {% set bodyClass = 'bg-white' %}
 
@@ -259,7 +259,7 @@
                     </div>
                 </div>
             </div>
-
+ <div class="product__main">
             {% set recommended_products = function('get_field', 'recommended_products', product.id) %}
             {% set related_products = recommended_products ? recommended_products : function('wc_get_related_products', product.id, 4) %}
             {% if related_products %}
@@ -406,6 +406,7 @@
                 </div>
             {% endif %}
         </div>
+         </div>
 
         <div class="gallery">
             <button class="gallery__close gallery-button">

wp-content/themes/cosmopet/templates/front-page/front-page.twig

@@ -105,7 +105,7 @@
         <div class="reviews_block">
             <div class="reviews_items --visible">
                 {% if post.meta('reviews_repeater') %}
-                    {% set reviews = post.meta('reviews_repeater') %}
+                    {% set rv = post.meta('reviews_repeater') %}
                     
                     {# Create three blocks #}
                     {% for i in 0..2 %}
@@ -118,8 +118,8 @@
                                     <div class="swiper-wrapper">
                                         
                                         {# Output reviews with step 3, starting from current block index #}
-                                        {% for j in range(i, reviews|length - 1, 3) %}
+                                        {% for j in range(i, rv|length - 1, 3) %}
-                                            {% set review = reviews[j] %}
+                                            {% set review = rv[j] %}
                                             <div class="swiper-slide">
                                                 <div class="reviews_item-top">
                                                     <div class="reviews_item-name"><b>{{ review.review_name }}</b></div>

wp-content/themes/cosmopet/templates/front-page/template-front-page.php

@@ -80,6 +80,7 @@ $context['show_blog'] = get_field('blog_show');
 $context['reviews'] = get_field('reviews');
 $context['sub_title'] = get_field('sub_title');
 $context['sub_text'] = get_field('sub_text');
+
 Timber::render('templates/front-page/front-page.twig', $context);
 
 ?>

wp-content/themes/cosmopet/templates/header.twig

@@ -14,36 +14,30 @@
             <div class="header-pc-menu__content">
                 <div class="header-pc-menu__item">
                     <a href="/shop/"
-                        class="header-pc-menu__title">Кошкам</a>
+                        class="header-pc-menu__title">{% if current_lang == 'ru' %}Кошкам{% elseif current_lang == 'en' %}For cats{% endif %}</a>
                     <ul class="header-pc-menu__list">
                         <li class="header-pc-menu__list-li">
-                            <a href="/shop/">Корм</a>
+                            <a href="/shop/">{% if current_lang == 'ru' %}Корм{% elseif current_lang == 'en' %}Food{% endif %}</a>
                         </li>
                         <li class="header-pc-menu__list-li">
-                            <a
+                            <a href="/shop/">{% if current_lang == 'ru' %}Лакомства{% elseif current_lang == 'en' %}Treats{% endif %}</a>
-                                href="/shop/">Лакомства</a>
                         </li>
-
                         <li class="header-pc-menu__list-li">
-                            <a
+                            <a href="/shop/">{% if current_lang == 'ru' %}Аксессуары{% elseif current_lang == 'en' %}Accessories{% endif %}</a>
-                                href="/shop/">Аксессуары</a>
                         </li>
                     </ul>
                 </div>
                 <div class="header-pc-menu__item">
-                    <a href="#" class="header-pc-menu__title">Собакам</a>
+                    <a href="#" class="header-pc-menu__title">{% if current_lang == 'ru' %}Собакам{% elseif current_lang == 'en' %}For dogs{% endif %}</a>
                     <ul class="header-pc-menu__list">
                         <li class="header-pc-menu__list-li">
-                            <a href="/shop/">Корм</a>
+                            <a href="/shop/">{% if current_lang == 'ru' %}Корм{% elseif current_lang == 'en' %}Food{% endif %}</a>
                         </li>
                         <li class="header-pc-menu__list-li">
-                            <a
+                            <a href="/shop/">{% if current_lang == 'ru' %}Лакомства{% elseif current_lang == 'en' %}Treats{% endif %}</a>
-                                href="/shop/">Лакомства</a>
                         </li>
-
                         <li class="header-pc-menu__list-li">
-                            <a
+                            <a href="/shop/">{% if current_lang == 'ru' %}Аксессуары{% elseif current_lang == 'en' %}Accessories{% endif %}</a>
-                                href="/shop/">Аксессуары</a>
                         </li>
                     </ul>
                 </div>
@@ -207,7 +201,6 @@
         </ul>
 
         <div class="mini-profile">
-        {% if CONSTANTS.DOMAIN != 'AE' %}
             <div class="mini-profile__item">
                 <div class="lang">
                     <button class="lang__open">
@@ -234,7 +227,6 @@
                     </div>
                 </div>
             </div>
-        {% endif %}
             <div class="mini-profile__item">
                 <button class="mini-profile__button basket-open" data-modal-target=".modal__basket">
                     <img src="https://cosmopet.ru/wp-content/themes/woodmart/gp-include/assets/core/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon black">

wp-content/themes/cosmopet/templates/modal.twig

@@ -1,8 +1,11 @@
+
+
+
 <div class="modal">
     <aside class="modal__aside">
         <div class="modal__item modal__filter">
             <button class="modal__close">
-                <img src="assets/img/svg/main/black-x.svg" alt="">
+                <img src="{{ current_path }}assets/img/svg/main/black-x.svg" alt="">
             </button>
 
             <div class="modal__header">
@@ -15,7 +18,7 @@
 
         <div class="modal__item modal__to-know modal__item--no-title">
             <button class="modal__close">
-                <img src="assets/img/svg/main/black-x.svg" alt="">
+                <img src="{{ current_path }}assets/img/svg/main/black-x.svg" alt="">
             </button>
             <div class="modal__header">
                 <p class="modal__small-title">{{ fn ('pll_e', 'Узнать о поступлении') }}</p>

wp-content/themes/cosmopet/templates/shop/bestsellers.twig

@@ -1,6 +1,4 @@
-{# 
+{# Bestsellers Slider Template with Polylang support #}
-  Bestsellers Slider Template with Polylang support
-#}
 
 {% set best = function('get_field', 'best', 'options') %}
 {% set currency = function('get_woocommerce_currency_symbol') %}
@@ -24,51 +22,55 @@
                 <div class="swiper sellerSlider">
                     <div class="swiper-wrapper">
                         {% if best %}
-                            {% for product in best %}
+                            {% for product_id in best %}
-                                {% set product = TimberPost(product) %}
+                                {% set product = function('wc_get_product', product_id) %}
-                                {% set thumbnail = product.thumbnail ? product.thumbnail.src('medium') : function('wc_placeholder_img_src') %}
+                                {% if product %}
-                                {% set price = product.price %}
+                                    {% set thumbnail = product.get_image_id() ? function('wp_get_attachment_image_url', product.get_image_id(), 'medium') : function('wc_placeholder_img_src') %}
-                                {% set has_sale = product.sale_price and product.sale_price < product.regular_price %}
+                                    {% set price = product.get_price_html() %}
+                                    {% set has_sale = product.is_on_sale() %}
+                                    {% set regular_price = product.get_regular_price() %}
+                                    {% set sale_price = product.get_sale_price() %}
                                     
-                                <div class="swiper-slide">
+                                    <div class="swiper-slide">
-                                    <div class="sellers_card">
+                                        <div class="sellers_card">
-                                        <a href="{{ product.link }}" aria-label="{{ function('pll_e', 'View product:') }} {{ product.title }}">
+                                            <a href="{{ product.get_permalink() }}" aria-label="{{ function('pll_e', 'View product') }}: {{ product.get_name() }}">
-                                            <img src="{{ thumbnail }}" 
+                                                <img src="{{ thumbnail }}" 
-                                                 alt="{{ function('pll_e', 'Product image:') }} {{ product.title }}" 
+                                                     alt="{{ function('pll_e', 'Product image') }}: {{ product.get_name() }}" 
-                                                 class="sellers_card-img"
+                                                     class="sellers_card-img"
-                                                 loading="lazy">
+                                                     loading="lazy">
-                                        </a>
-
-                                        <div class="tags_block">
-                                            <a href="{{ product.link }}" class="seller_name">
-                                                {{ product.title }}
                                             </a>
 
-                                            <div class="seller_bt">
+                                            <div class="tags_block">
-                                                <p class="seller_price">
+                                                <a href="{{ product.get_permalink() }}" class="seller_name">
-                                                    {{ price }} {{ currency }}
+                                                    {{ product.get_name() }}
-                                                </p>
+                                                </a>
 
-                                                {% if has_sale %}
+                                                <div class="seller_bt">
-                                                    <div class="product-item__price-disc">
+                                                    <div class="seller_price">
-                                                        <p class="product-item__price-sale__text">
+                                                        {{ price|raw }}
-                                                            {{ product.regular_price }} {{ currency }}
-                                                        </p>
-                                                        <p class="product-item__price-sale__perc">
-                                                            -{{ ((1 - (price / product.regular_price)) * 100)|round }}%
-                                                        </p>
                                                     </div>
-                                                {% endif %}
-                                            </div>
                                                     
-                                            <a href="{{ product.link }}" class="seller_link">
+                                                    {% if has_sale and regular_price and sale_price %}
-                                                <button class="seller_buy" aria-label="{{ function('pll_e', 'Buy') }} {{ product.title }}">
+                                                        <div class="product-item__price-disc">
-                                                    {{ function('pll_e', 'Buy') }}
+                                                            <p class="product-item__price-sale__text">
-                                                </button>
+                                                                {{ regular_price }} {{ currency }}
-                                            </a>
+                                                            </p>
+                                                            <p class="product-item__price-sale__perc">
+                                                                -{{ (1 - (sale_price / regular_price)) * 100|round }}%
+                                                            </p>
+                                                        </div>
+                                                    {% endif %}
+                                                </div>
+                                                
+                                                <a href="{{ product.get_permalink() }}" class="seller_link">
+                                                    <button class="seller_buy" aria-label="{{ function('pll_e', 'Buy') }} {{ product.get_name() }}">
+                                                        {{ function('pll_e', 'Buy') }}
+                                                    </button>
+                                                </a>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
+                                {% endif %}
                             {% endfor %}
                         {% else %}
                             <p class="no-products">{{ function('pll_e', 'No bestsellers found') }}</p>