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

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

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

Одежду возвращают чаще всего из-за размера. Поэтому здесь размер подбирается по двум вопросам — рост и вес — прямо на странице вещи и сразу выбирается в форме покупки, с учётом цвета и остатков. Монохромная блочная тема с огромной типографикой и жёсткой сеткой написана с нуля, весь магазин работает у вас в браузере.

Сценарий: «Контур» — вымышленный — шьёт в Иванове базовую одежду в чёрном, белом и сером: футболки, худи, брюки, куртку и пальто, с доставкой по России и примеркой в пункте СДЭК.

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

Открыть демо

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

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

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

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

  • Своя блочная тема в стиле брутализма: огромная типографика, сетка из двухпиксельных линий, бегущая строка, адаптив под телефон

  • Размер и цвет — кнопками вместо выпадающих списков, у каждого цвета своё фото; размер, которого нет в наличии, зачёркнут, при остатке в одну-две штуки — «Осталось 1»

  • Подбор размера по росту и весу: два вопроса в окне на странице вещи — размер выбран в форме покупки, строка в таблице мерок подсвечена

  • Подбор учитывает выбранный цвет: если такого размера в нём нет, честно скажет об этом

  • Размерные сетки для верха и низа и страница «Как снять мерки»

  • Фильтры каталога по размеру, цвету, посадке и материалу — со счётчиком вещей у каждого значения

  • Мгновенный поиск по «/», избранное со своей страницей, быстрый просмотр с размером и цветом кнопками, отзывы с рейтингом

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

  • Консультант отвечает про размеры, примерку, возврат и уход за тканями

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

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

  1. Подберите размер

    Откройте худи «Бетон», выберите цвет и нажмите «Подобрать размер»: рост 173–180 см, вес 76–88 кг — размер L выбран в форме.

  2. Проверьте наличие

    У худи цвета «Серый меланж» размер XL закончился: кнопка зачёркнута, а подбор размера скажет, что его нет в этом цвете.

  3. Отфильтруйте каталог

    «Каталог»: отметьте цвет «Графит» и размер XS — останутся вещи, которые шьют в таком размере и цвете.

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

    Кнопка чата внизу справа: «как подобрать размер?» или «как стирать худи?».

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

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

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

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

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

Стек

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

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

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

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

Для бизнеса

  • Подбор размера по росту и весу помогает сократить возвраты — главную боль магазинов одежды.
  • Размер и цвет — кнопками, отсутствующие размеры зачёркнуты: покупатель не узнаёт об этом уже в корзине.
  • Консультант отвечает про размеры, примерку и уход — меньше вопросов в поддержку.

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

  • Подбор размера — плагин квиза в режиме «для товара»: баллы по росту и весу выбирают вариацию в форме с учётом цвета и остатков.
  • Кнопки размера и цвета работают поверх стандартной формы вариаций WooCommerce, поэтому корзина и остатки ведут себя штатно.
  • Монохромная блочная тема своя, плагины доставки, оплаты и витрины — общие с другими магазинами: тема меняет только CSS-переменные.

Советы

  • Совет 01

    Не заменяйте форму вариаций своей, а улучшайте её: так не сломаются другие плагины и обновления.

  • Совет 02

    Собирайте статистику возвратов по размерам: она подскажет, где врёт размерная сетка.

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

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

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

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

Все демо

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

    работает

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

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

    • WordPress
    • PHP

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

    работает

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

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

    • WordPress
    • PHP