Как объединить товары и услуги в интернет-магазине: перестраиваем корзину и оформление заказа

Крупнейшая крымская сеть гипермаркетов «УютСтрой» — 180 000 товаров, 4 магазина и 800+ заказов в день — поставила перед АЙТИФОКС задачу добавить в существующий интернет-магазин продажу услуг: монтажа, установки, покраски и порезки материалов. Монтаж, установка, покраска, порезка материалов — логичное расширение бизнеса для строительного ритейлера.

Подробнее о проекте — в нашем кейсе: https://itfox-web.ru/ru/cases/uiutstroi

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

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

Сначала мы решили посмотреть на рынок. Вдруг кто-то уже придумал, как продавать услуги нормально, и мы просто возьмём готовое решение?

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

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

Первое, перестали думать об услуге как о товаре, сели и выписали все её особенности.

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

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

Первая идея родилась быстро: галерея услуг прямо в карточке товара.

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

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

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

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

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

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

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

Чтобы товары и услуги могли работать в одной корзине интернет-магазина, АЙТИФОКС переработал её модель. В системе появился новый тип позиции с собственными признаками: типом оказания услуги, привязкой к товару и субподрядчиком. Для этого изменили методы добавления и удаления позиций, расчёта суммы и отображения корзины.

А дальше началось самое интересное — оформление заказа:

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

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

Сценарии получились такие:

• В корзине только услуги гипермаркета — доставка не нужна. Мы блокируем адрес и показываем выбор магазина.

• В корзине только услуги по адресу — появляется поле для адреса доставки.

• В корзине и то, и другое — показываем и выбор магазина, и адрес.

• Пользователь — юридическое лицо — услуги ему недоступны. Только  для физиков.

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

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

Теперь в одной карточке товара появились и наши услуги со своей кнопкой «Добавить» и еще две кнопки рядом. На тестировании они начали конфликтовать:

• Нажимаешь «Добавить услугу» — сбрасывается выбранный комплект.

• Нажимаешь «Добавить комплект» — услуги исчезают.

За три дня команда АЙТИФОКС переработала взаимодействие двух логик: сделала кнопки независимыми, добавила проверки при добавлении в корзину и точечно изменила интерфейс, не ломая уже работающий функционал комплектов.

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

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

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

Такой подход — не про «авось», а про осознанную стратегию. Вот что мы делали, чтобы минимизировать стресс и не сорвать сроки:

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

Договариваемся о приоритетах. Открыто сказали заказчику: «Вот что мы успеем сделать точно, а вот что будем дорабатывать по ходу, если позволит время». Это снимает ожидания и даёт пространство для манёвра.

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

Фиксируем решения. Даже без формального ТЗ мы вели лог всех договорённостей — в чате, в таск-трекере. Спасает, когда через неделю забываешь, о чём договаривались.

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

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

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

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

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