From 0e27ae936e9c1bb162407196efd1698b3c8a6f77 Mon Sep 17 00:00:00 2001 From: Andrei-10 Date: Thu, 22 May 2025 18:13:35 +0000 Subject: [PATCH] Feat | subscriptions Co-authored-by: Your Name Reviewed-on: https://git.good-production.xyz/Good-Production/cosmopet-architecture/pulls/22 --- wp-content/themes/cosmopet/functions.php | 33 + .../shop/components/cart/assets/js/cart.js | 215 ++-- .../assets/css/gp-style-core.css | 946 +++--------------- .../single-product/assets/js/gp-product.js | 44 +- .../single-product/component-template.twig | 9 +- .../cosmopet/templates/modal/basket.twig | 47 +- .../templates/shop/cart-contents.twig | 2 +- 7 files changed, 357 insertions(+), 939 deletions(-) diff --git a/wp-content/themes/cosmopet/functions.php b/wp-content/themes/cosmopet/functions.php index b7ce43a..a5ca5c2 100644 --- a/wp-content/themes/cosmopet/functions.php +++ b/wp-content/themes/cosmopet/functions.php @@ -1151,6 +1151,39 @@ function change_wbw_reset_button_text($text) { return 'Сбросить'; } + +add_action('wp_ajax_get_cart_fragment', 'get_cart_fragment_callback'); +add_action('wp_ajax_nopriv_get_cart_fragment', 'get_cart_fragment_callback'); + +function get_cart_fragment_callback() { + // Проверяем nonce для безопасности + check_ajax_referer('woocommerce-cart', 'security', false); + + // Получаем содержимое корзины + ob_start(); + wc_get_template('shop/cart-contents.twig', [], '', get_template_directory() . '/templates/'); + $contents = ob_get_clean(); + + // Получаем футер корзины + ob_start(); + wc_get_template('modal-basket-footer.twig', [], '', get_template_directory() . '/templates/'); + $footer = ob_get_clean(); + + // Получаем данные корзины + $cart = WC()->cart; + $count = $cart->get_cart_contents_count(); + $total = $cart->get_total('raw'); // Числовая сумма + $total_html = wc_cart_totals_order_total_html(); // Форматированная сумма + + wp_send_json_success([ + 'contents' => $contents, + 'footer' => $footer, + 'count' => $count, + 'total' => $total_html, + 'total_raw' => $total + ]); +} + add_action('template_redirect', 'custom_redirect_cart_page'); function custom_redirect_cart_page() { if (is_cart()) { 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 e9daf1a..c2f81dc 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 @@ -111,47 +111,62 @@ jQuery(document).ready(function($) { restoreRemovedItems(); // Функция удаления товара с возможностью восстановления - function removeItem(key) { - const $item = $(`[data-key="${key}"]`); - const productId = $item.data('product_id'); - const variationId = $item.data('variation_id') || 0; - const quantity = parseInt($item.find('.counter__input').val()); - - // Сохраняем во временное хранилище - const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; - removedItems.push({ product_id: productId, variation_id: variationId, quantity: quantity, key: key }); - localStorage.setItem(removedItemsStorageKey, JSON.stringify(removedItems)); - - // Показываем кнопку восстановления - $item.html(` -

- Удаление товара из корзины: 5с -

-
- -
- `); - - // Удаляем через 5 секунд, если не восстановили - const removeTimeout = setTimeout(() => { - permanentRemoveItem(key, productId, variationId); - }, 5000); +function removeItem(key) { + const $item = $(`[data-key="${key}"]`); + const productId = $item.data('product_id'); + const variationId = $item.data('variation_id') || 0; + const quantity = parseInt($item.find('.counter__input').val()); + + // Сохраняем во временное хранилище + const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; + removedItems.push({ product_id: productId, variation_id: variationId, quantity: quantity, key: key }); + localStorage.setItem(removedItemsStorageKey, JSON.stringify(removedItems)); + + // Показываем кнопку восстановления + $item.html(` +

+ Removing an item from the cart: 5с +

+
+ +
+ `); + + // Проверяем количество товаров в корзине + $.ajax({ + type: 'POST', + url: woocommerce_params.ajax_url, + data: { + action: 'check_cart_count' + }, + success: function(response) { + if (response.success && response.data.count <= 1) { + // Если после удаления корзина станет пустой (1 товар сейчас, удаляем его) + $('.proceed-to-checkout').css('display', 'none'); + } + } + }); + + // Удаляем через 5 секунд, если не восстановили + const removeTimeout = setTimeout(() => { + permanentRemoveItem(key, productId, variationId); + }, 5000); - const product_remove_timer = setInterval(() => { - let number = Number($(`#${key}_timer`).html()) - 1 - $(`#${key}_timer`).html(number) - }, 1000); - - // Обработчик восстановления - $(document).off('click', `[data-key="${key}"] .modal-basket-item__return`).on('click', `[data-key="${key}"] .modal-basket-item__return`, function(e) { - e.preventDefault(); - clearTimeout(removeTimeout); - clearInterval(product_remove_timer); // Очищаем интервал - restoreItem(key, productId, variationId, quantity); - }); - } + const product_remove_timer = setInterval(() => { + let number = Number($(`#${key}_timer`).html()) - 1; + $(`#${key}_timer`).html(number); + }, 1000); + + // Обработчик восстановления + $(document).off('click', `[data-key="${key}"] .modal-basket-item__return`).on('click', `[data-key="${key}"] .modal-basket-item__return`, function(e) { + e.preventDefault(); + clearTimeout(removeTimeout); + clearInterval(product_remove_timer); // Очищаем интервал + restoreItem(key, productId, variationId, quantity); + }); +} // Полное удаление товара function permanentRemoveItem(key, productId, variationId) { @@ -182,36 +197,39 @@ jQuery(document).ready(function($) { }); } - // Восстановление товара - function restoreItem(key, productId, variationId, quantity) { - $('#modal-basket').addClass('loading'); - - $.ajax({ - type: 'POST', - url: woocommerce_params.ajax_url, - data: { - action: 'restore_cart_item', - product_id: productId, - variation_id: variationId, - quantity: quantity - }, - complete: function() { - $('#modal-basket').removeClass('loading'); - }, - success: function(response) { - if (response.success) { - // Удаляем из временного хранилища - const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; - const updatedItems = removedItems.filter(item => - !(item.product_id === productId && item.variation_id === variationId) - ); - localStorage.setItem(removedItemsStorageKey, JSON.stringify(updatedItems)); - - updateCartFragment(); - } + // Восстановление товара +function restoreItem(key, productId, variationId, quantity) { + $('#modal-basket').addClass('loading'); + + $.ajax({ + type: 'POST', + url: woocommerce_params.ajax_url, + data: { + action: 'restore_cart_item', + product_id: productId, + variation_id: variationId, + quantity: quantity + }, + complete: function() { + $('#modal-basket').removeClass('loading'); + }, + success: function(response) { + if (response.success) { + // Удаляем из временного хранилища + const removedItems = JSON.parse(localStorage.getItem(removedItemsStorageKey)) || []; + const updatedItems = removedItems.filter(item => + !(item.product_id === productId && item.variation_id === variationId) + ); + localStorage.setItem(removedItemsStorageKey, JSON.stringify(updatedItems)); + + // Показываем кнопку Proceed to checkout + $('.proceed-to-checkout').css('display', ''); + + updateCartFragment(); } - }); - } + } + }); +} // --- Работа с cookie --- function setCookie(name, value, days) { @@ -304,36 +322,39 @@ jQuery(document).ready(function($) { } // Обновление фрагментов корзины - function updateCartFragment() { - $.ajax({ - type: 'POST', - url: woocommerce_params.ajax_url, - data: { - action: 'get_cart_fragment' - }, - beforeSend: function() { - $('#modal-basket').addClass('loading'); - }, - complete: function() { - $('#modal-basket').removeClass('loading'); - }, - success: function(response) { - console.log(response) - if (response.success) { - $('#modal-basket-content').html(response.data.contents); - $('.modal-block-price__price').html(response.data.total); - $('.mini-profile__button--counter').text(response.data.count); - if(response.data.count > 0){ - $('.mini-profile__button--counter').removeClass('disabled') - } - else( - $('.mini-profile__button--counter').addClass('disabled') - ) - +function updateCartFragment() { + $.ajax({ + type: 'POST', + url: woocommerce_params.ajax_url, + data: { + action: 'get_cart_fragment' + }, + beforeSend: function() { + $('#modal-basket').addClass('loading'); + }, + complete: function() { + $('#modal-basket').removeClass('loading'); + }, + success: function(response) { + console.log(response); + if (response.success) { + $('#modal-basket-content').html(response.data.contents); + $('.modal-block-price__price').html(response.data.total); + $('.mini-profile__button--counter').text(response.data.count); + if (response.data.count > 0) { + $('.mini-profile__button--counter').removeClass('disabled'); + $('.proceed-to-checkout').css('display', ''); // Показываем кнопку, если есть товары + } else { + $('.mini-profile__button--counter').addClass('disabled'); + $('.proceed-to-checkout').css('display', 'none'); // Скрываем кнопку, если корзина пуста } } - }); - } + }, + error: function(xhr, status, error) { + console.error('AJAX error:', error); + } + }); +} // Добавляем спиннер на кнопку 'Добавить в корзину' в корзине $('body').on('click', '.add_to_cart_button', function() { 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 1091e45..dfd284e 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 @@ -1330,814 +1330,6 @@ button{ } /* counter */ -/* modal */ -.modal{ - position: fixed; - top: 0; - left: 0; - - padding: 20px; - - width: 100%; - height: 100%; - - background: rgba(0, 0, 0, 0.25); - - z-index: 200; - - opacity: 0; - transition: opacity .2s ease-out; - pointer-events: none; - - display: flex; - justify-content: center; - align-items: center; - - overflow-y: auto; -} -.modal.active{ - opacity: 1; - pointer-events: auto; -} -.modal__notification{} -.form__button-mobile{ - display: none; -} -.modal__aside{ - position: fixed; - top: 0; - right: 0; - - width: 0; - height: 100%; - - overflow: hidden; - transition: width .4s ease-out; -} -.modal__item{ - height: 100%; - - padding: 24px; - - background: var(--background-white); - - position: relative; - - display: none; - - filter: blur(10px); - transition: filter .2s ease-out; -} -.modal__item--no-title{ - padding-top: 72px; -} -.modal__item.active{ - display: flex; - flex-direction: column; - justify-content: space-between; -} -.modal__close{ - position: absolute; - top: 32px; - right: 24px; - - width: 24px; - height: 24px; - - border: none; - background: none; -} -.modal__header{} -.modal__title{ - padding-right: 48px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 36px; - line-height: 111%; - text-transform: uppercase; - color: var(--text-black); -} -.modal__small-title{ - font-family: var(--font-family); - font-weight: 700; - font-size: 24px; - line-height: 100%; - text-transform: uppercase; - color: var(--text-black); -} -.modal__text{ - margin-top: 16px; - - padding-right: 10px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-0); -} -.modal__form-sub{ - margin-top: 48px; -} -.modal-form-sub__submit{ - margin-top: 64px; -} -.modal__block-button{ - margin-top: 24px; -} -.modal__button{ - margin-top: 16px; -} -.modal__button:first-child{ - margin-top: 0; -} -.modal__content{ - margin-top: 24px; -} -.modal__filter{ - width: 400px; -} -.modal__footer{ - border-top: 1px solid var(--text-6); - padding-top: 23px; -} -.modal__block-price{ - display: flex; - justify-content: space-between; - align-items: center; -} -.modal-block-price__title{ - font-family: var(--font-family); - font-weight: 600; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.modal-block-price__price{ - font-family: var(--font-family); - font-weight: 700; - font-size: 24px; - line-height: 100%; - text-transform: uppercase; - text-align: right; - color: var(--text-black); -} -.modal-block-price__price::after{ - content: 'Р'; -} -.modal__basket{ - width: 600px; -} -.modal__to-know, -.modal__to-know-submit{ - width: 412px; -} - -.modal-basket__item{ - padding-top: 23px; - padding-right: 15px; - padding-bottom: 24px; - - display: flex; - - border-top: 1px solid var(--background-grey); - - position: relative; -} -.modal-basket__item::before{ - content: ''; - - position: absolute; - top: 24px; - right: 6px; - - width: 24px; - aspect-ratio: 1; - - background-image: url(../img/svg/main/basket.svg); - background-repeat: no-repeat; - background-position: center; - - cursor: pointer; - - transition: opacity .2s ease-out; -} -.modal-basket__item:hover .modal-basket__item::before{ - opacity: .8; -} -.modal-basket__item--return{ - padding-right: 5px; - - display: flex; - justify-content: space-between; - align-items: center; -} -.modal-basket__item--return .modal-basket-item__title{ - padding-right: 10px; -} -.modal-basket__item--return::before{ - display: none; -} -.modal-basket-item__return{ - border-radius: 20px; - padding: 4px 24px; - - font-family: var(--font-family); - font-weight: 600; - font-size: 20px; - line-height: 120%; - color: var(--text-white); - - background: var(--background-black); - - border: none; -} -.modal-basket-item__block-image{ - width: 128px; - aspect-ratio: 1; - - display: flex; - justify-content: center; - align-items: center; -} -.modal-basket-item__image{ - width: 96px; - aspect-ratio: 1; - - object-fit: contain; -} -.modal-basket-item__content{ - margin-left: 16px; -} -.modal-basket-item__title{ - padding-right: 40px; - - font-family: var(--font-family); - font-weight: 500; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.modal-basket-item__sub-title{ - margin-top: 8px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 12px; - line-height: 133%; - color: var(--text-black); -} -.modal-basket-item__control{ - margin-top: 24px; - - display: flex; - justify-content: space-between; - align-items: center; -} -.modal-basket-item__price{ - font-family: var(--font-family); - font-weight: 600; - font-size: 20px; - line-height: 120%; - text-align: right; - color: var(--text-black); -} -.modal-basket-item__price::after{ - content: 'Р'; - - padding-left: 4px; -} -.modal__basket .modal__header{ - height: calc(100% - 92px); - margin-bottom: -36px; -} -.modal__basket .modal__content{ - height: calc(100% - 100px); - overflow-x: hidden; - -} -.modal__basket .modal__content::-webkit-scrollbar { - width: 7px; - background-color: #f9f9fd; -} -.modal__basket .modal__content::-webkit-scrollbar-thumb { - background-color: var(--background-black); - border-radius: 2px; -} - -.modal-form{ - margin: auto; - - width: 600px; - - padding: 24px; - - border-radius: 20px; - - position: relative; - - display: none; -} -.modal-form.active{ - display: block; -} -.modal-form--white{ - border: 1px solid var(--background-black); - background: var(--background-white); -} -.modal-form--green-gradient{ - background: var(--gradient-blue); -} -.modal-form--width-584{ - width: 584px; -} -.modal-form--cdek{ - width: 836px; -} -.modal-form__close{ - position: absolute; - top: 24px; - right: 24px; - - width: 24px; - aspect-ratio: 1; - - border: none; - background: none; - background-image: url(../img/svg/main/black-x.svg); - background-repeat: no-repeat; - background-size: 24px; - background-position: center; - - transition: opacity .2s ease-out; - - z-index: 10; -} -.modal-form__close--white{ - background-image: url(../img/svg/main/white-x.svg); -} -.modal-form__close:hover{ - opacity: .8; -} -.modal-form__button-close{} -.modal-form__title{ - padding-right: 50px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 26px; - line-height: 123%; - text-transform: uppercase; - color: var(--text-dark); -} -.modal-form__text--center{ - text-align: center; -} -.modal-form__text--center-pc{ - text-align: center; -} -.modal-form__title--green-gradient{ - background: var(--gradient-blue); - background-clip: text; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} -.modal-form__title--white{ - color: var(--text-white); -} -.modal-form__element{ - margin-top: 24px; -} -.modal-form__element--center{ - display: flex; - justify-content: center; -} -.modal-form__element--top-40{ - margin-top: 40px; -} -.modal-form__text{ - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -.modal-form__text--weight-500{ - font-weight: 500; -} -.modal-form__text--white{ - color: var(--text-white); -} -.modal-form__img{ - width: 100%; - height: 360px; - - object-fit: contain; -} -.modal-form__content{ - margin-top: 40px; -} -.modal-form-content__line{ - margin-top: 24px; -} -.modal-form-content__line:first-child{ - margin-top: 0; -} -.modal-form-content__line--two{ - display: flex; - justify-content: space-between; -} -.modal-form-content__line--two-mobile{ - display: flex; - justify-content: space-between; -} -.modal-form-content__line--two-mobile .modal-form-content-line__element{ - width: calc(50% - 12px); -} -.modal-form-content-line__element{ - position: relative; -} -.modal-form-content-line__element--arrow::after{ - content: ''; - - position: absolute; - right: 16px; - bottom: 16px; - - width: 16px; - height: 16px; - - background-image: url(../img/svg/main/arrow-right-input.svg); - - pointer-events: none; -} -.modal-form-content__line--two .modal-form-content-line__element{ - width: calc(50% - 12px); -} -.modal-form-content__line--three{ - display: flex; -} -.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){ - width: 85px; - - flex-shrink: 0; -} -.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){ - margin-left: 8px; - - width: 100%; -} -.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){ - margin-left: 8px; - - width: 85px; - - flex-shrink: 0; -} -.modal-form-content__line--margin-top-16{ - margin-top: 16px; -} -.modal-form__buttons{ - margin-top: 32px; -} -.modal-form__buttons--two{ - display: flex; - justify-content: space-between; - align-items: center; -} - -.modal-form__buttons--two button, -.modal-form__buttons--two input{ - width: calc(50% - 20px); -} -.modal-map{ - margin: auto; - - width: 1105px; - - display: none; - - border-radius: 24px; - border: none; -} -.modal-map.active{ - display: flex; -} -.modal-map__left{ - width: 600px; - - padding: 24px; - - position: relative; -} -.modal-map__control{ - margin: 38px -12px -12px -12px; - - display: flex; -} -.modal-map__control--delivery{ - margin-top: 12px; -} -.modal-map-control__item{ - margin: 12px; - - padding: 2px; - - width: calc(50% - 24px); - - background: var(--background-9); - border-radius: 20px; - border: none; -} -.modal-map-control__item.active{ - background: var(--gradient-blue); -} -.modal-map-control__item.active .form-input-radio__circle::before{ - content: ''; - position: absolute; - top: 4px; - left: 4px; - width: 12px; - aspect-ratio: 1; - border-radius: 50%; - background: var(--gradient-blue); -} -.modal-map-control-item__content{ - padding: 14px; - - border-radius: 18px; - - background: var(--background-white); -} -.modal-map-control-item__header{ - display: flex; - align-items: center; -} -.modal-map-control-item__circle{ - padding: 2px; - width: 20px; - aspect-ratio: 1; - border-radius: 50%; - background: var(--background-9); - position: relative; -} -.modal-map-control-item__input{ - display: none; -} -.modal-map-control-item-circle__content{ - width: 16px; - aspect-ratio: 1; - border-radius: 50%; - background: var(--background-white); -} -.modal-map-control__item.active .modal-map-control-item__circle{ - background: var(--gradient-blue); -} -.modal-map-control__item.active .modal-map-control-item__circle::before{ - content: ''; - position: absolute; - top: 4px; - left: 4px; - width: 12px; - aspect-ratio: 1; - border-radius: 50%; - background: var(--gradient-blue); -} -.modal-map-control-item__title{ - margin-left: 8px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-dark); -} -.modal-map-control-item__description{ - margin-top: 16px; -} -.modal-map-control-item__time{ - font-family: var(--font-family); - font-weight: 500; - font-size: 16px; - line-height: 125%; - color: var(--text-black); - - text-align: start; -} -.modal-map-control-item__price{ - margin-top: 8px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 12px; - line-height: 133%; - color: var(--text-6); - - text-align: start; -} -.modal-map__form{ - margin-top: 24px; -} -.modal-map-form__hidden{ - -} -.modal-map-form__button{ - margin-top: 83px; -} -.modal-map-form__sub-button{ - display: none; -} -.modal-map__right{ - padding: 16px 0px 16px 16px; -} -.modal-map__map{ - border: 2px solid var(--background-9); - border-radius: 16px; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} -.modal-map__map iframe{ - height: 650px; -} -.modal__age{ - -} -.modal__age > div{ - display: none; -} -.modal__age > div.active{ - display: flex; -} -/* modal */ - -/* toggle */ -.toggle{ - padding-top: 26px; - padding-bottom: 25px; - - border-bottom: 1px solid var(--text-3); - - position: relative; -} -.toggle::after{ - content: ''; - - position: absolute; - top: 24px; - right: 0; - - width: 24px; - aspect-ratio: 1; - - background-image: url(../img/svg/main/black-x.svg); - transform: rotate(45deg); - transition: transform .2s; - pointer-events: none; -} -.toggle.active::after{ - transform: rotate(0deg); -} -.toggle__title{ - padding-right: 30px; - - font-family: var(--font-family); - font-weight: 700; - font-size: 16px; - line-height: 125%; - color: var(--text-black); - - cursor: pointer; -} -.toggle__block-content{ - height: 0; - overflow: hidden; - - transition: height .2s ease-out; -} -.toggle__content{ - padding-top: 24px; -} -.toggle-content__item{ - margin: 12px -12px -12px -12px; - - display: flex; - align-items: center; - flex-wrap: wrap; -} -.toggle-content__item:first-child{ - margin-top: 0; -} -.toggle-content__element{ - margin: 12px; -} -.toggle-content__element--width-perc-100{ - width: 100%; -} -.toggle-content__element--width-perc-50{ - width: calc(50% - 24px); -} -.toggle__text{ - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-black); -} -/* toggle */ - -/* checkbox */ -.checkbox{ - display: flex; - align-items: center; - - cursor: pointer; -} -.checkbox__state{ - border-radius: 4px; - - width: 18px; - height: 18px; - - border: 2px solid var(--background-black); - background: var(--background-white); - - flex-shrink: 0; -} -.checkbox.active .checkbox__state{ - background-color: var(--background-black); - - background-image: url(../img/svg/main/arrow-selected-white.svg); - background-repeat: no-repeat; - background-position: center; -} -.checkbox__input{ - display: none; -} -.checkbox__label{ - padding-left: 8px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-dark); - - cursor: pointer; -} -.checkbox__label a{ - color: #76ce75; - - text-decoration: none; -} -.checkbox--small{ - margin-top: 24px; -} -.checkbox--small .checkbox__label{ - padding-left: 24px; - - font-weight: 500; - font-size: 12px; - line-height: 133%; -} -/* checkbox */ - -/* radio */ -.radio{ - display: flex; - align-items: center; -} -.radio__input{ - width: 18px; - aspect-ratio: 1; - - accent-color: var(--background-black); - - cursor: pointer; -} -.radio__label{ - padding-left: 8px; - - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 120%; - color: var(--text-dark); - - cursor: pointer; -} -/* radio */ - - -@keyframes slidein { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} .subscription{ @@ -2230,4 +1422,142 @@ button{ .cabinet-card-order-payment__price span{ font-size: 12px; +} + + + +.wcsatt-add-to-subscription-wrapper, + form.cart .quantity, + .detail__content .in-stock, + .wcsatt-options-prompt-label-subscription, + .wcsatt-options-product-dropdown { + display: none; + } + .wcsatt-options-product-wrapper { + display: block!important; + } + form.cart .single_add_to_cart_button { + margin: 8px; + min-width: 345.89px; + height: 56px; + padding: 16px 24px 16px 24px; + font-weight: 700; + text-align: center; + position: relative; + background: var(--gradient-turquoise); + border: none; + transition: opacity .2s ease-out; + font-family: var(--font-family); + font-size: 20px; + line-height: 120%; + color: var(--text-black); + border-radius: 20px; + text-transform: none; + cursor: pointer; + } + form.cart .single_add_to_cart_button:hover { + opacity: 0.8; + } + .subscription-option-details span { + color: #000; + cursor: pointer; + } + ul.wcsatt-options-product, .wcsatt-options-product-dropdown { + margin: 0; + } + .wcsatt-options-wrapper input, .wcsatt-add-to-subscription-wrapper input { + width: 18px; + aspect-ratio: 1; + accent-color: var(--background-black); + cursor: pointer; + } + .subscription-option label { + display: flex; + align-items: center; + gap: 5px; + } + + form.cart { + margin: 25px 0 -48px; + } + ul.wcsatt-options-product--hidden, .wcsatt-options-product-dropdown--hidden { + display: block!important; + } + .detail-block__form{ + margin-top: 48px; + + display: flex; + flex-direction: column; + } + + + .wcsatt-options-prompt-text{ + font-family: 'Craftwork Grotesk'; + font-style: normal; + font-weight: 700; + font-size: 20px; + line-height: 24px; + text-transform: uppercase; + color: #000000; +} + +.subscription-option-details, .wcsatt-options-prompt-action, .subs-text-title{ + font-size: 20px; + line-height: 24px; + display:flex; + gap: 12px; + align-items: center; +} +.subs-text{ + +max-width: 322px; +font-family: 'Craftwork Grotesk'; +font-style: normal; +font-weight: 500; +font-size: 16px; +line-height: 20px; +margin-bottom: 20px; +} +input:checked + .subscription-option-details::before, input:checked + .wcsatt-options-prompt-action::before{ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' fill='white'/%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' stroke='url(%23paint0_radial_11890_46040)' stroke-width='2'/%3E%3Ccircle cx='10' cy='10' r='6' fill='url(%23paint1_radial_11890_46040)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_11890_46040' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(19 1) rotate(135) scale(25.4558 34.7538)'%3E%3Cstop stop-color='%23188892'/%3E%3Cstop offset='0.45' stop-color='%231EA49C'/%3E%3Cstop offset='0.9' stop-color='%2376CE75'/%3E%3Cstop offset='1' stop-color='%23BBE38D'/%3E%3C/radialGradient%3E%3CradialGradient id='paint1_radial_11890_46040' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(16 4) rotate(135) scale(16.9706 23.1692)'%3E%3Cstop stop-color='%23188892'/%3E%3Cstop offset='0.45' stop-color='%231EA49C'/%3E%3Cstop offset='0.9' stop-color='%2376CE75'/%3E%3Cstop offset='1' stop-color='%23BBE38D'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E"); +} +.subscription-option-details::before, .wcsatt-options-prompt-action::before{ + content: ''; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' fill='white'/%3E%3Cpath d='M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z' stroke='%23121212' stroke-width='2'/%3E%3C/svg%3E"); + height: 20px; width: 20px; + +} + +.wcsatt-options-wrapper input, .wcsatt-add-to-subscription-wrapper input { + aspect-ratio: 1; + accent-color: var(--background-black); + cursor: pointer; + height: 0; + width: 0; + position: absolute; + opacity: 0; +} + +.subscription-option .amount { + color: #1A1A1A; + font-weight: 600; +} + +.subscription-option del .amount { + color: #bbb; + font-weight: 400; + font-size: .8em; + +} + +.subscription-option del .woocommerce-Price-amount.amount, .subscription-option del .woocommerce-Price-currencySymbol{ + text-decoration: line-through !important; +} + +.woocommerce-Price-amount.amount{ + font-size: 1.15em; +} + +.detail #wc-stripe-express-checkout-element{ + display: none !important; } \ No newline at end of file diff --git a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-product.js b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-product.js index 2508270..32043ad 100644 --- a/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-product.js +++ b/wp-content/themes/cosmopet/modules/shop/components/single-product/assets/js/gp-product.js @@ -107,4 +107,46 @@ const detailCatalot = new Swiper('.detail__catalot', { }); -// detail catalog \ No newline at end of file +// detail catalog +// +// +// +jQuery(document).ready(function($) { + // Основные радио-кнопки выбора типа покупки + const $oneTimeRadio = $('input[value="no"][name="subscribe-to-action-input"]'); + const $subscribeRadio = $('input[value="yes"][name="subscribe-to-action-input"]'); + + // Все чекбоксы вариантов подписки + const $subscriptionOptions = $('.wcsatt-options-product input[type="radio"]'); + + // Обработчик для One-time + $oneTimeRadio.on('change', function() { + if ($(this).is(':checked')) { + // Снимаем выделение со всех вариантов подписки + $subscriptionOptions.prop('checked', false); + } + }); + + // Обработчик для Subscribe + $subscribeRadio.on('change', function() { + if ($(this).is(':checked')) { + // Снимаем выделение с One-time + $oneTimeRadio.prop('checked', false); + + // Если ни один вариант подписки не выбран, выбираем первый + if ($subscriptionOptions.filter(':checked').length === 0) { + $subscriptionOptions.first().prop('checked', true); + } + } + }); + + // Обработчик для вариантов подписки + $subscriptionOptions.on('change', function() { + if ($(this).is(':checked')) { + // Снимаем выделение с One-time + $oneTimeRadio.prop('checked', false); + // Активируем Subscribe + $subscribeRadio.prop('checked', true); + } + }); +}); \ 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 c1bc729..25ad8b8 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 @@ -108,14 +108,9 @@ {% endif %} {% endif %} - - -
- - {{ function('pll_e', 'Добавить в корзину') }} -
+ - + {{ function('do_action', 'woocommerce_' ~ product.get_type() ~ '_add_to_cart') }}

diff --git a/wp-content/themes/cosmopet/templates/modal/basket.twig b/wp-content/themes/cosmopet/templates/modal/basket.twig index 4fb1488..b19d3c4 100644 --- a/wp-content/themes/cosmopet/templates/modal/basket.twig +++ b/wp-content/themes/cosmopet/templates/modal/basket.twig @@ -15,33 +15,30 @@

- {% if not fn('WC').cart.is_empty %}
-
-

{{ __('Total', 'woocommerce') }}

-

- {{ fn('wc_cart_totals_order_total_html') }} -

-
- -
-
- - {{ __('Proceed to checkout', 'woocommerce') }} + {% if not fn('WC').cart.is_empty and fn('WC').cart.get_total('raw') > 0 %} +
+

{{ __('Total', 'woocommerce') }}

+

+ {{ fn('wc_cart_totals_order_total_html') }} +

+
+ +
+
+ + {{ __('Proceed to checkout', 'woocommerce') }} + +
+
+ {% else %} +
+ +
-
-
- {% else %} -
-
- - - -
+ {% endif %}
- - {% endif %}
\ No newline at end of file diff --git a/wp-content/themes/cosmopet/templates/shop/cart-contents.twig b/wp-content/themes/cosmopet/templates/shop/cart-contents.twig index 1b7d181..e239c2a 100644 --- a/wp-content/themes/cosmopet/templates/shop/cart-contents.twig +++ b/wp-content/themes/cosmopet/templates/shop/cart-contents.twig @@ -1,5 +1,5 @@ {% if cart.is_empty %} -

{{ function('pll_e', 'Ваша корзина пуста') }}

+

{{ function('pll_e', 'Your cart is empty') }}

{% else %} {% for item_key, item in cart.get_cart %} {% set product = item.data %}