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

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

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

Магазин на WordPress обычно показывают скриншотами. Здесь он настоящий: PHP, база данных и WooCommerce скомпилированы в WebAssembly и запускаются у вас в браузере за несколько секунд. У каждого посетителя своя копия — можно оформлять заказы, менять цены и товары, ничего не сломав. Тема и плагины написаны с нуля под российский магазин.

Сценарий: Обжарочная «Зерно» — вымышленная — продаёт кофе в зёрнах и молотый, дрип-пакеты и посуду с доставкой по России.

Скриншот демо: Интернет-магазин кофе на WordPress

Открыть демо

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

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

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

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

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

  • Вариативные товары: вес × помол, у каждой вариации своя цена, вес для доставки и остаток

  • Квиз подбора: пять вопросов, баллы по вкусам и правила выбора вариации — набор кладётся в корзину одной кнопкой

  • Доставка СДЭК и Почтой России: цена по весу заказа и региону индекса, срок, СДЭК бесплатно от 3 000 ₽

  • Оплата «картой или СБП» через страницу в стиле ЮKassa с тестовыми картами успеха и отказа

  • Покупка на компанию: поле ИНН с проверкой контрольных цифр, реквизиты в заказе

  • Заказ в один клик по имени и телефону — в админке со статусом «На удержании»

  • Мгновенный поиск по «/»: понимает текст в чужой раскладке, помнит прошлые запросы и подсказывает популярные

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

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

  • Консультант по каталогу, ценам и доставке — тот же виджет, что в демо консультанта

  • Кнопка «Начать заново» возвращает магазин в исходное состояние за секунды

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

  1. Подберите кофе

    «Подбор кофе» в меню: пять вопросов — и сорт с нужным помолом и весом. «Положить в корзину» — и к оформлению.

  2. Оформите заказ

    Укажите индекс 630000 — СДЭК и Почта пересчитают цену и срок для Новосибирска. В «Компания или ИП» введите ИНН 7728123450 — магазин найдёт ошибку.

  3. Оплатите тестовой картой

    «Картой или СБП онлайн» ведёт на страницу оплаты: 4000 0000 0000 0002 — банк откажет, 5555 5555 5555 4477 — заказ оплачен.

  4. Загляните в админку

    Кнопка «Админка» над магазином: заказ уже там, с доставкой и ИНН. Поменяйте цену товара и вернитесь на витрину.

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

Магазин работает без сервера и без нейросети: WordPress Playground запускает PHP и базу SQLite в вашем браузере, внешние запросы отключены. Доставка считается по модели тарифов СДЭК и Почты, оплата — имитация страницы ЮKassa, консультант отвечает поиском по каталогу и вопросам магазина. В рабочем проекте тот же код обращается к API СДЭК, Почты и ЮKassa, а консультант — к языковой модели.

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

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

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

Стек

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

Основано на

Книги и дисциплины, идеи из которых работают в этом демо.

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

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

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

Для бизнеса

  • Магазин сразу под российские реалии: СДЭК и Почта по индексу, оплата картой и СБП, покупка на компанию с ИНН.
  • Квиз подбора кладёт в корзину конкретную вариацию — покупатель не теряется в весах и помолах.
  • Заказ в один клик — для тех, кто не хочет заполнять форму.

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

  • Своя блочная тема и плагины на PHP 8.3, в CI их проверяет PHPStan уровня 6 со стабами WordPress и WooCommerce.
  • В демо работает WordPress Playground: PHP и SQLite в WebAssembly, снимок магазина собирается заранее и грузится за секунды.
  • Доставка — свои методы WooCommerce с моделью тарифов; в проде на их месте вызовы API СДЭК и Почты.
  • Поиск, избранное и быстрый просмотр — плагин витрины: блоки сами встают в шаблоны темы через Block Hooks, данные берутся из Store API WooCommerce.

Советы

  • Совет 01

    Делайте блочные темы, а не классические: шаблоны потом правятся в редакторе без разработчика.

  • Совет 02

    Не ставьте десять плагинов ради мелочей: каждый замедляет магазин и обновляется по-своему.

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

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

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

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

Все демо

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

    работает

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

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

    • WordPress
    • PHP

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

    работает

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

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

    • WordPress
    • PHP