Сайт-витрина на WordPress с заказом во ВКонтакте

Задача

Заказчик, бренд натуральных эфирных масел и гидролатов «Дыхание Поволжья», размещает рекламу на билбордах в Москве. Человек с улицы переходит по ссылке с билборда, почти всегда с телефона, смотрит каталог и идёт покупать. Оплата на сайте не нужна: по договорённости с заказчиком весь процесс покупки проходит в сообществе ВКонтакте, а сайт должен привести туда покупателя с уже выбранным товаром.

Требования к сайту сформулированы просто:

• мгновенная загрузка на мобильном, без тяжёлых конструкторов и внешних шрифтов;
• оформление по брендбуку заказчика: цвета, шрифты Bebas Neue и Geologica, векторный логотип из файлов дизайнера;
• админка, в которой заказчик без опыта работы с WordPress сам меняет товары, цены, наличие и почти все тексты сайта;
• русская и английская версии, светлая и тёмная тема.

Решение

Сайт-витрина на WordPress с собственной темой без сторонних плагинов и конструкторов, на чистых CSS и JS. Сайт-витрина показывает товар и ведёт к заказу, но сам оплату не принимает. Рядом работает бот сообщества ВКонтакте на Python, который принимает заказ с сайта и доводит его до менеджера.

Что реализовано:

• Свой тип записи «Товары»: несколько объёмов у каждого товара, у объёма своя розничная и оптовая цена, наличие («В наличии», «Под заказ», «Нет в наличии»), метка на фото, галерея, полное описание (состав, применение, хранение), английская версия.
• Корзина на устройстве покупателя: выезжающая панель, количество, сумма по строке и итог, оптовая цена включается сама при нужном количестве. Объём без наличия положить в корзину нельзя.
• Две дороги к заказу: кнопка «Купить во ВКонтакте» у объёма со ссылкой на товар сообщества и «Оформить в ВК» из корзины, которая передаёт состав боту.
• Панель «Сайт» в админке: обзор с готовностью к запуску, «Тексты и блоки» с живым предпросмотром, «Контакты и реквизиты» с проверкой ИНН и ОГРН, «SEO и счётчики», «Документы» с историей версий, «Цены и наличие» одной таблицей.
• Светлая и тёмная тема по настройке устройства с ручным переключателем, RU/EN с определением языка по браузеру и переключателем в шапке.
• Политика обработки персональных данных и уведомление о cookie по шаблонам, реквизиты подставляются автоматически; счётчики Яндекс.Метрики и Google Analytics грузятся только после согласия.
• Защита: XML-RPC закрыт на входном nginx, форма входа ограничена по числу попыток, логин администратора не виден снаружи, комментарии выключены, ежедневный слепок базы и фото.

Как это устроено

WordPress: свой тип записи «Товары»

Стандартные записи WordPress для товаров с несколькими объёмами не годятся, поэтому в теме объявлен собственный тип записи. Объёмы, цены, опт и наличие хранятся у каждого товара отдельным набором полей и редактируются в карточке товара над описанием. Категории товаров получили свои страницы, у карточки есть блок похожих товаров и постраничная навигация в каталоге.

Корзина на localStorage

Корзина живёт в браузере покупателя, в хранилище localStorage, и не требует ни аккаунта, ни сессии на сервере. Это хранилище, которое браузер держит на устройстве между визитами. Скрипт корзины считает сумму, включает опт при достижении порога и не пускает в корзину объём без наличия.

Заказ через сообщения ВКонтакте

Положить товар в корзину ВКонтакте со стороннего сайта нельзя, это ограничение самой платформы. Поэтому кнопка «Купить во ВКонтакте» открывает оформление заказа в сообществе с нужным товаром, а корзина сайта отдаёт состав на свой API, получает одноразовый код и открывает чат сообщества со ссылкой, в которой этот код передан. Код живёт три часа. Для тех, кто уже переписывался с сообществом, ВКонтакте не передаёт параметр ссылки, поэтому код кладётся в буфер обмена и бот понимает его текстом. Если сайт не ответил за три секунды или бот выключен, корзина возвращается к копированию текста заказа.

Бот сообщества ВКонтакте на aiohttp

Бот написан на Python с aiohttp и работает через Long Poll, состояние диалогов хранит в SQLite. Каталог он читает с сайта: у сайта есть API, который отдаёт товары, объёмы, цены, оптовые пороги и наличие, с кэшем на минуту. Заказ по коду бот забирает у сайта один раз, состав сверяется с базой сайта, а не с тем, что прислал браузер. Опт, позиции не в наличии и незнакомые вопросы уходят менеджеру. У администратора есть команды версии и статистики, список сотрудников с ролями и фильтр спама.

Кастомная тема по брендбуку

Цвета и шрифты взяты из брендбука, файлы шрифтов лежат в теме, запросов к Google Fonts нет. Логотип в векторе в нескольких вариантах, растения с роллапа и узор из знака на первом экране. По просьбе заказчика поверх брендбука добавлен хвойный зелёный акцент для кнопок и плашек. Иконки сайта собраны из знака, включая варианты для телефона и manifest.json.

Админка на языке заказчика

Раздел «Сайт» открывается сразу после входа и показывает список готовности к запуску. В «Текстах и блоках» правится любая надпись главной, шапки, подвала, каталога, корзины и плашки cookie; текст меняется в предпросмотре во время набора, вид переключается между компьютером и телефоном, у каждого поля есть «Исходный текст». Английские тексты редактируются там же с метками «нет перевода» и «проверьте перевод». Инструкция для заказчика в Word собирается скриптом: он снимает экраны сайта и админки браузером, рисует сноски и собирает документ на 29 страниц с 17 скриншотами.

Результат

• Сайт работает на боевом кириллическом домене с 21 сентября 2026 года, индексация открыта, домены с латиницей и опечаткой ведут на основной постоянным редиректом.
• Заказчик меняет цены, наличие, фото и тексты сам; разработчик для этого не нужен.
• Покупатель из рекламы попадает на лёгкий мобильный каталог и уходит в чат сообщества с готовым заказом.
• Бот и сайт работают по одному каталогу: второго списка товаров и расхождений в ценах нет.
• Сайт открывается в теме устройства посетителя и на его языке, русском или английском.
• Ежедневный слепок базы и загруженных фото хранится две недели, HTTPS продлевается автоматически.

Технологии: что и зачем

• WordPress с собственной темой — заказчик получает привычную админку и редактор, а тема не зависит от сторонних плагинов и конструкторов.
• PHP 8.2 — язык темы: типы записей, панель «Сайт», API для бота, микроразметка.
• MariaDB 10.11 — база данных WordPress: товары, тексты, настройки.
• Чистые CSS и JS — витрина, обе темы оформления, корзина и галерея без фреймворков, поэтому страница лёгкая на телефоне.
• Python и aiohttp — бот сообщества ВКонтакте: Long Poll, диалог кнопками, чтение каталога с сайта.
• SQLite — состояние диалогов бота, без отдельного сервера базы.
• Docker Compose — одинаковое окружение локально и на сервере, бот в отдельном контейнере.
• Let's Encrypt — HTTPS с автоматическим продлением на сервере сайтов студии.

Статус

Сайт версии 0.9.9 от 22 сентября 2026 года, бот сообщества версии 1.2.1. Сайт открыт на домене дыханиеповолжья.рф, индексация включена, счётчик Яндекс.Метрики подключён с целью на нажатие «Оформить в ВК». Каталог пока заполнен двумя позициями и ждёт фото и цен от заказчика; региональная часть под Москву и Чувашию появится после условий доставки. Автотестов в проекте нет, приёмка идёт по критериям из документации.