259 lines
6.1 KiB
Markdown
259 lines
6.1 KiB
Markdown
Создай детальную структуру, UX, тексты и технические требования для страницы **«Корзина и Оформление заказа»** на сайте доставки воды в Севастополе, реализованном на WordPress с использованием WooCommerce.
|
||
|
||
Цель: максимальная конверсия оформления заказа + SEO-оптимизация под локальные запросы.
|
||
|
||
---
|
||
|
||
# 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)
|
||
|
||
---
|
||
|
||
# 2. UX-структура страницы
|
||
|
||
## 2.1. Корзина (Cart)
|
||
|
||
Отобразить:
|
||
|
||
* Список товаров:
|
||
|
||
* Название (например: «Вода 19л артезианская»)
|
||
* Миниатюра
|
||
* Цена
|
||
* Количество (input + кнопки +/-)
|
||
* Подсчет суммы
|
||
* Удаление товара (AJAX без перезагрузки)
|
||
|
||
Дополнительно:
|
||
|
||
* Кросс-селл (WooCommerce related products):
|
||
|
||
* помпы
|
||
* стаканы
|
||
* кулеры
|
||
|
||
* Сообщения:
|
||
|
||
* «Добавьте еще 1 бутыль — доставка бесплатно»
|
||
* Минимальный заказ (если есть)
|
||
|
||
---
|
||
|
||
## 2.2. Sticky блок «Итого»
|
||
|
||
* Подсчет:
|
||
|
||
* Сумма заказа
|
||
* Доставка (динамически через shipping zones WooCommerce)
|
||
* Залог за тару (как отдельная позиция fee)
|
||
|
||
* УТП:
|
||
|
||
* Доставка воды по Севастополю за 2–4 часа
|
||
* Работаем ежедневно
|
||
* Чистая сертифицированная вода
|
||
|
||
---
|
||
|
||
## 2.3. Checkout (Оформление заказа)
|
||
|
||
Оптимизировать стандартный WooCommerce checkout:
|
||
|
||
### Поля:
|
||
|
||
* Имя (billing_first_name)
|
||
* Телефон (billing_phone) — обязательное
|
||
* Адрес (кастомизированный):
|
||
|
||
* Город (по умолчанию Севастополь)
|
||
* Улица
|
||
* Дом
|
||
* Квартира
|
||
* Подъезд / этаж
|
||
* Комментарий
|
||
|
||
Удалить лишние поля:
|
||
|
||
* company
|
||
* postcode (если не нужен)
|
||
|
||
---
|
||
|
||
### Доставка:
|
||
|
||
* Использовать WooCommerce Shipping Zones:
|
||
|
||
* Севастополь — фикс или бесплатно от суммы
|
||
* Выбор:
|
||
|
||
* «Сегодня»
|
||
* «Завтра»
|
||
* Интервалы времени
|
||
|
||
(реализовать через кастомные checkout поля)
|
||
|
||
---
|
||
|
||
### Оплата:
|
||
|
||
* Наличными
|
||
* Картой курьеру
|
||
* Онлайн (WooCommerce payment gateway)
|
||
|
||
---
|
||
|
||
## 2.4. CTA
|
||
|
||
* Кнопка: «Оформить заказ»
|
||
* Добавить urgency:
|
||
|
||
* «Доставим сегодня при заказе до 18:00»
|
||
|
||
---
|
||
|
||
# 3. Логика и функции
|
||
|
||
## 3.1. Кастомная логика:
|
||
|
||
* Добавить fee:
|
||
|
||
* залог за бутыль (если нет обмена)
|
||
* Условие:
|
||
|
||
* бесплатная доставка от X руб
|
||
* Сохранение корзины (cookies / localStorage)
|
||
|
||
---
|
||
|
||
## 3.2. Upsell механики:
|
||
|
||
* Перед checkout:
|
||
|
||
* «Добавьте помпу — удобно наливать воду»
|
||
* После добавления товара:
|
||
|
||
* popup / notice
|
||
|
||
---
|
||
|
||
## 3.3. Повтор заказа:
|
||
|
||
* Если пользователь авторизован:
|
||
|
||
* кнопка «Повторить прошлый заказ»
|
||
|
||
---
|
||
|
||
# 4. SEO-оптимизация
|
||
|
||
## 4.1. Meta (через Yoast SEO или RankMath)
|
||
|
||
Сгенерировать:
|
||
|
||
* Title:
|
||
|
||
* «Оформить заказ воды в Севастополе — доставка 19л на дом»
|
||
* Description:
|
||
|
||
* «Быстрая доставка питьевой воды по Севастополю. Закажите воду 19 литров с доставкой на дом или в офис. Удобная оплата.»
|
||
|
||
---
|
||
|
||
## 4.2. SEO-текст (внизу страницы)
|
||
|
||
Написать 1200–1500 символов:
|
||
|
||
Ключи:
|
||
|
||
* доставка воды Севастополь
|
||
* заказать воду 19 литров
|
||
* вода на дом Севастополь
|
||
* доставка питьевой воды
|
||
|
||
LSI:
|
||
|
||
* Гагаринский район
|
||
* Ленинский район
|
||
* Нахимовский район
|
||
|
||
Требования:
|
||
|
||
* естественный текст
|
||
* без переспама
|
||
* с акцентом на удобство заказа
|
||
|
||
---
|
||
|
||
## 4.3. Schema.org
|
||
|
||
Добавить:
|
||
|
||
* LocalBusiness
|
||
* Product
|
||
* Offer
|
||
* AggregateRating
|
||
|
||
---
|
||
|
||
# 5. UX и конверсия
|
||
|
||
Добавить:
|
||
|
||
* Валидация формы (JS)
|
||
* Маска телефона
|
||
* Автозаполнение адреса (Dadata или аналог)
|
||
* Индикатор прогресса:
|
||
|
||
* Корзина → Оформление → Готово
|
||
|
||
---
|
||
|
||
# 6. Сценарии ошибок
|
||
|
||
Продумать:
|
||
|
||
* Пустая корзина:
|
||
|
||
* CTA «Перейти в каталог»
|
||
* Ошибка оплаты
|
||
* Нет доставки в выбранное время
|
||
* Неверный телефон
|
||
|
||
---
|
||
|
||
# 7. Мобильная версия (КРИТИЧНО)
|
||
|
||
* Sticky итог
|
||
* Большие кнопки
|
||
* Минимум полей
|
||
* Autofill
|
||
|
||
---
|
||
|
||
# 8. Результат
|
||
|
||
На выходе предоставить:
|
||
|
||
1. Полную структуру страницы
|
||
2. Готовые тексты UI
|
||
3. SEO (meta + текст)
|
||
4. PHP/JS рекомендации для WooCommerce
|
||
5. UX-решения для повышения конверсии
|