Разработка масштабируемого интернет-магазина с личным кабинетом

«Мирсант» — компания, специализирующаяся на продаже сантехнического оборудования и комплектующих, работающая как с розничными, так и с оптовыми клиентами. Бизнес активно развивается, ассортимент постоянно расширяется, а продажи ведутся через офлайн- и онлайн-каналы.

E-commerce Сантехника

mirsant.ru

Проблема клиента

На момент обращения в студию у клиента отсутствовал полноценный инструмент онлайн-продаж, способный:

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

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

Задачи проекта

Разработать интернет-магазин сантехники с нуля
Реализовать личный кабинет с возможностью онлайн-оплаты
Обеспечить продажи для розничных и оптовых клиентов
Интегрировать сайт с 1С (товары, цены, остатки, склады)
Реализовать систему акций, новостей и спецпредложений
Создать адаптивный и стабильный интерфейс для всех устройств

Реализация проекта

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

UX/UI-дизайн и логика пользовательских сценариев

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

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

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

Frontend-разработка и адаптивная вёрстка

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

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

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

Архитектура каталога и работа с данными 1С

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

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

Реализация логики розничных и оптовых продаж

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

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

Функционал карточки товара и работа с комплектами

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

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

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

Интеграция с 1С и управление остатками

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

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