Good-Production/dostavka_vodi
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

правки test1

Browse Source
This commit is contained in:
Антон
2026-04-04 19:58:19 +03:00
parent 153a66143b
commit f2659158c9
6 changed files with 330 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
AGENTS.md Normal file
View File

@@ -0,0 +1,201 @@
🎯 Цель
Создавать высококонверсионные, быстрые и масштабируемые сайты на WordPress, которые одновременно:
решают бизнес-задачи
выглядят как продукт топ-уровня
хорошо индексируются и ранжируются
легко поддерживаются и развиваются
🧠 Общие принципы
1. Бизнес > Дизайн > Код
Никаких решений ради красоты или «как у всех».
Каждый элемент должен отвечать на вопрос: зачем он здесь и какую метрику улучшает?
2. Минимум сложности — максимум эффекта
избегаем перегруженных решений
не используем тяжелые плагины без необходимости
код и структура должны быть прозрачными
3. Скорость — критичный фактор
Core Web Vitals — не обсуждается
оптимизация на этапе проектирования, а не после
4. SEO встроено с самого начала
Не «потом добавим», а:
структура
контент
семантика
— закладываются на этапе прототипа
🧩 Роли агентов
🎨 1. Design Agent (Топовый дизайнер)
Задача:
Создавать интерфейсы, которые:
визуально выделяются
усиливают доверие
ведут пользователя к действию
Принципы:
дизайн = инструмент продаж
каждый блок — смысловой
акцент на иерархию, контраст, whitespace
Делает:
UI-киты и дизайн-системы
адаптивные макеты (mobile-first)
визуальные концепции (hero, CTA, USP)
состояния (hover, loading, empty states)
Проверка качества:
можно ли понять смысл страницы за 3 секунды?
есть ли четкий путь пользователя?
не перегружен ли интерфейс?
🧱 2. Prototype Agent (Прототипировщик)
Задача:
Превратить бизнес-требования в логичную структуру сайта
Делает:
user flow
wireframes (низкая детализация)
структура страниц
логика блоков
Принципы:
сначала смысл → потом визуал
прототип = скелет продаж
Обязательные элементы:
четкий hero-блок
социальное доказательство
триггеры доверия
логичный CTA
Ошибки:
рисовать дизайн вместо структуры
игнорировать сценарии пользователя
⚙️ 3. Dev Agent (WordPress разработчик)
Задача:
Собрать быстрый, чистый и масштабируемый сайт
Стек:
WordPress (custom theme / Gutenberg / ACF)
минимизация page builders (или их грамотное использование)
Принципы:
чистый код > быстрый костыль
не использовать 10 плагинов там, где можно 1
безопасность по умолчанию
Делает:
кастомные темы
ACF / блоки Gutenberg
оптимизация загрузки (lazy load, critical CSS)
настройка кеширования
Обязательные требования:
PageSpeed 90+
отсутствие лишних запросов
валидная HTML-структура
🔍 4. SEO Agent (SEO специалист)
Задача:
Привести трафик и обеспечить видимость в поиске
Делает:
сбор семантики
кластеризация запросов
структура сайта
оптимизация контента
Важно:
SEO начинается ДО разработки
Обязательные элементы:
правильная структура H1-H3
мета-теги
перелинковка
schema.org
Проверка:
страница отвечает на интент?
есть ли шанс попасть в топ-10?
не переоптимизирован ли текст?
🧠 5. Strategy Agent (опционально, но желательно)
Задача:
Связать всё воедино
Делает:
анализ конкурентов
позиционирование
формирование оффера
определение ЦА
🔄 Workflow (процесс работы)
1. Исследование
бизнес
конкуренты
аудитория
👉 результат: понимание задачи
2. SEO + структура
семантика
карта сайта
👉 результат: логика страниц
3. Прототип
wireframes
user flow
👉 результат: понятная структура
4. Дизайн
UI + визуал
адаптив
👉 результат: готовый макет
5. Разработка
сборка сайта
оптимизация
👉 результат: работающий сайт
6. Тестирование
скорость
UX
SEO
👉 результат: готовность к запуску
⚠️ Частые ошибки (важно)
❌ Делать дизайн без прототипа
→ получается красивая, но бесполезная страница
❌ Делать SEO после разработки
→ переделка структуры и потери времени
❌ Использовать Elementor "как попало"
→ медленный сайт и проблемы с поддержкой
❌ Игнорировать mobile-first
→ теряется до 70% пользователей
✅ Definition of Done (когда сайт готов)
Сайт считается готовым, если:
🚀 PageSpeed 90+ (mobile)
📱 идеально работает на мобильных
🔍 оптимизирован под SEO
🎯 есть четкий CTA и логика конверсии
🧱 легко редактируется (через WP)
⚡ быстро загружается (<2 сек)
🧩 Итог
Хороший WordPress-сайт — это не:
«поставили тему и натянули дизайн»
А это:
система, где стратегия, структура, дизайн, код и SEO работают вместе

43
index3.css
View File

@@ -67,6 +67,15 @@
text-decoration: none; text-decoration: none;
} }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid rgba(13, 79, 214, 0.44);
outline-offset: 3px;
}
button, button,
input, input,
textarea, textarea,
@@ -439,6 +448,20 @@
transform: translateY(-2px); transform: translateY(-2px);
} }
.button:focus-visible,
.ghost-button:focus-visible,
.mini-button:focus-visible,
.cart-button:focus-visible,
.mobile-toggle:focus-visible,
.faq-question:focus-visible,
.close-button:focus-visible,
.header-phone:focus-visible,
.mobile-nav a:focus-visible,
.footer-links a:focus-visible,
.footer-legal a:focus-visible {
box-shadow: 0 0 0 4px rgba(13, 79, 214, 0.18);
}
.hero-stats { .hero-stats {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1472,3 +1495,23 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1;
transform: none;
animation: none !important;
}
}

44
index3.html
View File

@@ -44,7 +44,7 @@
</a> </a>
<button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину"> <button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
<span aria-hidden="true">Корзина</span> <span aria-hidden="true">Корзина</span>
<span class="cart-count" id="cartCount">0</span> <span class="cart-count" id="cartCount" aria-live="polite" aria-atomic="true">0</span>
</button> </button>
<button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel"> <button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -68,7 +68,7 @@
<a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a> <a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a>
<button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню"> <button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
<span>Корзина</span> <span>Корзина</span>
<span class="cart-count" id="mobileCartCount">0</span> <span class="cart-count" id="mobileCartCount" aria-live="polite" aria-atomic="true">0</span>
</button> </button>
</div> </div>
</div> </div>
@@ -477,67 +477,67 @@
<div class="faq-list"> <div class="faq-list">
<article class="faq-item reveal open"> <article class="faq-item reveal open">
<button class="faq-question" aria-expanded="true"> <button class="faq-question" id="faq-question-1" aria-expanded="true" aria-controls="faq-answer-1">
<span>Как быстро вы привозите воду по Севастополю?</span> <span>Как быстро вы привозите воду по Севастополю?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Обычно доставка воды в Севастополе занимает от 2 до 4 часов в пределах активных маршрутов. При высокой загрузке мы предлагаем ближайший удобный интервал и обязательно подтверждаем его по телефону.</div> <div class="faq-answer" id="faq-answer-1" role="region" aria-labelledby="faq-question-1">Обычно доставка воды в Севастополе занимает от 2 до 4 часов в пределах активных маршрутов. При высокой загрузке мы предлагаем ближайший удобный интервал и обязательно подтверждаем его по телефону.</div>
</article> </article>
<article class="faq-item reveal reveal-delay-1"> <article class="faq-item reveal reveal-delay-1">
<button class="faq-question" aria-expanded="false"> <button class="faq-question" id="faq-question-2" aria-expanded="false" aria-controls="faq-answer-2">
<span>Какие способы оплаты доступны?</span> <span>Какие способы оплаты доступны?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Принимаем наличные, оплату картой при получении, перевод по номеру телефона и безналичный расчет для компаний. Для офисов можем выставить счет.</div> <div class="faq-answer" id="faq-answer-2" role="region" aria-labelledby="faq-question-2" hidden>Принимаем наличные, оплату картой при получении, перевод по номеру телефона и безналичный расчет для компаний. Для офисов можем выставить счет.</div>
</article> </article>
<article class="faq-item reveal reveal-delay-2"> <article class="faq-item reveal reveal-delay-2">
<button class="faq-question" aria-expanded="false"> <button class="faq-question" id="faq-question-3" aria-expanded="false" aria-controls="faq-answer-3">
<span>Нужен ли залог за бутыль 19 литров?</span> <span>Нужен ли залог за бутыль 19 литров?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Если у вас нет своей тары, при первом заказе может взиматься возвратный депозит за бутыль. При возврате тары депозит учитывается в следующих заказах.</div> <div class="faq-answer" id="faq-answer-3" role="region" aria-labelledby="faq-question-3" hidden>Если у вас нет своей тары, при первом заказе может взиматься возвратный депозит за бутыль. При возврате тары депозит учитывается в следующих заказах.</div>
</article> </article>
<article class="faq-item reveal reveal-delay-3"> <article class="faq-item reveal reveal-delay-3">
<button class="faq-question" aria-expanded="false"> <button class="faq-question" id="faq-question-4" aria-expanded="false" aria-controls="faq-answer-4">
<span>Как часто лучше заказывать воду домой?</span> <span>Как часто лучше заказывать воду домой?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Для семьи из 2-4 человек обычно достаточно заказа 2-4 бутылей 19 литров раз в 1-2 недели. Точный график зависит от потребления и наличия кулера.</div> <div class="faq-answer" id="faq-answer-4" role="region" aria-labelledby="faq-question-4" hidden>Для семьи из 2-4 человек обычно достаточно заказа 2-4 бутылей 19 литров раз в 1-2 недели. Точный график зависит от потребления и наличия кулера.</div>
</article> </article>
<article class="faq-item reveal"> <article class="faq-item reveal">
<button class="faq-question" aria-expanded="false"> <button class="faq-question" id="faq-question-5" aria-expanded="false" aria-controls="faq-answer-5">
<span>Откуда поступает вода и как контролируется качество?</span> <span>Откуда поступает вода и как контролируется качество?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Мы используем артезианскую воду из защищенного источника, проводим фильтрацию, санитарную обработку тары и регулярный лабораторный контроль. По запросу предоставляем информацию о сертификатах качества.</div> <div class="faq-answer" id="faq-answer-5" role="region" aria-labelledby="faq-question-5" hidden>Мы используем артезианскую воду из защищенного источника, проводим фильтрацию, санитарную обработку тары и регулярный лабораторный контроль. По запросу предоставляем информацию о сертификатах качества.</div>
</article> </article>
<article class="faq-item reveal reveal-delay-1"> <article class="faq-item reveal reveal-delay-1">
<button class="faq-question" aria-expanded="false"> <button class="faq-question" id="faq-question-6" aria-expanded="false" aria-controls="faq-answer-6">
<span>Можно ли оформить доставку воды в офис?</span> <span>Можно ли оформить доставку воды в офис?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Да, мы регулярно обслуживаем офисы, кафе, фитнес-клубы, студии и медицинские кабинеты. Настраиваем график, безнал и объем под ваш режим работы.</div> <div class="faq-answer" id="faq-answer-6" role="region" aria-labelledby="faq-question-6" hidden>Да, мы регулярно обслуживаем офисы, кафе, фитнес-клубы, студии и медицинские кабинеты. Настраиваем график, безнал и объем под ваш режим работы.</div>
</article> </article>
<article class="faq-item reveal reveal-delay-2"> <article class="faq-item reveal reveal-delay-2">
<button class="faq-question" aria-expanded="false"> <button class="faq-question" id="faq-question-7" aria-expanded="false" aria-controls="faq-answer-7">
<span>Какой минимальный заказ действует для доставки?</span> <span>Какой минимальный заказ действует для доставки?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Для воды 19 литров можно заказать от одной бутыли. Для небольших упаковок минимальная сумма заказа составляет 500 ₽, чтобы доставка оставалась быстрой и выгодной.</div> <div class="faq-answer" id="faq-answer-7" role="region" aria-labelledby="faq-question-7" hidden>Для воды 19 литров можно заказать от одной бутыли. Для небольших упаковок минимальная сумма заказа составляет 500 ₽, чтобы доставка оставалась быстрой и выгодной.</div>
</article> </article>
<article class="faq-item reveal reveal-delay-3"> <article class="faq-item reveal reveal-delay-3">
<button class="faq-question" aria-expanded="false"> <button class="faq-question" id="faq-question-8" aria-expanded="false" aria-controls="faq-answer-8">
<span>Что делать с пустыми бутылками после использования?</span> <span>Что делать с пустыми бутылками после использования?</span>
<span aria-hidden="true">+</span> <span aria-hidden="true">+</span>
</button> </button>
<div class="faq-answer">Сохраните пустые бутыли до следующего визита курьера. Мы заберем их при следующей доставке или согласуем отдельный выезд при крупном заказе.</div> <div class="faq-answer" id="faq-answer-8" role="region" aria-labelledby="faq-question-8" hidden>Сохраните пустые бутыли до следующего визита курьера. Мы заберем их при следующей доставке или согласуем отдельный выезд при крупном заказе.</div>
</article> </article>
</div> </div>
</div> </div>
@@ -639,7 +639,7 @@
<input class="field" type="text" name="address" placeholder="Адрес доставки в Севастополе" aria-label="Адрес доставки" required> <input class="field" type="text" name="address" placeholder="Адрес доставки в Севастополе" aria-label="Адрес доставки" required>
<textarea class="field" name="comment" placeholder="Что нужно доставить: например, 2 бутыли 19 л и 1 упаковка 1.5 л" aria-label="Комментарий к заказу"></textarea> <textarea class="field" name="comment" placeholder="Что нужно доставить: например, 2 бутыли 19 л и 1 упаковка 1.5 л" aria-label="Комментарий к заказу"></textarea>
<button class="button" type="submit">Отправить заявку</button> <button class="button" type="submit">Отправить заявку</button>
<div class="success-note" id="contactSuccess">Спасибо! Заявка принята. Мы свяжемся с вами для подтверждения заказа.</div> <div class="success-note" id="contactSuccess" role="status" aria-live="polite">Спасибо! Заявка принята. Мы свяжемся с вами для подтверждения заказа.</div>
</form> </form>
</div> </div>
@@ -709,8 +709,8 @@
</div> </div>
<div class="cart-summary"> <div class="cart-summary">
<div class="summary-row"><span>Товаров</span><span id="cartItemsCount">0</span></div> <div class="summary-row"><span>Товаров</span><span id="cartItemsCount" aria-live="polite" aria-atomic="true">0</span></div>
<div class="summary-row"><span>Сумма</span><strong id="cartTotal">0 ₽</strong></div> <div class="summary-row"><span>Сумма</span><strong id="cartTotal" aria-live="polite" aria-atomic="true">0 ₽</strong></div>
</div> </div>
<div class="cart-list" id="cartList"> <div class="cart-list" id="cartList">
@@ -744,7 +744,7 @@
</select> </select>
<textarea class="field" name="customerOrder" id="orderItemsField" placeholder="Комментарий к заказу" aria-label="Комментарий к заказу"></textarea> <textarea class="field" name="customerOrder" id="orderItemsField" placeholder="Комментарий к заказу" aria-label="Комментарий к заказу"></textarea>
<button class="button" type="submit">Подтвердить заказ</button> <button class="button" type="submit">Подтвердить заказ</button>
<div class="success-note" id="orderSuccess">Спасибо! Ваш заказ сохранен. Мы свяжемся с вами в ближайшее время.</div> <div class="success-note" id="orderSuccess" role="status" aria-live="polite">Спасибо! Ваш заказ сохранен. Мы свяжемся с вами в ближайшее время.</div>
</form> </form>
</div> </div>
</div> </div>

71
index3.js
View File

@@ -29,8 +29,29 @@ const audienceContent = {
const orderSuccess = document.getElementById('orderSuccess') const orderSuccess = document.getElementById('orderSuccess')
const contactSuccess = document.getElementById('contactSuccess') const contactSuccess = document.getElementById('contactSuccess')
const wooCommerceConfig = window.test1WooCommerce || null const wooCommerceConfig = window.test1WooCommerce || null
const cartPanel = cartDrawer?.querySelector('.cart-panel')
const modalCard = modalBackdrop?.querySelector('.modal-card')
let cart = [] let cart = []
let lastCartTrigger = null
let lastModalTrigger = null
const getFocusableElements = container => {
if (!container) {
return []
}
return Array.from(container.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'))
.filter(element => !element.hasAttribute('hidden') && !element.closest('[hidden]'))
}
const focusFirstElement = container => {
const [first] = getFocusableElements(container)
if (first) {
first.focus()
}
}
const updateAudience = audience => { const updateAudience = audience => {
heroAudienceText.textContent = audienceContent[audience] heroAudienceText.textContent = audienceContent[audience]
@@ -55,31 +76,49 @@ const audienceContent = {
document.body.classList.remove('menu-open') document.body.classList.remove('menu-open')
} }
const openCart = () => { const openCart = triggerElement => {
lastCartTrigger = triggerElement || document.activeElement
cartDrawer.classList.add('open') cartDrawer.classList.add('open')
cartDrawer.setAttribute('aria-hidden', 'false') cartDrawer.setAttribute('aria-hidden', 'false')
document.body.classList.add('modal-open') document.body.classList.add('modal-open')
focusFirstElement(cartPanel)
} }
const closeCart = () => { const closeCart = () => {
const shouldRestoreFocus = cartDrawer.classList.contains('open')
cartDrawer.classList.remove('open') cartDrawer.classList.remove('open')
cartDrawer.setAttribute('aria-hidden', 'true') cartDrawer.setAttribute('aria-hidden', 'true')
document.body.classList.remove('modal-open') document.body.classList.remove('modal-open')
if (shouldRestoreFocus && lastCartTrigger && typeof lastCartTrigger.focus === 'function') {
lastCartTrigger.focus()
}
lastCartTrigger = null
} }
const openModal = () => { const openModal = triggerElement => {
lastModalTrigger = triggerElement || document.activeElement
orderItemsField.value = cart.length orderItemsField.value = cart.length
? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n') ? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
: '' : ''
modalBackdrop.classList.add('open') modalBackdrop.classList.add('open')
modalBackdrop.setAttribute('aria-hidden', 'false') modalBackdrop.setAttribute('aria-hidden', 'false')
document.body.classList.add('modal-open') document.body.classList.add('modal-open')
focusFirstElement(modalCard)
} }
const closeModal = () => { const closeModal = () => {
const shouldRestoreFocus = modalBackdrop.classList.contains('open')
modalBackdrop.classList.remove('open') modalBackdrop.classList.remove('open')
modalBackdrop.setAttribute('aria-hidden', 'true') modalBackdrop.setAttribute('aria-hidden', 'true')
document.body.classList.remove('modal-open') document.body.classList.remove('modal-open')
if (shouldRestoreFocus && lastModalTrigger && typeof lastModalTrigger.focus === 'function') {
lastModalTrigger.focus()
}
lastModalTrigger = null
} }
const renderCart = () => { const renderCart = () => {
@@ -173,7 +212,7 @@ const audienceContent = {
price: Number(button.dataset.price) price: Number(button.dataset.price)
}) })
renderCart() renderCart()
openCart() openCart(button)
button.disabled = false button.disabled = false
}) })
.catch(() => { .catch(() => {
@@ -189,14 +228,14 @@ const audienceContent = {
price: Number(button.dataset.price) price: Number(button.dataset.price)
}) })
renderCart() renderCart()
openCart() openCart(button)
}) })
}) })
cartOpenButton.addEventListener('click', openCart) cartOpenButton.addEventListener('click', () => openCart(cartOpenButton))
mobileCartOpenButton.addEventListener('click', () => { mobileCartOpenButton.addEventListener('click', () => {
closeMobileMenu() closeMobileMenu()
openCart() openCart(mobileCartOpenButton)
}) })
cartCloseButton.addEventListener('click', closeCart) cartCloseButton.addEventListener('click', closeCart)
viewCartButton.addEventListener('click', () => { viewCartButton.addEventListener('click', () => {
@@ -211,11 +250,11 @@ const audienceContent = {
} }
closeCart() closeCart()
openModal() openModal(checkoutButton)
}) })
orderButtons.forEach(button => { orderButtons.forEach(button => {
button.addEventListener('click', openModal) button.addEventListener('click', () => openModal(button))
}) })
modalCloseButton.addEventListener('click', closeModal) modalCloseButton.addEventListener('click', closeModal)
@@ -234,15 +273,29 @@ const audienceContent = {
faqItems.forEach(item => { faqItems.forEach(item => {
const trigger = item.querySelector('.faq-question') const trigger = item.querySelector('.faq-question')
const answer = item.querySelector('.faq-answer')
if (!trigger || !answer) {
return
}
trigger.addEventListener('click', () => { trigger.addEventListener('click', () => {
const isOpen = item.classList.contains('open') const isOpen = item.classList.contains('open')
faqItems.forEach(entry => { faqItems.forEach(entry => {
const entryTrigger = entry.querySelector('.faq-question')
const entryAnswer = entry.querySelector('.faq-answer')
entry.classList.remove('open') entry.classList.remove('open')
entry.querySelector('.faq-question').setAttribute('aria-expanded', 'false') entryTrigger?.setAttribute('aria-expanded', 'false')
if (entryAnswer) {
entryAnswer.hidden = true
}
}) })
if (!isOpen) { if (!isOpen) {
item.classList.add('open') item.classList.add('open')
trigger.setAttribute('aria-expanded', 'true') trigger.setAttribute('aria-expanded', 'true')
answer.hidden = false
} }
}) })
}) })

205
promt.md
View File

@@ -1,205 +0,0 @@
Проанализируй текущую страницу корзины интернет-магазина доставки воды в Севастополе (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

4
wp-content/themes/twentytwentyfour/template-parts/test1-shared-header.php
View File

@@ -39,7 +39,7 @@ $test1_header_mode = isset( $test1_header_mode ) ? $test1_header_mode :
<?php if ( 'cart' === $test1_header_mode ) : ?> <?php if ( 'cart' === $test1_header_mode ) : ?>
<button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину"> <button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
<span aria-hidden="true">Корзина</span> <span aria-hidden="true">Корзина</span>
<span class="cart-count" id="cartCount">0</span> <span class="cart-count" id="cartCount" aria-live="polite" aria-atomic="true">0</span>
</button> </button>
<button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel"> <button class="mobile-toggle" id="mobileToggle" aria-label="Открыть меню" aria-expanded="false" aria-controls="mobilePanel">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -67,7 +67,7 @@ $test1_header_mode = isset( $test1_header_mode ) ? $test1_header_mode :
<a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a> <a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a>
<button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню"> <button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
<span>Корзина</span> <span>Корзина</span>
<span class="cart-count" id="mobileCartCount">0</span> <span class="cart-count" id="mobileCartCount" aria-live="polite" aria-atomic="true">0</span>
</button> </button>
</div> </div>
</div> </div>