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
|
||||
297
promt.md
297
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:
|
||||
Заменить все кнопки:
|
||||
|
||||
❌ «Перейти к оформлению заказа»
|
||||
✔ «Оформить заказ за 30 секунд»
|
||||
✔ «Получить воду сегодня»
|
||||
|
||||
Добавить:
|
||||
|
||||
* микро-текст под кнопкой:
|
||||
«Без регистрации»
|
||||
|
||||
---
|
||||
|
||||
# 4. Триггеры конверсии
|
||||
|
||||
Добавить:
|
||||
|
||||
## 4.1. Срочность
|
||||
|
||||
* «Доставим сегодня при заказе до 18:00»
|
||||
* «Осталось 5 слотов на сегодня»
|
||||
|
||||
## 4.2. Социальное доказательство
|
||||
|
||||
* «Более 1000 клиентов в Севастополе»
|
||||
|
||||
## 4.3. Гарантия
|
||||
|
||||
* «Если не понравится — вернем деньги»
|
||||
|
||||
---
|
||||
|
||||
# 3. Логика и функции
|
||||
# 5. Upsell (увеличение чека)
|
||||
|
||||
## 3.1. Кастомная логика:
|
||||
Добавить блок:
|
||||
|
||||
* Добавить fee:
|
||||
«Рекомендуем добавить»
|
||||
|
||||
* залог за бутыль (если нет обмена)
|
||||
* Условие:
|
||||
* Помпа
|
||||
* Стаканы
|
||||
* Малые бутылки
|
||||
|
||||
* бесплатная доставка от X руб
|
||||
* Сохранение корзины (cookies / localStorage)
|
||||
С текстом:
|
||||
«Чаще всего заказывают вместе»
|
||||
|
||||
---
|
||||
|
||||
## 3.2. Upsell механики:
|
||||
# 6. Быстрый заказ (КРИТИЧНО)
|
||||
|
||||
* Перед checkout:
|
||||
Добавить:
|
||||
|
||||
* «Добавьте помпу — удобно наливать воду»
|
||||
* После добавления товара:
|
||||
* поле «Телефон»
|
||||
* кнопка «Заказать в 1 клик»
|
||||
|
||||
* popup / notice
|
||||
Интеграция:
|
||||
|
||||
* WooCommerce / кастомный AJAX
|
||||
|
||||
---
|
||||
|
||||
## 3.3. Повтор заказа:
|
||||
# 7. SEO-оптимизация
|
||||
|
||||
* Если пользователь авторизован:
|
||||
## 7.1. H1
|
||||
|
||||
* кнопка «Повторить прошлый заказ»
|
||||
* «Корзина доставки воды в Севастополе»
|
||||
|
||||
---
|
||||
## 7.2. Текст (короткий, 500–800 символов)
|
||||
|
||||
# 4. SEO-оптимизация
|
||||
|
||||
## 4.1. Meta (через Yoast SEO или RankMath)
|
||||
|
||||
Сгенерировать:
|
||||
|
||||
* Title:
|
||||
|
||||
* «Оформить заказ воды в Севастополе — доставка 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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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')
|
||||
})()
|
||||
|
||||
@@ -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' ) : '';
|
||||
?>
|
||||
<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">
|
||||
<h2><?php esc_html_e( 'Проверьте заказ перед оформлением', 'twentytwentyfour' ); ?></h2>
|
||||
<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 );
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*
|
||||
|
||||
@@ -91,13 +91,27 @@
|
||||
<strong><?php esc_html_e( 'После проверки корзины вы можете сразу перейти к оформлению заказа и выбрать удобное время доставки', 'twentytwentyfour' ); ?></strong>
|
||||
</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 class="premium-stack reveal reveal-delay-1">
|
||||
<aside class="glass-card premium-aside premium-aside-cart">
|
||||
<div class="premium-aside-head">
|
||||
<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 class="premium-timeline">
|
||||
<div class="premium-timeline-item">
|
||||
@@ -123,6 +137,9 @@
|
||||
<strong><?php esc_html_e( 'Питьевая и минеральная вода в компактных форматах для кухни, гостей и переговорных', 'twentytwentyfour' ); ?></strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-side-note">
|
||||
<p><?php esc_html_e( 'После проверки состава заказа вы сразу увидите итоговую сумму, стоимость доставки по вашей зоне и сможете перейти к оформлению без лишних шагов.', 'twentytwentyfour' ); ?></p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="glass-card checkout-card premium-form-card">
|
||||
|
||||
Reference in New Issue
Block a user