B2B-каталог для производителя электротехнических изделий «ДКС»

Компания «Диэлектрические кабельные системы» или «ДКС» — один из крупнейших производителей кабеленесущих систем и низковольтного оборудования в России и Европе. Компания развивает свое производство и дистрибьюторскую сеть с 1998 года.

Текущий основной сайт сайт dkc.ru представляет собой подробный онлайн-каталог продукции компании.

При этом в каталоге есть функции, присущие интернет-магазинам: категории, поиск, фильтры и сортировка товаров, детальная страница с характеристиками, аксессуарами, сертификатами и другой сопутствующей информацией.

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

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

Планирование

Выбрали поэтапный подход

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

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

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

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

Планирование этапов

Чтобы правильно составить список целей на первый этап, мы должны учитывать два момента:

• Важность задачи.
• Затраты на её реализацию.

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

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

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

В результате мы разбили все работы на 2 этапа:

1 этап:

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

2 этап:

• Реализация фасет и агрегаций с использованием PHP Symfony, MongoDB, RabbitMQ. Это необходимо для формирования узких выборок товаров — например, по размеру, цвету, материалам.
• Блоки сопутствующих и аналогичных товаров на детальной странице товара.
• Раздел с программным обеспечением компании.

Особенности разработки

Страница с анонсом

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

Фронтенд-фреймворк Nuxt

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

Методология FSD

При разработке фронтенда мы использовали методологию Feature-Sliced Design (FSD). Это подход к построению архитектуры кода, при котором отдельные компоненты можно легко перемещать в любое место проекта.

Как и любая методология, FSD требует затрат времени на внедрение и немного замедляет разработку на ранних этапах. Но по мере масштабирования проекта польза от этого подхода ощущается всё сильнее.

Связка Bitrix + Symfony на бэкенде

Одним из обязательных условий заказчика было использовать 1С-Bitrix в качестве CMS. Однако, для реализации некоторых функций сайта одного Битрикса было не достаточно. И поэтому мы решили создать для этого проекта связку из CMS Bitrix и бэкенд-фреймворка PHP Symfony.

Это позволило нам обойти слабые места Битрикса и обеспечить максимальную эффективность работы сайта.

О том, как это происходило, можно почитать в нашей статье на Хабре:

250 000 товаров и миллионы характеристик

Как мы скрестили Битрикс с Symfony и MongoDB

Реверс-инжиниринг

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

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

Сроки

Разработка первого этапа шла с января по июнь 2024 года. А с июля по сентябрь мы реализовали второй этап.

Дальнейшие планы

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

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

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