О ТЦ «Шоколад»
ТЦ «Шоколад» — торгово-развлекательный центр в Вологде с 9000 м² торговых площадей на трёх этажах. Под одной крышей собрано более 100 арендаторов: магазины моды, красоты, спорта, электроники, товаров для дома и детей, сервисы, фудкорт «Время Есть» с тремя заведениями на 300 мест. Парковка на 450 мест, годовая посещаемость — 2,1 млн человек.
Слоган центра — «Место, где жизнь вкуснее». Аудитория сайта двусторонняя: посетители ищут конкретные магазины, акции и услуги; бизнес-клиенты приходят за арендой помещений и рекламными размещениями.
Что было нужно
Старый сайт не справлялся ни с одной из задач. Каталог арендаторов был статической свёрсткой, которую невозможно поддерживать; мобильная версия работала плохо; редакция новостей и акций требовала разработчика на каждое изменение. Бизнес-разделы (аренда, реклама) были слабо проработаны и не конвертировали B2B-обращения.
Задачи на проект:
- Разработать дизайн с нуля под современный визуальный язык ТРЦ
- Сверстать pixel-perfect и посадить на WordPress без page builders
- Сделать так, чтобы 100% контента редактировалось маркетингом через нативный Gutenberg-редактор — без сторонних конструкторов
- Реализовать удобный каталог 100+ магазинов с фильтрацией по категориям и быстрым AJAX-поиском
- Сделать интерактивную карту ТРЦ с навигацией по этажам
- Развести воронки B2C (посетители) и B2B (аренда, реклама)
- Оптимизировать скорость загрузки до PageSpeed 90+
- Настроить защиту от вирусов, взломов и спама в формах
Как я подошёл к работе
Дизайн с нуля — один человек на весь цикл
Дизайн разработан с нуля под идентичность ТРЦ «Шоколад». Современная визуальная сетка с пронумерованными секциями (01 — Каталог, 02 — Фудкорт, 03 — Акции…), крупная типографика, акценты на бренд-цвете, баланс между B2C и B2B контентом.
Главная идея — сайт должен передавать ощущение того же, что и реальный ТРЦ: «жизнь вкуснее» через визуальное богатство, но без перегруза.
Проект сделан под ключ одним человеком — от концепции дизайна до production-сервера. Это нетипичная конфигурация для рынка (обычно дизайнер и разработчик разные люди), но она даёт целостный результат: дизайн не «уходит в полёт фантазии» без оглядки на технические ограничения, а разработка не превращается в «реализацию того, что нарисовал кто-то другой». Все решения принимаются с учётом обоих контекстов сразу.
100% Gutenberg — нативная редактируемость
Самое сильное архитектурное решение этого проекта. Весь сайт собран на нативных Gutenberg-блоках без page builders типа Elementor или WPBakery. Это значит:
- Маркетинг ТЦ может полностью пересобрать любую страницу через стандартный редактор WordPress, который знаком всем без обучения
- Никаких сторонних редакторов с лицензиями, тормозами и зависимостями
- Любой WordPress-разработчик в будущем сможет работать с сайтом без специальной экспертизы по конкретному билдеру
- Скорость загрузки не страдает от тяжёлой инфраструктуры page builders
Под капотом — собственные блоки и расширенные шаблоны для каждой секции: Hero, Каталог, Категории, Карточки магазинов, Фудкорт, Акции, B2B-блоки аренды и рекламы, Контакты, Карта. Каждый блок имеет осмысленные настройки в инспекторе Gutenberg — никаких безграничных полей вроде «введите CSS вручную».
Умный AJAX-каталог 100+ магазинов
Каталог арендаторов — самая интерактивная часть сайта. Все 100+ магазинов и сервисов разделены на 8 категорий: Мода, Красота, Спорт, Детям, Электроника, Дом, Еда, Сервисы.
Технически реализован:
- Карточки магазинов как кастомный CPT с полями ACF Pro
- AJAX-фильтрация по категориям без перезагрузки страницы
- Быстрый поиск по названию магазина с автоподсказками
- Карточки разбиты на подразделы — Магазины, Услуги, Детям
- Прямые URL для каждой категории (
/magaziny/cat/fashion/, и т.д.) с правильным SEO
Пользователь видит магазины мгновенно, без перезагрузок, и может быстро найти конкретный бренд или категорию.
Интерактивная карта ТРЦ
Отдельная страница /karta/ с интерактивной картой по этажам. Посетитель видит, где находится каждый магазин на конкретном этаже — критичная функция для большого ТРЦ.
Авторский антиспам-модуль
Спам в формах обратной связи — типичная боль крупных сайтов. Готовые решения (reCAPTCHA, hCaptcha) добавляют внешние зависимости, замедляют сайт и портят UX. Для этого проекта я написал собственный антиспам-модуль, который сейчас работает на нескольких моих проектах:
- Невидимая фильтрация без CAPTCHA и проверки «я не робот»
- Honeypot-поля для отсечения примитивных ботов
- Анализ поведения форм (время заполнения, паттерны ввода)
- Серверная фильтрация по содержимому и источнику
- Логирование подозрительных попыток для дальнейшей настройки
Результат — спам в почту клиента не приходит, при этом обычные пользователи вообще не замечают защиту.
Оптимизация скорости — PageSpeed 99 / 81
Скорость на этом проекте — отдельная гордость. PageSpeed 99 на desktop, 81 на mobile — для сайта с большим количеством изображений магазинов, интерактивным каталогом и AJAX-функциональностью это очень высокие показатели.
Что сделано:
- Минификация и объединение CSS/JS на уровне темы (не плагином, а в коде)
- Все изображения в WebP с правильным fallback
- Critical CSS инлайнится в
<head>, остальное грузится асинхронно - Lazy loading для всего, что не на первом экране, включая AJAX-результаты каталога
- WP Rocket для серверного кэширования
- Оптимизированные запросы к базе (никаких N+1 при выводе каталога)
- Удалены лишние скрипты и стили WordPress по умолчанию
Защита от вирусов и взломов
Безопасность на нескольких уровнях:
- Скрытие версии WordPress и стандартных путей админки
- Защита wp-login от перебора паролей с rate-limiting
- Антивирусный мониторинг файлов темы и uploads
- Регулярные автоматические бэкапы с хранением в облаке
- SSL с принудительным редиректом на https
- Защита wp-config.php и .htaccess от несанкционированных изменений
- Двухфакторная аутентификация в админке
Разводка B2C и B2B воронок
ТРЦ обслуживает два типа клиентов с разными целями:
- B2C (посетители): ищут магазины, акции, время работы, маршрут. Главное меню и каталог ведут сюда.
- B2B (аренда и реклама): ищут условия аренды помещений, варианты размещения рекламы, контакты отдела коммерции. Отдельный раздел в меню, со своей конверсионной воронкой и формами заявок.
Разводка через структуру меню и контент главной страницы — каждый тип посетителя видит то, что ему нужно, и не отвлекается на чужой контент.
Что получилось
Сайт работает в продакшене с мая 2026. PageSpeed 99/81 стабильно держится после нескольких месяцев работы (большая часть сайтов «проседает» по скорости со временем — здесь нет).
Маркетинг ТЦ «Шоколад» полностью самостоятельно ведёт каталог магазинов, обновляет акции, добавляет новые разделы. Заявки на аренду и рекламу приходят через формы без потерь — авторский антиспам отсекает мусор, не мешая реальным клиентам.
Сайт обслуживает аудиторию ТРЦ — около 2,1 млн посетителей в год по данным самого центра. Это значит, что сайт должен работать стабильно, без сбоев, при пиковых нагрузках во время акций и сезонных распродаж. Архитектура справляется.
