diff --git a/.history/promt_20260402130709.md b/.history/promt_20260402130709.md new file mode 100644 index 00000000..694bd98a --- /dev/null +++ b/.history/promt_20260402130709.md @@ -0,0 +1,205 @@ +Проанализируй текущую страницу корзины интернет-магазина доставки воды в Севастополе (WordPress + WooCommerce) и предложи полный редизайн с упором на увеличение конверсии. + +Текущая проблема: страница выглядит аккуратно, но перегружена, слабо мотивирует к оформлению заказа и не создает ощущения срочности и простоты. + +Цель: сделать корзину максимально простой, быстрой и продающей. + +--- + +# 1. Основные задачи редизайна + +* Упростить интерфейс (убрать перегруз) +* Ускорить принятие решения +* Усилить CTA (кнопки) +* Добавить триггеры срочности и выгоды +* Увеличить средний чек (upsell) +* Сохранить SEO-ценность страницы + +--- + +# 2. UX-переработка (КРИТИЧНО) + +## 2.1. Левый блок (полностью пересобрать) + +Текущее состояние: + +* перегружен текстом и карточками + +Задача: +сделать компактный продающий блок: + +Структура: + +* H1: + «Корзина — доставка воды в Севастополе» + +* Подзаголовок: + «Доставим за 2–4 часа на дом или в офис» + +* 2–3 преимущества: + + * Бесплатная доставка от X руб + * Работаем ежедневно + * Чистая питьевая вода + +* 1 CTA: + «Оформить заказ за 30 секунд» + +--- + +## 2.2. Убрать лишнее + +Удалить: + +* дублирующие тексты +* длинные объяснения +* второстепенные карточки + +Принцип: +👉 1 экран = 1 действие + +--- + +## 2.3. Правый блок (усилить) + +Оставить: + +* список товаров +* количество +* итог + +Добавить: + +* блок «Добавьте еще»: + + * «Добавьте 1 бутыль — доставка бесплатно» + * «Чаще всего берут: помпа» + +--- + +## 2.4. Sticky итог + +Сделать фиксированный блок: + +* сумма +* доставка +* кнопка + +--- + +# 3. Усиление CTA + +Заменить все кнопки: + +❌ «Перейти к оформлению заказа» +✔ «Оформить заказ за 30 секунд» +✔ «Получить воду сегодня» + +Добавить: + +* микро-текст под кнопкой: + «Без регистрации» + +--- + +# 4. Триггеры конверсии + +Добавить: + +## 4.1. Срочность + +* «Доставим сегодня при заказе до 18:00» +* «Осталось 5 слотов на сегодня» + +## 4.2. Социальное доказательство + +* «Более 1000 клиентов в Севастополе» + +## 4.3. Гарантия + +* «Если не понравится — вернем деньги» + +--- + +# 5. Upsell (увеличение чека) + +Добавить блок: + +«Рекомендуем добавить» + +* Помпа +* Стаканы +* Малые бутылки + +С текстом: +«Чаще всего заказывают вместе» + +--- + +# 6. Быстрый заказ (КРИТИЧНО) + +Добавить: + +* поле «Телефон» +* кнопка «Заказать в 1 клик» + +Интеграция: + +* WooCommerce / кастомный AJAX + +--- + +# 7. SEO-оптимизация + +## 7.1. H1 + +* «Корзина доставки воды в Севастополе» + +## 7.2. Текст (короткий, 500–800 символов) + +Добавить внизу: + +Ключи: + +* доставка воды Севастополь +* заказать воду 19 литров +* вода на дом + +--- + +# 8. Мобильная версия + +Сделать: + +* CTA на первом экране +* Sticky кнопка +* Убрать лишний текст + +--- + +# 9. WooCommerce реализация + +Учитывать: + +* hooks: + + * woocommerce_cart_totals_before_order_total + * woocommerce_after_cart_table + +* кастомизация: + + * functions.php + * AJAX обновление + +--- + +# 10. Результат + +На выходе предоставить: + +1. Новый UX-скелет страницы +2. Готовые тексты (все блоки) +3. Новый CTA +4. Upsell блок +5. SEO текст +6. Рекомендации по внедрению в WooCommerce diff --git a/promt.md b/promt.md index 36f932c3..694bd98a 100644 --- a/promt.md +++ b/promt.md @@ -1,258 +1,205 @@ -Создай детальную структуру, UX, тексты и технические требования для страницы **«Корзина и Оформление заказа»** на сайте доставки воды в Севастополе, реализованном на WordPress с использованием WooCommerce. +Проанализируй текущую страницу корзины интернет-магазина доставки воды в Севастополе (WordPress + WooCommerce) и предложи полный редизайн с упором на увеличение конверсии. -Цель: максимальная конверсия оформления заказа + SEO-оптимизация под локальные запросы. +Текущая проблема: страница выглядит аккуратно, но перегружена, слабо мотивирует к оформлению заказа и не создает ощущения срочности и простоты. + +Цель: сделать корзину максимально простой, быстрой и продающей. --- -# 1. Техническая база (ВАЖНО) +# 1. Основные задачи редизайна -Учитывать: - -* CMS: WordPress - -* E-commerce: WooCommerce - -* Использовать стандартные хуки WooCommerce: - - * woocommerce_before_cart - * woocommerce_after_cart - * woocommerce_checkout_fields - * woocommerce_review_order_before_submit - -* Поддержка: - - * AJAX обновления корзины - * Кастомизация checkout (через functions.php или плагин типа Checkout Field Editor) +* Упростить интерфейс (убрать перегруз) +* Ускорить принятие решения +* Усилить CTA (кнопки) +* Добавить триггеры срочности и выгоды +* Увеличить средний чек (upsell) +* Сохранить SEO-ценность страницы --- -# 2. UX-структура страницы +# 2. UX-переработка (КРИТИЧНО) -## 2.1. Корзина (Cart) +## 2.1. Левый блок (полностью пересобрать) -Отобразить: +Текущее состояние: -* Список товаров: +* перегружен текстом и карточками - * Название (например: «Вода 19л артезианская») - * Миниатюра - * Цена - * Количество (input + кнопки +/-) - * Подсчет суммы -* Удаление товара (AJAX без перезагрузки) +Задача: +сделать компактный продающий блок: -Дополнительно: +Структура: -* Кросс-селл (WooCommerce related products): +* H1: + «Корзина — доставка воды в Севастополе» - * помпы - * стаканы - * кулеры +* Подзаголовок: + «Доставим за 2–4 часа на дом или в офис» -* Сообщения: +* 2–3 преимущества: - * «Добавьте еще 1 бутыль — доставка бесплатно» - * Минимальный заказ (если есть) - ---- - -## 2.2. Sticky блок «Итого» - -* Подсчет: - - * Сумма заказа - * Доставка (динамически через shipping zones WooCommerce) - * Залог за тару (как отдельная позиция fee) - -* УТП: - - * Доставка воды по Севастополю за 2–4 часа + * Бесплатная доставка от X руб * Работаем ежедневно - * Чистая сертифицированная вода + * Чистая питьевая вода + +* 1 CTA: + «Оформить заказ за 30 секунд» --- -## 2.3. Checkout (Оформление заказа) +## 2.2. Убрать лишнее -Оптимизировать стандартный WooCommerce checkout: +Удалить: -### Поля: +* дублирующие тексты +* длинные объяснения +* второстепенные карточки -* Имя (billing_first_name) -* Телефон (billing_phone) — обязательное -* Адрес (кастомизированный): - - * Город (по умолчанию Севастополь) - * Улица - * Дом - * Квартира - * Подъезд / этаж - * Комментарий - -Удалить лишние поля: - -* company -* postcode (если не нужен) +Принцип: +👉 1 экран = 1 действие --- -### Доставка: +## 2.3. Правый блок (усилить) -* Использовать WooCommerce Shipping Zones: +Оставить: - * Севастополь — фикс или бесплатно от суммы -* Выбор: +* список товаров +* количество +* итог - * «Сегодня» - * «Завтра» - * Интервалы времени +Добавить: -(реализовать через кастомные checkout поля) +* блок «Добавьте еще»: + + * «Добавьте 1 бутыль — доставка бесплатно» + * «Чаще всего берут: помпа» --- -### Оплата: +## 2.4. Sticky итог -* Наличными -* Картой курьеру -* Онлайн (WooCommerce payment gateway) +Сделать фиксированный блок: + +* сумма +* доставка +* кнопка --- -## 2.4. CTA +# 3. Усиление CTA -* Кнопка: «Оформить заказ» -* Добавить urgency: +Заменить все кнопки: - * «Доставим сегодня при заказе до 18:00» +❌ «Перейти к оформлению заказа» +✔ «Оформить заказ за 30 секунд» +✔ «Получить воду сегодня» + +Добавить: + +* микро-текст под кнопкой: + «Без регистрации» --- -# 3. Логика и функции +# 4. Триггеры конверсии -## 3.1. Кастомная логика: +Добавить: -* Добавить fee: +## 4.1. Срочность - * залог за бутыль (если нет обмена) -* Условие: +* «Доставим сегодня при заказе до 18:00» +* «Осталось 5 слотов на сегодня» - * бесплатная доставка от X руб -* Сохранение корзины (cookies / localStorage) +## 4.2. Социальное доказательство + +* «Более 1000 клиентов в Севастополе» + +## 4.3. Гарантия + +* «Если не понравится — вернем деньги» --- -## 3.2. Upsell механики: +# 5. Upsell (увеличение чека) -* Перед checkout: +Добавить блок: - * «Добавьте помпу — удобно наливать воду» -* После добавления товара: +«Рекомендуем добавить» - * popup / notice +* Помпа +* Стаканы +* Малые бутылки + +С текстом: +«Чаще всего заказывают вместе» --- -## 3.3. Повтор заказа: +# 6. Быстрый заказ (КРИТИЧНО) -* Если пользователь авторизован: +Добавить: - * кнопка «Повторить прошлый заказ» +* поле «Телефон» +* кнопка «Заказать в 1 клик» + +Интеграция: + +* WooCommerce / кастомный AJAX --- -# 4. SEO-оптимизация +# 7. SEO-оптимизация -## 4.1. Meta (через Yoast SEO или RankMath) +## 7.1. H1 -Сгенерировать: +* «Корзина доставки воды в Севастополе» -* Title: +## 7.2. Текст (короткий, 500–800 символов) - * «Оформить заказ воды в Севастополе — доставка 19л на дом» -* Description: - - * «Быстрая доставка питьевой воды по Севастополю. Закажите воду 19 литров с доставкой на дом или в офис. Удобная оплата.» - ---- - -## 4.2. SEO-текст (внизу страницы) - -Написать 1200–1500 символов: +Добавить внизу: Ключи: * доставка воды Севастополь * заказать воду 19 литров -* вода на дом Севастополь -* доставка питьевой воды - -LSI: - -* Гагаринский район -* Ленинский район -* Нахимовский район - -Требования: - -* естественный текст -* без переспама -* с акцентом на удобство заказа +* вода на дом --- -## 4.3. Schema.org +# 8. Мобильная версия -Добавить: +Сделать: -* LocalBusiness -* Product -* Offer -* AggregateRating +* CTA на первом экране +* Sticky кнопка +* Убрать лишний текст --- -# 5. UX и конверсия +# 9. WooCommerce реализация -Добавить: +Учитывать: -* Валидация формы (JS) -* Маска телефона -* Автозаполнение адреса (Dadata или аналог) -* Индикатор прогресса: +* hooks: - * Корзина → Оформление → Готово + * woocommerce_cart_totals_before_order_total + * woocommerce_after_cart_table + +* кастомизация: + + * functions.php + * AJAX обновление --- -# 6. Сценарии ошибок - -Продумать: - -* Пустая корзина: - - * CTA «Перейти в каталог» -* Ошибка оплаты -* Нет доставки в выбранное время -* Неверный телефон - ---- - -# 7. Мобильная версия (КРИТИЧНО) - -* Sticky итог -* Большие кнопки -* Минимум полей -* Autofill - ---- - -# 8. Результат +# 10. Результат На выходе предоставить: -1. Полную структуру страницы -2. Готовые тексты UI -3. SEO (meta + текст) -4. PHP/JS рекомендации для WooCommerce -5. UX-решения для повышения конверсии +1. Новый UX-скелет страницы +2. Готовые тексты (все блоки) +3. Новый CTA +4. Upsell блок +5. SEO текст +6. Рекомендации по внедрению в WooCommerce diff --git a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css index 5250c160..48b4befe 100644 --- a/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css +++ b/wp-content/themes/twentytwentyfour/assets/css/test1-checkout.css @@ -199,6 +199,37 @@ body:is(.test1-checkout-page, .test1-cart-page) { line-height: 1.5; } +.cart-trust-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 14px; + margin-top: 18px; +} + +.cart-trust-card { + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.62); + border: 1px solid rgba(255, 255, 255, 0.78); + box-shadow: 0 18px 48px rgba(8, 31, 79, 0.08); +} + +.cart-trust-card span { + display: inline-block; + margin-bottom: 8px; + color: var(--premium-blue); + font-size: 12px; + letter-spacing: 0.12em; + text-transform: uppercase; + font-weight: 800; +} + +.cart-trust-card strong { + display: block; + color: var(--premium-navy); + line-height: 1.55; +} + .premium-stack { display: grid; gap: 20px; @@ -298,6 +329,16 @@ body:is(.test1-checkout-page, .test1-cart-page) { line-height: 1.45; } +.cart-side-note { + margin-top: 18px; + padding: 18px; + border-radius: 20px; + background: rgba(255, 255, 255, 0.68); + border: 1px solid rgba(13, 79, 214, 0.08); + color: var(--text); + line-height: 1.7; +} + .premium-form-card { border-radius: 30px; box-shadow: 0 34px 100px rgba(8, 31, 79, 0.16); @@ -678,6 +719,27 @@ body:is(.test1-checkout-page, .test1-cart-page) { line-height: 1.7; } +.water-cart-summary-box { + margin-bottom: 18px; + padding: 18px; + border-radius: 22px; + background: linear-gradient(145deg, rgba(8, 31, 79, 0.92), rgba(13, 79, 214, 0.82)); + color: #fff; + box-shadow: 0 24px 60px rgba(8, 31, 79, 0.16); +} + +.water-cart-summary-usp { + margin-bottom: 10px; + font-weight: 800; +} + +.water-cart-summary-list { + margin: 0; + padding-left: 18px; + color: rgba(255, 255, 255, 0.8); + line-height: 1.7; +} + .water-empty-cart-cta { margin-top: 16px; } @@ -687,6 +749,35 @@ body:is(.test1-checkout-page, .test1-cart-page) { top: 104px; } +:is(.test1-checkout-page, .test1-cart-page) .woocommerce-cart-form { + position: relative; +} + +:is(.test1-cart-page) .premium-form-card.is-loading::after { + content: ""; + position: absolute; + inset: 0; + background: rgba(255, 255, 255, 0.52); + backdrop-filter: blur(3px); + z-index: 4; +} + +:is(.test1-cart-page) .premium-form-card.is-loading::before { + content: "Обновляем корзину"; + position: absolute; + top: 24px; + right: 24px; + z-index: 5; + padding: 10px 14px; + border-radius: 999px; + background: linear-gradient(135deg, var(--premium-navy), var(--premium-blue)); + color: #fff; + font-size: 12px; + letter-spacing: 0.08em; + text-transform: uppercase; + font-weight: 800; +} + :is(.test1-checkout-page, .test1-cart-page) .cross-sells { margin-top: 24px; padding: 24px; @@ -700,6 +791,20 @@ body:is(.test1-checkout-page, .test1-cart-page) { color: var(--premium-navy); } +:is(.test1-checkout-page, .test1-cart-page) .cross-sells .products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + gap: 16px; +} + +:is(.test1-checkout-page, .test1-cart-page) .cross-sells .product { + margin: 0; + padding: 18px; + border-radius: 22px; + background: rgba(255, 255, 255, 0.72); + border: 1px solid rgba(13, 79, 214, 0.08); +} + :is(.test1-checkout-page, .test1-cart-page) .quantity { display: inline-flex; align-items: center; @@ -711,6 +816,22 @@ body:is(.test1-checkout-page, .test1-cart-page) { text-align: center; } +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-name { + font-weight: 800; + color: var(--premium-navy); +} + +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-subtotal, +:is(.test1-checkout-page, .test1-cart-page) .shop_table .product-price { + color: var(--premium-navy); + font-weight: 800; +} + +.water-order-total-value .amount { + font-size: 28px; + color: var(--premium-navy); +} + .quantity-button { width: 38px; height: 38px; @@ -732,6 +853,10 @@ body:is(.test1-checkout-page, .test1-cart-page) { grid-template-columns: 1fr; } + .cart-trust-grid { + grid-template-columns: 1fr; + } + :is(.test1-checkout-page, .test1-cart-page) .cart_totals { position: static; top: auto; diff --git a/wp-content/themes/twentytwentyfour/assets/js/test1-checkout.js b/wp-content/themes/twentytwentyfour/assets/js/test1-checkout.js index f4247798..f5ad1a87 100644 --- a/wp-content/themes/twentytwentyfour/assets/js/test1-checkout.js +++ b/wp-content/themes/twentytwentyfour/assets/js/test1-checkout.js @@ -1,7 +1,6 @@ (function () { const root = document.documentElement const phoneInput = document.getElementById('billing_phone') - const cartForm = document.querySelector('form.woocommerce-cart-form') const digitsOnly = value => value.replace(/\D+/g, '') @@ -40,8 +39,8 @@ }) } - const attachQuantityButtons = () => { - document.querySelectorAll('.quantity').forEach(quantity => { + const attachQuantityButtons = scope => { + scope.querySelectorAll('.quantity').forEach(quantity => { if (quantity.dataset.enhanced === 'true') { return } @@ -85,8 +84,75 @@ }) } - if (cartForm) { + const parseHTML = html => new window.DOMParser().parseFromString(html, 'text/html') + + const initCartAjax = () => { + const pageCard = document.querySelector('.test1-cart-page .premium-form-card') + const cartForm = pageCard?.querySelector('form.woocommerce-cart-form') + + if (!pageCard || !cartForm) { + return + } + let updateTimer = null + let submitIntent = null + + const setLoading = state => { + pageCard.classList.toggle('is-loading', state) + } + + const replaceCartMarkup = html => { + const nextDocument = parseHTML(html) + const nextCard = nextDocument.querySelector('.test1-cart-page .premium-form-card') + + if (!nextCard) { + window.location.reload() + return + } + + pageCard.innerHTML = nextCard.innerHTML + attachQuantityButtons(pageCard) + initCartAjax() + } + + const requestAndReplace = (url, options = {}) => { + setLoading(true) + + return window.fetch(url, { + credentials: 'same-origin', + ...options, + }) + .then(response => response.text()) + .then(html => { + replaceCartMarkup(html) + }) + .catch(() => { + window.location.reload() + }) + .finally(() => { + setLoading(false) + }) + } + + cartForm.querySelectorAll('button[name]').forEach(button => { + button.addEventListener('click', () => { + submitIntent = { name: button.name, value: button.value || '1' } + }) + }) + + cartForm.addEventListener('submit', event => { + event.preventDefault() + const formData = new window.FormData(cartForm) + + if (submitIntent?.name) { + formData.append(submitIntent.name, submitIntent.value) + } + + requestAndReplace(window.location.href, { + method: 'POST', + body: formData, + }) + }) cartForm.addEventListener('change', event => { if (!event.target.classList.contains('qty')) { @@ -99,14 +165,22 @@ return } - updateButton.disabled = false clearTimeout(updateTimer) updateTimer = window.setTimeout(() => { - updateButton.click() - }, 350) + submitIntent = { name: 'update_cart', value: updateButton.value || '1' } + cartForm.requestSubmit() + }, 250) + }) + + pageCard.querySelectorAll('.woocommerce-cart-form a.remove').forEach(link => { + link.addEventListener('click', event => { + event.preventDefault() + requestAndReplace(link.href) + }) }) } - attachQuantityButtons() + attachQuantityButtons(document) + initCartAjax() root.classList.add('test1-checkout-enhanced') })() diff --git a/wp-content/themes/twentytwentyfour/functions.php b/wp-content/themes/twentytwentyfour/functions.php index fe7b72a0..a692f39d 100644 --- a/wp-content/themes/twentytwentyfour/functions.php +++ b/wp-content/themes/twentytwentyfour/functions.php @@ -641,7 +641,7 @@ function twentytwentyfour_water_delivery_before_cart() { $remaining = max( 0, $threshold - $subtotal ); $account_url = function_exists( 'wc_get_account_endpoint_url' ) ? wc_get_account_endpoint_url( 'orders' ) : ''; ?> -
+

@@ -667,6 +667,48 @@ function twentytwentyfour_water_delivery_before_cart() { } add_action( 'woocommerce_before_cart', 'twentytwentyfour_water_delivery_before_cart', 5 ); +/** + * Rename default cross-sells heading for water delivery cart. + * + * @param string $heading Default heading. + * @return string + */ +function twentytwentyfour_water_delivery_cross_sells_heading( $heading ) { + return __( 'Добавьте к заказу помпы, стаканы и оборудование', 'twentytwentyfour' ); +} +add_filter( 'woocommerce_product_cross_sells_products_heading', 'twentytwentyfour_water_delivery_cross_sells_heading' ); + +add_filter( 'woocommerce_cart_totals_order_total_html', 'twentytwentyfour_water_delivery_cart_totals_order_total_html' ); + +/** + * Preserve Woo total html while allowing custom wrapper styling. + * + * @param string $value Current total html. + * @return string + */ +function twentytwentyfour_water_delivery_cart_totals_order_total_html( $value ) { + return '' . $value . ''; +} + +/** + * Add a sticky summary note before cart totals. + * + * @return void + */ +function twentytwentyfour_water_delivery_before_cart_totals() { + ?> +
+
+
    +
    • +
    • +
    • +
+
+
+
+
+ + +
+
+ + +
+
+ + +
+