Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

WordPress и WooCommerce · работает в браузере

Магазин электроники на WordPress

В электронике покупают по характеристикам: стандарт Wi‑Fi, площадь покрытия, мощность зарядки. Поэтому здесь каталог фильтруется по ним, товары сравниваются в таблице, а на карточке видно, сколько осталось на складе и когда привезут под заказ. Тёмная блочная тема и плагин каталога написаны с нуля, весь магазин работает у вас в браузере.

Сценарий: «Вольт» — вымышленный — продаёт роутеры и mesh-системы, наушники и колонки, умный дом и зарядки с доставкой по России.

Скриншот демо: Магазин электроники на WordPress

Открыть демо

Открыть приложение

WordPress запускается в браузере за 5–10 секунд: в первый раз скачивается около 17 МБ, дальше — из кеша. Удобнее с компьютера: рядом с магазином — подсказки, что попробовать, и переключатель «Витрина / Админка».

Приложение работает в браузере: на сервер ничего не отправляется.

Что показывает демо

  • Своя тёмная блочная тема: шрифты с кириллицей, ключевые характеристики прямо на карточке, адаптив под телефон

  • Фильтры по характеристикам: стандарт Wi‑Fi, площадь, подключение, мощность, бренд — со счётчиком товаров у каждого значения и ссылкой на отфильтрованный каталог

  • Сравнение до четырёх товаров: таблица характеристик рядом и переключатель «Только различия»

  • Наличие на карточке: «В наличии», «Осталось 2 шт.», «Под заказ · 5–7 дней» — срок задаётся в админке у товара

  • Квиз подбора роутера: площадь, стены, число устройств и тариф — в корзину ложится роутер или mesh-система с нужным числом модулей

  • Мгновенный поиск по «/» с ценой и наличием в подсказках: «hjenth» он поймёт как «роутер»

  • Избранное со своей страницей и ссылкой, быстрый просмотр с выбором цвета и количества, «Вы смотрели», отзывы с рейтингом

  • Полоска «до бесплатной доставки» в корзине и мини-корзине, промокод VOLT500, панель «В корзину» при прокрутке страницы товара

  • Консультант отвечает по каталогу с характеристиками и наличием: «какой роутер для дома на 120 м²?»

  • Доставка СДЭК и Почтой, оплата в стиле ЮKassa, покупка на компанию с ИНН, заказ в один клик — общие плагины с магазином кофе

Как попробовать

  1. Отфильтруйте роутеры

    «Каталог» → «Роутеры»: отметьте «Wi‑Fi 6» и площадь покрытия — список и счётчики обновятся сразу.

  2. Сравните

    «Сравнить» у двух-трёх роутеров, затем «Сравнение» в меню. «Только различия» оставит строки, где товары расходятся.

  3. Подберите роутер

    «Подбор роутера»: дом больше 150 м², бетонные стены, больше 30 устройств — квиз положит в корзину mesh из трёх модулей.

  4. Найдите товар

    Нажмите «/» и наберите «hjenth» — поиск поправит раскладку и покажет роутеры. Глаз на карточке откроет быстрый просмотр.

  5. Спросите консультанта

    Кнопка чата внизу справа: «какой роутер для квартиры 120 м²?» или «чем mesh лучше репитера?».

Без платных нейросетей

Магазин работает без сервера и без нейросети: WordPress Playground запускает PHP и базу SQLite в вашем браузере, внешние запросы отключены. Фильтры и сравнение — настоящий код плагина на WooCommerce, консультант отвечает поиском по каталогу и вопросам магазина. В рабочем проекте тот же код работает на хостинге, остатки приходят со склада, а консультант обращается к языковой модели.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Хостинг с PHP и MySQL, кеш страниц и фильтров, картинки через CDN
  • Остатки, цены и сроки поставки из 1С, МойСклад или от поставщиков по расписанию
  • API СДЭК и Почты России, ЮKassa или Т-Банк с чеками по 54-ФЗ
  • Выгрузка в Яндекс Маркет и Ozon, фиды для Яндекс Директа
  • Консультант на языковой модели по каталогу и инструкциям, с передачей оператору

Стек

  • WordPress
  • WooCommerce
  • PHP 8.3
  • Блочная тема
  • Свой плагин каталога
  • Свой плагин витрины
  • WordPress Playground
  • WebAssembly
  • SQLite

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Электронику выбирают по характеристикам — фильтры и сравнение сокращают путь до покупки.
  • Наличие и срок «под заказ» прямо на карточке — меньше звонков «а когда будет?».
  • Квиз подбора продаёт mesh-систему с нужным числом модулей, а не самый дешёвый роутер.

Для разработчиков

  • Плагин каталога не делает своих запросов к базе: фильтры строят ссылки с параметрами, которые уже понимает блок Product Collection.
  • Сравнение хранится в localStorage, а таблица характеристик рендерится на сервере по списку товаров из адреса.
  • Тёмная блочная тема своя, плагины доставки, оплаты и витрины — общие с магазином кофе; стили — scroll-driven анимации, View Transitions и container queries без JS-библиотек.

Советы

  • Совет 01

    Прежде чем писать свой поиск, посмотрите, что уже умеет WooCommerce: меньше кода — меньше поломок при обновлениях.

  • Совет 02

    Счётчики у фильтров обязательны: пустой результат после клика — это потерянный покупатель.

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • WordPress и WooCommerce · работает в браузере

    работает

    Интернет-магазин кофе на WordPress

    Живой магазин на WooCommerce: 15 товаров и 70 вариаций, квиз подбора, мгновенный поиск, избранное и быстрый просмотр, отзывы и промокоды, доставка СДЭК и Почтой по индексу, оплата в стиле ЮKassa, покупка на компанию с проверкой ИНН и заказ в один клик. WordPress запускается прямо в браузере — можно оформить заказ и зайти в админку.

    • WordPress
    • PHP

  • WordPress и WooCommerce · работает в браузере

    работает

    Магазин одежды на WordPress

    Магазин базовой одежды на WooCommerce: вариации по размеру и цвету кнопками, размерная сетка и подбор размера по росту и весу, фильтры по размеру, цвету и посадке, мгновенный поиск, избранное и быстрый просмотр, отзывы и промокоды, консультант по размерам и уходу. WordPress запускается прямо в браузере — можно оформить заказ и зайти в админку.

    • WordPress
    • PHP