IPC2U

1. Вводная задача от заказчика, проблематика, цели

IPC2U — дистрибьютор оборудования от крупных мировых поставщиков для промышленной автоматизации бизнеса. Например, оборудования для систем автоматизации трафика, видеонаблюдения в вагонах метро или систем управления распределением тепла. Компания работает по всему миру и, помимо дистрибьюции, производит собственное оборудование под брендом iRobo: защищенные компьютеры, ноутбуки, планшеты и серверы

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

• Учесть серверную архитектуру. У заказчика 3 сервера в разных странах, на каждом сервере размещена отдельная копия сайта, включающая несколько языковых версий. Каждая языковая версия живет на отдельном домене. Но управляется всё в одной админке в рамках конкретного сервера.
• Аккуратно настроить импорты. Информация о товарах хранится в самописной ERP, которая сделана на базе Битрикса, откуда выгружается файлами xml-формата. В каждой языковой версии 60−80 тысяч товаров, 3000 уникальных свойств, 25 типов цен, 500+ разделов с большой вложенностью. Полный импорт такого массива данных на сайт занимал от 4 до 6 часов, в новом проекте нужно было максимально ускорить процесс обмена.
• Тщательно продумать структуру каталога и карточки товаров. Товары — это сложное оборудование, все нюансы которого нужно учесть в фильтрах и при поиске. Из-за технической сложности оборудования оплатить заказ на сайте нельзя — каждый заказ обрабатывается менеджером, сделки проходят вне сайта. Но выбор оборудования и решений происходит на сайте, поэтому карточки товаров должны быть понятными, информативными и удобными.
• По-максимуму сохранить дизайн-стилистику прежнего проекта — заказчик хотел, чтобы сайт остался узнаваемым для постоянных пользователей.
• Предусмотреть в админ-панели конструктор контентных страниц — для полезных материалов в виде статей и обучающих материалов, которые публикуются на сайте.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Преемственность дизайна

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

Общая концепция — в строгом стиле, цветовая гамма была выстроена на основе цветов бренда — светлая, с контрастными темными перебивками и оранжевыми акцентами. Чтобы она не смотрелась слишком пресно, мы добавили несколько дополнительных цветов.

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

Конструктор контентных страниц

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

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

3. Результаты сотрудничества

Продуманный UX

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

«Многосайтовость»

На проекте мы столкнулись с «многосайтовостью»: у каждой языковой версии — по факту свой собственный сайт, для которого используется свой домен (например, ipc2u.ru и ipc2u. kz и т. д.). У каждой языковой версии по 60−80 тысяч товаров, порядка 3000 уникальных свойств, до 25 типов цен и более 500 разделов с большой вложенностью. То есть, сайтов в админке много и они отличаются друг от друга. Стандартная для Битрикса организация языковых версий для такой задачи не подходит, поэтому мы сделали готовый набор языковых инфоблоков и хайлоадов, одинаковый для всех языковых версий. Благодаря этому новую языковую версию теперь можно добавить за пару минут с помощью всего одной команды в консоли сервера: внутри уже будет вся структура сайта, кроме текстовых страниц. Останется лишь заполнить контентом.

Импорт

Импорт данных ускоряется за счет сервера очередей: заказчик готовит архив с файлами импорта, и на сервере очередей запускается задача на распаковку этого архива. Как только файл распаковался, запускаются задачи на обработку файлов из архива (отдельно товары, цены, свойства и т. д.) — на каждый файл ставится своя задача, и выполняются они в нужном порядке. Это позволило сократить время импорта с 4-6 часов до 45 минут (и это не предел).

Фильтр и поиск на сайте работают через ElasticSearch. Поиск умеет искать по словам-синонимам и понимает другие раскладки клавиатуры.