встраиваемый интернет-магазин для корпоративной платформы

DaOffice.ru — корпоративная социальная сеть для коммуникаций, геймификации и HR-процессов. Платформа используется крупными компаниями для мотивации сотрудников, онбординга и командообразования.

Клиент обратился за разработкой встроенного магазина товаров. Также, нужен был модуль для обмена виртуальной валюты (заработанной за активности, благодарности коллег) на мерч, подарки, услуги.

Главные вызовы: интеграция со множеством сторонних API (валюта, уведомления, профили), работа без простоев платформы, сохранение идентичности дизайна текущего портала в новом модуле, удобная админка для ассортимента и трекинга заказов.

Полный список функционала, который необходимо было разработать указан ниже:

Пользовательский интерфейс

• Каталог товаров с фильтрами, поиском, фото, описаниями.
• Корзина с редактированием, предпросмотром баланса.
• Оплата виртуальной валютой, списание/возврат.
• История заказов, статусы (оплачен, в обработке, доставлен).
• Персональные рекомендации по балансу и истории.

Админ-панель

• Управление ассортиментом: добавление/редактирование товаров (CSV-импорт).
• Настройки магазина: обложка, правила, валюта.
• Трекинг заказов: поиск, статусы, экспорт отчетов.
• Аналитика: топ-товары, конверсия.

Интеграции

• API DaOffice: авторизация, баланс валюты, профили.
• Уведомления в чате платформы о заказах.
• Webhook для событий (списание, доставка).

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

В шапке сервиса расположена поисковая строка с фильтрацией по названию и описанию товара в режиме реального времени.

Клик на карточку товара открывает детальную страницу с галереей фотографий, полным описанием, техническими характеристиками, артикулом и информацией о доступности. Если товар имеет варианты (размер, цвет, комплектация), пользователь может выбрать нужные параметры перед добавлением в корзину.

Вся функциональность интегрирована с API DaOffice для получения текущего баланса виртуальной валюты и автоматического определения доступности товаров для покупки. Данные синхронизируются в реальном времени.

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

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

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

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

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

При успешном оформлении заказа происходит автоматическое списание виртуальной валюты с баланса пользователя через интеграцию с API DaOffice. Система формирует заказ со статусом «Оплачен» и отправляет уведомление в чат платформы DaOffice о успешном создании заказа. Пользователь видит страницу подтверждения «Заказ успешно оформлен!»
с информацией о доставке заказа.

Если заказ отменяется или товар не может быть доставлен, тогда виртуальная валюта возвращается на баланс пользователя.

Раздел «Мои заказы» содержит полную историю покупок пользователя, при нажатии на наименование заказа открывается детальная страница с полной информацией.

Система поддерживает несколько статусов заказа, отображаемых как в списке, так и на детальной странице. 

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

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

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

Для добавления нового товара администратор использует кнопку «Создать», которая открывает форму создания товара. Редактирование существующих товаров происходит через ту же форму с предзаполненными данными. Администратор может изменить любые параметры товара, обновить фотографии, скорректировать цену или количество на складе. 

Также для товаров реализован параметр «Активность», который используется как быстрый переключатель публикации товара. Администратор может включать или отключать отображение позиции в пользовательском каталоге без удаления карточки и без потери данных по товару (описания, фото, цены, остатков).

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

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

Администратор может гибко настраивать внешний вид и поведение магазина через раздел «Настройка магазина» в панели управления. Этот функционал позволяет брендировать интерфейс под стиль компании и управлять правилами работы магазина без привлечения разработчиков.

Администратор может загрузить обложку (баннер) магазина (JPG/PNG до 10 МБ), которая будет отображаться на главной странице каталога. Через встроенные WYSIWYG-редакторы настраиваются тексты для различных информационных блоков: приветствие на главной, полные правила магазина, инструкция «Как заработать валюту» и сообщения, которые пользователь увидит при оформлении заказа и после его успешного завершения.

В настройках задаются правила приема заказов, можно установить точную дату и время открытия магазина, включить таймер обратного отсчета до старта продаж с настройкой текста и цветов. Администратор определяет доступные статусы заказов (Новый, В обработке, Отправлен и т.д.) и способы получения товара (Самовывоз, Курьером, Почтой России), привязывая к ним необходимость ввода адреса. Для самовывоза можно добавить конкретные адреса пунктов выдачи.

Также в разделе управления администратор может задать цвета для меню (фон, текст, иконки в разных состояниях), основных и вторичных кнопок, табов и элементов управления («плюс/минус»). Для каждого элемента настраиваются цвета в обычном состоянии, при наведении, нажатии и в неактивном режиме, что позволяет полностью адаптировать магазин под корпоративный стиль.

Для операционной работы магазина в админ-панели реализован раздел «Заказы», который позволяет отслеживать все заявки пользователей в едином списке и быстро находить нужные заказы по параметрам. В интерфейсе предусмотрены фильтры и поиск по ключевым полям (например, номер заказа, дата, сумма, статус и тд.), чтобы менеджер мог оперативно работать даже с большим объемом заказов.

Модуль магазина встроен в экосистему DaOffice и использует API платформы для авторизации пользователей без отдельной регистрации в магазине. В качестве базового сценария реализована авторизация через DaOffice (OAuth) с последующей работой магазина по токенам доступа, чтобы корректно идентифицировать пользователя и его права в рамках корпоративной сети.​

После авторизации магазин запрашивает через API DaOffice профиль пользователя и отображает данные в интерфейсе (например, чтобы корректно формировать заказ и привязывать его к конкретному сотруднику). Отдельно интегрирован запрос баланса виртуальной валюты пользователя — баланс подтягивается из DaOffice и используется на ключевых шагах: показ доступных к покупке товаров, проверка достаточности средств в корзине и подтверждение оплаты.​

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