Как мы добавили продажу услуг в интернет-магазин: опыт «УютСтроя»

Задача, которая оказалась сложнее, чем казалась

Крупная крымская сеть гипермаркетов «УютСтрой» (180 000 товаров, 4 магазина, более 800 заказов в день) обратилась к нам с запросом: добавить на сайт продажу услуг — монтаж, установку, покраску, порезку материалов.

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

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

Рассказываем, как мы выпутывались.

Что не так с конкурентами

Мы изучили рынок — и быстро поняли, что готовых решений нет. У всех игроков примерно одни и те же проблемы: цены на услуги не показывают, пользовательский путь разорван, а сами услуги спрятаны так, что их сложно найти. В одном магазине услуга улетала в отдельную корзину — отдельно от товаров. В другом — при клике на услугу пользователя перекидывало на страницу с простынёй текста, и он терял нить покупки.

Мы решили делать наоборот: цена должна быть видна, услуга должна покупаться в один клик, и никаких отдельных корзин.

Услуга — не товар

Первое, что мы сделали, — перестали думать об услуге как о товаре. У неё нет склада, нет остатков, нет доставки в классическом смысле. Зато есть тип оказания: либо на дому у покупателя, либо в гипермаркете. От этого зависит, как оформлять заказ.

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

Все эти нюансы нужно было зашить в логику так, чтобы пользователь ничего не заметил. Он просто выбирает услугу, добавляет в корзину и оформляет заказ. А под капотом система сама решает, показывать ему адрес доставки или выбор магазина, разрешать оплату или блокировать.

Как мы разместили услуги в карточке товара

Первая идея родилась быстро: галерея услуг прямо в карточке товара. Вы смотрите на дверь, а рядом — карточки с услугами: «Монтаж», «Демонтаж», «Покраска». У каждой — название, иконка, цена и кнопка «Добавить». Можно сразу поставить количество. Никаких «цену уточняйте». Человек видит, сколько заплатит, и покупает не отвлекаясь.

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

Тогда мы придумали фишку: если услуг больше пяти, последним элементом галереи появляется кнопка «Все услуги». Нажимаешь — открывается модальное окно со списком. Там можно прочитать полное название, перейти на детальную страницу или сразу добавить в корзину. И закрыть окно — вы остаётесь на той же карточке товара. Никаких переходов, никаких потерь пользователя.

Страница услуги: зачем изобретать велосипед

Детальную страницу услуги мы решили не делать с нуля. Взяли шаблон карточки товара и подставили данные услуги. Те же кнопки, тот же макет. Пользователь не переучивается, а мы экономим время на дизайне и вёрстке. Единственное, что добавили — блок «Товары, с которыми можно купить эту услугу».

Кроме того, мы превратили старую информационную страницу, которая три с половиной года просто рассказывала об услугах, в точку продаж. Теперь на ней — такой же блок с кнопками «В корзину». Человек, который пришёл просто почитать, может купить в один клик.

Одна корзина для всего

Мы твёрдо решили: одна корзина для товаров и услуг. Услуги — в приоритетном блоке сверху. Если услуга куплена вместе с товаром (например, дверь и её монтаж), они группируются. Можно прямо в корзине изменить количество или удалить услугу.

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

Оформление заказа: сценарии, о которых мы не знали

Мы не знали, что услуги бывают двух типов, пока не углубились в детали. Одни оказываются по адресу покупателя — мастер приезжает на дом. Другие — только в гипермаркете, потому что там нужно спецоборудование: порезка металла, распил древесины.

И теперь, когда пользователь идёт оформлять заказ, мы должны понять, что у него в корзине. Сценарии получились такие:

1. Только услуги гипермаркета — доставка не нужна. Блокируем адрес, показываем выбор магазина.
2. Только услуги по адресу — появляется поле для адреса доставки.
3. И то, и другое — показываем и выбор магазина, и адрес.
4. Пользователь — юридическое лицо — услуги недоступны. Только для физиков.

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

Когда два функционала не поделили карточку

За месяц до нашего проекта команда заказчика уже внедрила «комплекты товаров» — когда к основному товару предлагаются сопутствующие: к люстре — патрон, к двери — ручка. У каждого комплекта своя кнопка «Добавить в корзину».

И вот теперь в одной карточке товара появились и наши услуги со своей кнопкой. На тестировании они начали конфликтовать: нажимаешь «Добавить услугу» — сбрасывается выбранный комплект. Нажимаешь «Добавить комплект» — услуги исчезают.

Три дня мы переписывали взаимодействие двух логик. Сделали кнопки независимыми, добавили проверки при добавлении в корзину, перестроили часть интерфейса. Это было сложно, потому что кодовую базу мы не трогали — вносили изменения точечно, чтобы не сломать уже работающий функционал.

Новый закон и субподрядчики

В процессе разработки выяснилось: в начале 2026 года вышел новый закон — если услуги оказывает субподрядчик, в чеке обязательно должны быть его реквизиты: название, ИНН, телефон.

Пришлось добавлять в модель услуги поле «субподрядчик» и передавать эти данные в кассу, чтобы она корректно пробивала чеки. И всё это — в те же полтора месяца, без права на ошибку.

Как мы работали без идеального ТЗ

Мы сознательно пошли на риск: вместо того чтобы тратить месяцы на вылизывание документации, проанализировали базовые требования за пару дней и начали разработку. Остальное дорабатывали по ходу.

Вот что помогало не сорвать сроки:

1. Старт с ядра. Выделили самые важные сценарии — те, без которых функционал не имеет смысла. Всё остальное — второстепенно.
2. Договорённости о приоритетах. Открыто сказали заказчику: «Вот что мы успеем сделать точно, а вот что будем дорабатывать по ходу».
3. Прозрачность процесса. Показывали промежуточные результаты каждую неделю. Заказчик видел прогресс и мог скорректировать требования.
4. Фиксация решений. Даже без формального ТЗ вели лог всех договорённостей — в чате, в таск-трекере.
5. Готовность к переделкам. Понимали, что не все решения будут идеальными с первого раза, и закладывали время на доработки.

Главное — мы не гнались за идеальной аналитикой, а создавали рабочий продукт. И когда через полтора месяца всё заработало, даже самый требовательный заказчик оценил скорость и качество.

Что мы поняли

Продажа услуг — это не просто «добавить кнопку». Это перестройка всей цепочки: от того, как вы показываете услугу в карточке товара, до того, как покупатель получает чек на почту. Это десятки сценариев, которые нужно предусмотреть. Это интеграция с существующими системами, которые уже живут своей жизнью.

Как сказала наш менеджер Наталья Жосан: «Мы смогли это всё не лепя Франкенштейна, а привести к общему знаменателю и интегрировать без больших проблем в существующий мощнейший функционал. Вот это я считаю классной работой».

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