«Евроген» — компания, на сайте которой специалисты выбирают реактивы и наборы, заказывают научные услуги и находят материалы для работы. Здесь важны подробности: каталожный номер, параметры услуги, состав заказа и научная терминология.
Мы разрабатывали новую версию evrogen.ru: сайт и систему управления контентом, формы заказа и связь с существующей CRM. Задача заключалась в обновлении продукта с учётом сценариев, которыми уже пользуются лаборатории.
Обновить такой сайт — значит разобраться не только со страницами, но и с тем, как специалисты работают с каталогом и оформляют заявки.
В требованиях клиента были ручное обновление цен и материалов, связи между продуктами и инструкциями, сохранение старых учётных записей и привычных способов заказа. Научные тексты требовали предметной точности: похожие заголовки и обозначения могли иметь разный смысл.
Новый сайт должен был учитывать эти особенности и работать вместе с действующей CRM, где находятся коммерческие данные.
Для новой версии мы реализовали сайт на Next.js и систему управления контентом на Payload CMS. На стороне сайта находятся публичные страницы и содержание каталога; CRM остаётся источником пользователей, заказов, цен и параметров услуг.
Такое разделение определяет, где редактировать материалы и откуда получать данные для оформления заказа. Разработка публичного сайта опирается на существующие коммерческие процессы компании.
Заказ олигонуклеотидов, секвенирование по Сэнгеру и нанопоровое секвенирование требуют разных наборов данных. Для этих услуг в новой реализации предусмотрены отдельные предметные формы.
Для олигонуклеотидов реализован редактор последовательностей с модификаторами и расчётом стоимости. Логика расчёта адаптирована из существующей реализации на C# в TypeScript.
При работе над формой Сэнгера клиент отдельно обозначил важность табличного ввода и вставки данных из таблиц. Этот сценарий помог сформулировать требования к форме: учитывать рабочие инструменты специалистов и привычный способ подготовки заявки.
На сайте «Евроген» есть инструменты для подготовки лабораторной работы: расчёт молярности и разведения растворов, пересчёт параметров центрифуги, расчёты для сборки и оценки фрагментации ДНК.
Калькулятор лигирования помогает определить массы и объёмы компонентов по параметрам вектора и вставок.
Инструмент для флуоресцентных белков позволяет сравнивать спектры на одном графике и оценивать сигнал при выбранных фильтрах и лазерах.
Так сайт помогает специалистам не только выбирать продукты и заказывать услуги, но и выполнять расчёты для экспериментов.
Прайс-лист для аудитории «Евроген» — самостоятельный рабочий инструмент. Клиенту было важно сохранить поиск по каталожным номерам, предметную группировку и возможность пользоваться обычным поиском по странице.
В требованиях к личному кабинету также учитывалось различие между пользователем и лабораторией: один специалист может оформлять заказы для нескольких клиентов с разными адресами и условиями. При обновлении авторизации нужно было принимать во внимание старые логины, которые не всегда совпадают с email.
Эти особенности задавали рамки разработки: обновлять интерфейс с учётом того, как лаборатории уже работают с компанией.
Сайт отвечает за представление каталога, корзину и оформление заказа, а коммерческие операции передаются в CRM. В реализации предусмотрена синхронизация корзины между вкладками.
Если при заполнении формы Сэнгера требуется войти в аккаунт, данные заявки сохраняются. После авторизации пользователь возвращается к тому же шагу и продолжает оформление. При добавлении заявки в корзину сайт показывает подтверждение.
Новая версия сайта доступна на evrogen.ru. На основном домене представлены научный каталог, услуги и база знаний.
Сайт объединяет каталог, лабораторные инструменты и специализированные формы заказа, сохраняя связь с действующей CRM. Специалисты могут выполнять расчёты, выбирать продукты и оформлять заявки на научные услуги, а компания управляет публичными материалами в отдельной CMS.
Next.js, React, Payload CMS, TypeScript, MongoDB, Meilisearch, Mantine, интеграция с ASP.NET CRM
Интернет-магазины и e-commerce
Каталог, корзина, оплаты, личный кабинет и обмен с 1С. От первого запуска до развития магазина как продукта.