правки test1
This commit is contained in:
201
AGENTS.md
Normal file
201
AGENTS.md
Normal 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
43
index3.css
@@ -67,6 +67,15 @@
|
||||
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,
|
||||
input,
|
||||
textarea,
|
||||
@@ -439,6 +448,20 @@
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
@@ -1472,3 +1495,23 @@
|
||||
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
44
index3.html
@@ -44,7 +44,7 @@
|
||||
</a>
|
||||
<button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
|
||||
<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 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">
|
||||
@@ -68,7 +68,7 @@
|
||||
<a class="header-phone" href="tel:+79781234567">+7 (978) 123-45-67</a>
|
||||
<button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -477,67 +477,67 @@
|
||||
|
||||
<div class="faq-list">
|
||||
<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 aria-hidden="true">+</span>
|
||||
</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 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 aria-hidden="true">+</span>
|
||||
</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 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 aria-hidden="true">+</span>
|
||||
</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 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 aria-hidden="true">+</span>
|
||||
</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 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 aria-hidden="true">+</span>
|
||||
</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 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 aria-hidden="true">+</span>
|
||||
</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 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 aria-hidden="true">+</span>
|
||||
</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 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 aria-hidden="true">+</span>
|
||||
</button>
|
||||
<div class="faq-answer">Сохраните пустые бутыли до следующего визита курьера. Мы заберем их при следующей доставке или согласуем отдельный выезд при крупном заказе.</div>
|
||||
<div class="faq-answer" id="faq-answer-8" role="region" aria-labelledby="faq-question-8" hidden>Сохраните пустые бутыли до следующего визита курьера. Мы заберем их при следующей доставке или согласуем отдельный выезд при крупном заказе.</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
@@ -639,7 +639,7 @@
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -709,8 +709,8 @@
|
||||
</div>
|
||||
|
||||
<div class="cart-summary">
|
||||
<div class="summary-row"><span>Товаров</span><span id="cartItemsCount">0</span></div>
|
||||
<div class="summary-row"><span>Сумма</span><strong id="cartTotal">0 ₽</strong></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" aria-live="polite" aria-atomic="true">0 ₽</strong></div>
|
||||
</div>
|
||||
|
||||
<div class="cart-list" id="cartList">
|
||||
@@ -744,7 +744,7 @@
|
||||
</select>
|
||||
<textarea class="field" name="customerOrder" id="orderItemsField" placeholder="Комментарий к заказу" aria-label="Комментарий к заказу"></textarea>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
71
index3.js
71
index3.js
@@ -29,8 +29,29 @@ const audienceContent = {
|
||||
const orderSuccess = document.getElementById('orderSuccess')
|
||||
const contactSuccess = document.getElementById('contactSuccess')
|
||||
const wooCommerceConfig = window.test1WooCommerce || null
|
||||
const cartPanel = cartDrawer?.querySelector('.cart-panel')
|
||||
const modalCard = modalBackdrop?.querySelector('.modal-card')
|
||||
|
||||
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 => {
|
||||
heroAudienceText.textContent = audienceContent[audience]
|
||||
@@ -55,31 +76,49 @@ const audienceContent = {
|
||||
document.body.classList.remove('menu-open')
|
||||
}
|
||||
|
||||
const openCart = () => {
|
||||
const openCart = triggerElement => {
|
||||
lastCartTrigger = triggerElement || document.activeElement
|
||||
cartDrawer.classList.add('open')
|
||||
cartDrawer.setAttribute('aria-hidden', 'false')
|
||||
document.body.classList.add('modal-open')
|
||||
focusFirstElement(cartPanel)
|
||||
}
|
||||
|
||||
const closeCart = () => {
|
||||
const shouldRestoreFocus = cartDrawer.classList.contains('open')
|
||||
cartDrawer.classList.remove('open')
|
||||
cartDrawer.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
|
||||
if (shouldRestoreFocus && lastCartTrigger && typeof lastCartTrigger.focus === 'function') {
|
||||
lastCartTrigger.focus()
|
||||
}
|
||||
|
||||
const openModal = () => {
|
||||
lastCartTrigger = null
|
||||
}
|
||||
|
||||
const openModal = triggerElement => {
|
||||
lastModalTrigger = triggerElement || document.activeElement
|
||||
orderItemsField.value = cart.length
|
||||
? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
|
||||
: ''
|
||||
modalBackdrop.classList.add('open')
|
||||
modalBackdrop.setAttribute('aria-hidden', 'false')
|
||||
document.body.classList.add('modal-open')
|
||||
focusFirstElement(modalCard)
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
const shouldRestoreFocus = modalBackdrop.classList.contains('open')
|
||||
modalBackdrop.classList.remove('open')
|
||||
modalBackdrop.setAttribute('aria-hidden', 'true')
|
||||
document.body.classList.remove('modal-open')
|
||||
|
||||
if (shouldRestoreFocus && lastModalTrigger && typeof lastModalTrigger.focus === 'function') {
|
||||
lastModalTrigger.focus()
|
||||
}
|
||||
|
||||
lastModalTrigger = null
|
||||
}
|
||||
|
||||
const renderCart = () => {
|
||||
@@ -173,7 +212,7 @@ const audienceContent = {
|
||||
price: Number(button.dataset.price)
|
||||
})
|
||||
renderCart()
|
||||
openCart()
|
||||
openCart(button)
|
||||
button.disabled = false
|
||||
})
|
||||
.catch(() => {
|
||||
@@ -189,14 +228,14 @@ const audienceContent = {
|
||||
price: Number(button.dataset.price)
|
||||
})
|
||||
renderCart()
|
||||
openCart()
|
||||
openCart(button)
|
||||
})
|
||||
})
|
||||
|
||||
cartOpenButton.addEventListener('click', openCart)
|
||||
cartOpenButton.addEventListener('click', () => openCart(cartOpenButton))
|
||||
mobileCartOpenButton.addEventListener('click', () => {
|
||||
closeMobileMenu()
|
||||
openCart()
|
||||
openCart(mobileCartOpenButton)
|
||||
})
|
||||
cartCloseButton.addEventListener('click', closeCart)
|
||||
viewCartButton.addEventListener('click', () => {
|
||||
@@ -211,11 +250,11 @@ const audienceContent = {
|
||||
}
|
||||
|
||||
closeCart()
|
||||
openModal()
|
||||
openModal(checkoutButton)
|
||||
})
|
||||
|
||||
orderButtons.forEach(button => {
|
||||
button.addEventListener('click', openModal)
|
||||
button.addEventListener('click', () => openModal(button))
|
||||
})
|
||||
|
||||
modalCloseButton.addEventListener('click', closeModal)
|
||||
@@ -234,15 +273,29 @@ const audienceContent = {
|
||||
|
||||
faqItems.forEach(item => {
|
||||
const trigger = item.querySelector('.faq-question')
|
||||
const answer = item.querySelector('.faq-answer')
|
||||
|
||||
if (!trigger || !answer) {
|
||||
return
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', () => {
|
||||
const isOpen = item.classList.contains('open')
|
||||
faqItems.forEach(entry => {
|
||||
const entryTrigger = entry.querySelector('.faq-question')
|
||||
const entryAnswer = entry.querySelector('.faq-answer')
|
||||
|
||||
entry.classList.remove('open')
|
||||
entry.querySelector('.faq-question').setAttribute('aria-expanded', 'false')
|
||||
entryTrigger?.setAttribute('aria-expanded', 'false')
|
||||
|
||||
if (entryAnswer) {
|
||||
entryAnswer.hidden = true
|
||||
}
|
||||
})
|
||||
if (!isOpen) {
|
||||
item.classList.add('open')
|
||||
trigger.setAttribute('aria-expanded', 'true')
|
||||
answer.hidden = false
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
205
promt.md
205
promt.md
@@ -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
|
||||
@@ -39,7 +39,7 @@ $test1_header_mode = isset( $test1_header_mode ) ? $test1_header_mode :
|
||||
<?php if ( 'cart' === $test1_header_mode ) : ?>
|
||||
<button class="cart-button" id="cartOpenButton" aria-label="Открыть корзину">
|
||||
<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 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">
|
||||
@@ -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>
|
||||
<button class="cart-button" id="mobileCartOpenButton" aria-label="Открыть корзину с мобильного меню">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user