Anton | настройка cart
This commit is contained in:
ab.an.ev@yandex.ru
205
.history/promt_20260402130709.md
Normal file
205
.history/promt_20260402130709.md
Normal file
@@ -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
|
||||||
289
promt.md
289
promt.md
@@ -1,258 +1,205 @@
|
|||||||
Создай детальную структуру, UX, тексты и технические требования для страницы **«Корзина и Оформление заказа»** на сайте доставки воды в Севастополе, реализованном на WordPress с использованием WooCommerce.
|
Проанализируй текущую страницу корзины интернет-магазина доставки воды в Севастополе (WordPress + WooCommerce) и предложи полный редизайн с упором на увеличение конверсии.
|
||||||
|
|
||||||
Цель: максимальная конверсия оформления заказа + SEO-оптимизация под локальные запросы.
|
Текущая проблема: страница выглядит аккуратно, но перегружена, слабо мотивирует к оформлению заказа и не создает ощущения срочности и простоты.
|
||||||
|
|
||||||
|
Цель: сделать корзину максимально простой, быстрой и продающей.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# 1. Техническая база (ВАЖНО)
|
# 1. Основные задачи редизайна
|
||||||
|
|
||||||
Учитывать:
|
* Упростить интерфейс (убрать перегруз)
|
||||||
|
* Ускорить принятие решения
|
||||||
* CMS: WordPress
|
* Усилить CTA (кнопки)
|
||||||
|
* Добавить триггеры срочности и выгоды
|
||||||
* E-commerce: WooCommerce
|
* Увеличить средний чек (upsell)
|
||||||
|
* Сохранить SEO-ценность страницы
|
||||||
* Использовать стандартные хуки WooCommerce:
|
|
||||||
|
|
||||||
* woocommerce_before_cart
|
|
||||||
* woocommerce_after_cart
|
|
||||||
* woocommerce_checkout_fields
|
|
||||||
* woocommerce_review_order_before_submit
|
|
||||||
|
|
||||||
* Поддержка:
|
|
||||||
|
|
||||||
* AJAX обновления корзины
|
|
||||||
* Кастомизация checkout (через functions.php или плагин типа Checkout Field Editor)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# 2. UX-структура страницы
|
# 2. UX-переработка (КРИТИЧНО)
|
||||||
|
|
||||||
## 2.1. Корзина (Cart)
|
## 2.1. Левый блок (полностью пересобрать)
|
||||||
|
|
||||||
Отобразить:
|
Текущее состояние:
|
||||||
|
|
||||||
* Список товаров:
|
* перегружен текстом и карточками
|
||||||
|
|
||||||
* Название (например: «Вода 19л артезианская»)
|
Задача:
|
||||||
* Миниатюра
|
сделать компактный продающий блок:
|
||||||
* Цена
|
|
||||||
* Количество (input + кнопки +/-)
|
|
||||||
* Подсчет суммы
|
|
||||||
* Удаление товара (AJAX без перезагрузки)
|
|
||||||
|
|
||||||
Дополнительно:
|
Структура:
|
||||||
|
|
||||||
* Кросс-селл (WooCommerce related products):
|
* H1:
|
||||||
|
«Корзина — доставка воды в Севастополе»
|
||||||
|
|
||||||
* помпы
|
* Подзаголовок:
|
||||||
* стаканы
|
«Доставим за 2–4 часа на дом или в офис»
|
||||||
* кулеры
|
|
||||||
|
|
||||||
* Сообщения:
|
* 2–3 преимущества:
|
||||||
|
|
||||||
* «Добавьте еще 1 бутыль — доставка бесплатно»
|
* Бесплатная доставка от X руб
|
||||||
* Минимальный заказ (если есть)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 2.2. Sticky блок «Итого»
|
|
||||||
|
|
||||||
* Подсчет:
|
|
||||||
|
|
||||||
* Сумма заказа
|
|
||||||
* Доставка (динамически через shipping zones WooCommerce)
|
|
||||||
* Залог за тару (как отдельная позиция fee)
|
|
||||||
|
|
||||||
* УТП:
|
|
||||||
|
|
||||||
* Доставка воды по Севастополю за 2–4 часа
|
|
||||||
* Работаем ежедневно
|
* Работаем ежедневно
|
||||||
* Чистая сертифицированная вода
|
* Чистая питьевая вода
|
||||||
|
|
||||||
|
* 1 CTA:
|
||||||
|
«Оформить заказ за 30 секунд»
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2.3. Checkout (Оформление заказа)
|
## 2.2. Убрать лишнее
|
||||||
|
|
||||||
Оптимизировать стандартный WooCommerce checkout:
|
Удалить:
|
||||||
|
|
||||||
### Поля:
|
* дублирующие тексты
|
||||||
|
* длинные объяснения
|
||||||
|
* второстепенные карточки
|
||||||
|
|
||||||
* Имя (billing_first_name)
|
Принцип:
|
||||||
* Телефон (billing_phone) — обязательное
|
👉 1 экран = 1 действие
|
||||||
* Адрес (кастомизированный):
|
|
||||||
|
|
||||||
* Город (по умолчанию Севастополь)
|
|
||||||
* Улица
|
|
||||||
* Дом
|
|
||||||
* Квартира
|
|
||||||
* Подъезд / этаж
|
|
||||||
* Комментарий
|
|
||||||
|
|
||||||
Удалить лишние поля:
|
|
||||||
|
|
||||||
* company
|
|
||||||
* postcode (если не нужен)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Доставка:
|
## 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 руб
|
## 4.2. Социальное доказательство
|
||||||
* Сохранение корзины (cookies / localStorage)
|
|
||||||
|
* «Более 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 литров
|
* заказать воду 19 литров
|
||||||
* вода на дом Севастополь
|
* вода на дом
|
||||||
* доставка питьевой воды
|
|
||||||
|
|
||||||
LSI:
|
|
||||||
|
|
||||||
* Гагаринский район
|
|
||||||
* Ленинский район
|
|
||||||
* Нахимовский район
|
|
||||||
|
|
||||||
Требования:
|
|
||||||
|
|
||||||
* естественный текст
|
|
||||||
* без переспама
|
|
||||||
* с акцентом на удобство заказа
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 4.3. Schema.org
|
# 8. Мобильная версия
|
||||||
|
|
||||||
Добавить:
|
Сделать:
|
||||||
|
|
||||||
* LocalBusiness
|
* CTA на первом экране
|
||||||
* Product
|
* Sticky кнопка
|
||||||
* Offer
|
* Убрать лишний текст
|
||||||
* AggregateRating
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# 5. UX и конверсия
|
# 9. WooCommerce реализация
|
||||||
|
|
||||||
Добавить:
|
Учитывать:
|
||||||
|
|
||||||
* Валидация формы (JS)
|
* hooks:
|
||||||
* Маска телефона
|
|
||||||
* Автозаполнение адреса (Dadata или аналог)
|
|
||||||
* Индикатор прогресса:
|
|
||||||
|
|
||||||
* Корзина → Оформление → Готово
|
* woocommerce_cart_totals_before_order_total
|
||||||
|
* woocommerce_after_cart_table
|
||||||
|
|
||||||
|
* кастомизация:
|
||||||
|
|
||||||
|
* functions.php
|
||||||
|
* AJAX обновление
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# 6. Сценарии ошибок
|
# 10. Результат
|
||||||
|
|
||||||
Продумать:
|
|
||||||
|
|
||||||
* Пустая корзина:
|
|
||||||
|
|
||||||
* CTA «Перейти в каталог»
|
|
||||||
* Ошибка оплаты
|
|
||||||
* Нет доставки в выбранное время
|
|
||||||
* Неверный телефон
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# 7. Мобильная версия (КРИТИЧНО)
|
|
||||||
|
|
||||||
* Sticky итог
|
|
||||||
* Большие кнопки
|
|
||||||
* Минимум полей
|
|
||||||
* Autofill
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# 8. Результат
|
|
||||||
|
|
||||||
На выходе предоставить:
|
На выходе предоставить:
|
||||||
|
|
||||||
1. Полную структуру страницы
|
1. Новый UX-скелет страницы
|
||||||
2. Готовые тексты UI
|
2. Готовые тексты (все блоки)
|
||||||
3. SEO (meta + текст)
|
3. Новый CTA
|
||||||
4. PHP/JS рекомендации для WooCommerce
|
4. Upsell блок
|
||||||
5. UX-решения для повышения конверсии
|
5. SEO текст
|
||||||
|
6. Рекомендации по внедрению в WooCommerce
|
||||||
|
|||||||
@@ -199,6 +199,37 @@ body:is(.test1-checkout-page, .test1-cart-page) {
|
|||||||
line-height: 1.5;
|
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 {
|
.premium-stack {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
@@ -298,6 +329,16 @@ body:is(.test1-checkout-page, .test1-cart-page) {
|
|||||||
line-height: 1.45;
|
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 {
|
.premium-form-card {
|
||||||
border-radius: 30px;
|
border-radius: 30px;
|
||||||
box-shadow: 0 34px 100px rgba(8, 31, 79, 0.16);
|
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;
|
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 {
|
.water-empty-cart-cta {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
@@ -687,6 +749,35 @@ body:is(.test1-checkout-page, .test1-cart-page) {
|
|||||||
top: 104px;
|
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 {
|
:is(.test1-checkout-page, .test1-cart-page) .cross-sells {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
@@ -700,6 +791,20 @@ body:is(.test1-checkout-page, .test1-cart-page) {
|
|||||||
color: var(--premium-navy);
|
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 {
|
:is(.test1-checkout-page, .test1-cart-page) .quantity {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -711,6 +816,22 @@ body:is(.test1-checkout-page, .test1-cart-page) {
|
|||||||
text-align: center;
|
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 {
|
.quantity-button {
|
||||||
width: 38px;
|
width: 38px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
@@ -732,6 +853,10 @@ body:is(.test1-checkout-page, .test1-cart-page) {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cart-trust-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
:is(.test1-checkout-page, .test1-cart-page) .cart_totals {
|
:is(.test1-checkout-page, .test1-cart-page) .cart_totals {
|
||||||
position: static;
|
position: static;
|
||||||
top: auto;
|
top: auto;
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
(function () {
|
(function () {
|
||||||
const root = document.documentElement
|
const root = document.documentElement
|
||||||
const phoneInput = document.getElementById('billing_phone')
|
const phoneInput = document.getElementById('billing_phone')
|
||||||
const cartForm = document.querySelector('form.woocommerce-cart-form')
|
|
||||||
|
|
||||||
const digitsOnly = value => value.replace(/\D+/g, '')
|
const digitsOnly = value => value.replace(/\D+/g, '')
|
||||||
|
|
||||||
@@ -40,8 +39,8 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const attachQuantityButtons = () => {
|
const attachQuantityButtons = scope => {
|
||||||
document.querySelectorAll('.quantity').forEach(quantity => {
|
scope.querySelectorAll('.quantity').forEach(quantity => {
|
||||||
if (quantity.dataset.enhanced === 'true') {
|
if (quantity.dataset.enhanced === 'true') {
|
||||||
return
|
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 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 => {
|
cartForm.addEventListener('change', event => {
|
||||||
if (!event.target.classList.contains('qty')) {
|
if (!event.target.classList.contains('qty')) {
|
||||||
@@ -99,14 +165,22 @@
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
updateButton.disabled = false
|
|
||||||
clearTimeout(updateTimer)
|
clearTimeout(updateTimer)
|
||||||
updateTimer = window.setTimeout(() => {
|
updateTimer = window.setTimeout(() => {
|
||||||
updateButton.click()
|
submitIntent = { name: 'update_cart', value: updateButton.value || '1' }
|
||||||
}, 350)
|
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')
|
root.classList.add('test1-checkout-enhanced')
|
||||||
})()
|
})()
|
||||||
|
|||||||
@@ -641,7 +641,7 @@ function twentytwentyfour_water_delivery_before_cart() {
|
|||||||
$remaining = max( 0, $threshold - $subtotal );
|
$remaining = max( 0, $threshold - $subtotal );
|
||||||
$account_url = function_exists( 'wc_get_account_endpoint_url' ) ? wc_get_account_endpoint_url( 'orders' ) : '';
|
$account_url = function_exists( 'wc_get_account_endpoint_url' ) ? wc_get_account_endpoint_url( 'orders' ) : '';
|
||||||
?>
|
?>
|
||||||
<div class="water-commerce-panel water-commerce-panel-cart">
|
<div class="water-commerce-panel water-commerce-panel-cart js-cart-dynamic-region">
|
||||||
<div class="water-commerce-panel-head">
|
<div class="water-commerce-panel-head">
|
||||||
<h2><?php esc_html_e( 'Проверьте заказ перед оформлением', 'twentytwentyfour' ); ?></h2>
|
<h2><?php esc_html_e( 'Проверьте заказ перед оформлением', 'twentytwentyfour' ); ?></h2>
|
||||||
<p><?php esc_html_e( 'Измените количество бутылей, удалите лишние позиции и перейдите к оформлению доставки воды по Севастополю.', 'twentytwentyfour' ); ?></p>
|
<p><?php esc_html_e( 'Измените количество бутылей, удалите лишние позиции и перейдите к оформлению доставки воды по Севастополю.', 'twentytwentyfour' ); ?></p>
|
||||||
@@ -667,6 +667,48 @@ function twentytwentyfour_water_delivery_before_cart() {
|
|||||||
}
|
}
|
||||||
add_action( 'woocommerce_before_cart', 'twentytwentyfour_water_delivery_before_cart', 5 );
|
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 '<span class="water-order-total-value">' . $value . '</span>';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a sticky summary note before cart totals.
|
||||||
|
*
|
||||||
|
* @return void
|
||||||
|
*/
|
||||||
|
function twentytwentyfour_water_delivery_before_cart_totals() {
|
||||||
|
?>
|
||||||
|
<div class="water-cart-summary-box">
|
||||||
|
<div class="water-cart-summary-usp"><?php esc_html_e( 'Доставка воды по Севастополю за 2-4 часа', 'twentytwentyfour' ); ?></div>
|
||||||
|
<ul class="water-cart-summary-list">
|
||||||
|
<li><?php esc_html_e( 'Стоимость доставки рассчитывается автоматически по зоне', 'twentytwentyfour' ); ?></li>
|
||||||
|
<li><?php esc_html_e( 'Залог за тару показывается отдельной строкой при необходимости', 'twentytwentyfour' ); ?></li>
|
||||||
|
<li><?php esc_html_e( 'После проверки корзины можно сразу перейти к оформлению', 'twentytwentyfour' ); ?></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
add_action( 'woocommerce_before_cart_totals', 'twentytwentyfour_water_delivery_before_cart_totals', 5 );
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add SEO content after the cart.
|
* Add SEO content after the cart.
|
||||||
*
|
*
|
||||||
|
|||||||
@@ -91,13 +91,27 @@
|
|||||||
<strong><?php esc_html_e( 'После проверки корзины вы можете сразу перейти к оформлению заказа и выбрать удобное время доставки', 'twentytwentyfour' ); ?></strong>
|
<strong><?php esc_html_e( 'После проверки корзины вы можете сразу перейти к оформлению заказа и выбрать удобное время доставки', 'twentytwentyfour' ); ?></strong>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="cart-trust-grid">
|
||||||
|
<div class="cart-trust-card">
|
||||||
|
<span><?php esc_html_e( 'Бесплатная доставка', 'twentytwentyfour' ); ?></span>
|
||||||
|
<strong><?php esc_html_e( 'Добавьте еще позиции и увеличьте шанс получить бесплатную доставку по вашей зоне', 'twentytwentyfour' ); ?></strong>
|
||||||
|
</div>
|
||||||
|
<div class="cart-trust-card">
|
||||||
|
<span><?php esc_html_e( 'Обмен тары', 'twentytwentyfour' ); ?></span>
|
||||||
|
<strong><?php esc_html_e( 'Если есть пустые бутыли, мы учтем обмен при следующем шаге оформления', 'twentytwentyfour' ); ?></strong>
|
||||||
|
</div>
|
||||||
|
<div class="cart-trust-card">
|
||||||
|
<span><?php esc_html_e( 'Полезные дополнения', 'twentytwentyfour' ); ?></span>
|
||||||
|
<strong><?php esc_html_e( 'К заказу воды можно добавить помпы, стаканы и кулеры прямо из рекомендаций WooCommerce', 'twentytwentyfour' ); ?></strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="premium-stack reveal reveal-delay-1">
|
<div class="premium-stack reveal reveal-delay-1">
|
||||||
<aside class="glass-card premium-aside premium-aside-cart">
|
<aside class="glass-card premium-aside premium-aside-cart">
|
||||||
<div class="premium-aside-head">
|
<div class="premium-aside-head">
|
||||||
<span class="eyebrow eyebrow-inverse"><?php esc_html_e( 'Что проверить', 'twentytwentyfour' ); ?></span>
|
<span class="eyebrow eyebrow-inverse"><?php esc_html_e( 'Что проверить', 'twentytwentyfour' ); ?></span>
|
||||||
<h2><?php esc_html_e( 'Подготовьте заказ к оформлению', 'twentytwentyfour' ); ?></h2>
|
<h2><?php esc_html_e( 'Подготовьте корзину к оформлению', 'twentytwentyfour' ); ?></h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="premium-timeline">
|
<div class="premium-timeline">
|
||||||
<div class="premium-timeline-item">
|
<div class="premium-timeline-item">
|
||||||
@@ -123,6 +137,9 @@
|
|||||||
<strong><?php esc_html_e( 'Питьевая и минеральная вода в компактных форматах для кухни, гостей и переговорных', 'twentytwentyfour' ); ?></strong>
|
<strong><?php esc_html_e( 'Питьевая и минеральная вода в компактных форматах для кухни, гостей и переговорных', 'twentytwentyfour' ); ?></strong>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="cart-side-note">
|
||||||
|
<p><?php esc_html_e( 'После проверки состава заказа вы сразу увидите итоговую сумму, стоимость доставки по вашей зоне и сможете перейти к оформлению без лишних шагов.', 'twentytwentyfour' ); ?></p>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<div class="glass-card checkout-card premium-form-card">
|
<div class="glass-card checkout-card premium-form-card">
|
||||||
|
|||||||
Reference in New Issue
Block a user