IPC2U: промышленные компьютеры в любую точку мира
Необычный конфигуратор в карточке товара, импорт с элементами дедукции и «многосайтовость» на сайте компании-дистрибьютора оборудования для автоматизации бизнеса
IPC2U: промышленные компьютеры в любую точку мира
Необычный конфигуратор в карточке товара, импорт с элементами дедукции и «многосайтовость» на сайте компании-дистрибьютора оборудования для автоматизации бизнеса
Стандартный e-commerce живет по своим понятным правилам. Но всё меняется, когда дело касается сложного технического оборудования: его просто так не выберешь и не укомплектуешь. А ещё — просто так не оплатишь и не доставишь в ближайший постамат. Особенно, если клиент из Индии или Индонезии. И тогда вместо банальной карточки товара а-ля Ozon появляется конфигуратор опций, а к нему в придачу клоны сайта на разных языках и другие интересные фичи. Рассказываем, как это было на проекте для IPC2U.
IPC2U — дистрибьютор оборудования от крупных мировых поставщиков для промышленной автоматизации бизнеса. Например, оборудования для систем автоматизации трафика, видеонаблюдения в вагонах метро или систем управления распределением тепла.
Компания работает по всему миру и, помимо дистрибьюции, производит собственное оборудование под брендом iRobo: защищенные компьютеры, ноутбуки, планшеты и серверы, от которых бы не отказался и сам Джеймс Бонд.
Задачи проекта
Диана
Руководитель проекта
— Заказчик изначально пришел к нам с запросом на обновление Битрикса на существующем сайте: его версия была откровенно старой. Но архитектура и функционал за время работы старого сайта постоянно усложнялись и разрастались — и просто «накатить» свежую версию Битрикса было невозможно. Мы обсудили все нюансы архитектуры проекта и пришли к выводу, что пора делать новый сайт.
Перед стартом мы тщательно проанализировали ограничения и возможности проекта — это помогло определиться с ключевыми задачами, которые нужно было решить:
1
Учесть серверную архитектуру. В распоряжении заказчика — сразу 3 сервера, да ещё и в разных странах, потому что: во-первых, по закону данные пользователей должны находиться в регионе пользователя, а во-вторых на каждом сайте — свои фичи и свои товары в каталоге. Поэтому на каждом сервере размещена отдельная копия сайта, включающая несколько языковых версий. Каждая языковая версия живет на отдельном домене. Но управляется всё в одной админке в рамках конкретного сервера. В новом проекте важно было сохранить такую же структуру, ничего не нарушив.
2
Аккуратно настроить импорты. Информация о товарах хранится в самописной ERP, которая сделана на базе Битрикса, откуда выгружается файлами xml-формата. Причем, в каждой языковой версии 60−80 тысяч товаров, 3000 уникальных свойств, 25 типов цен, 500+ разделов с большой вложенностью. При этом складов как таковых нет, а наличие показывать всё равно нужно. Полный импорт такого массива данных на сайт занимал от 4 до 6 часов — и это слишком долго. Поэтому в новом проекте нужно было максимально ускорить процесс обмена.
3
Тщательно продумать структуру каталога и карточки товаров. Во-первых, потому что товары — это сложное оборудование с кучей нюансов, которые нужно учесть в фильтрах и при поиске. Во-вторых, потому что из-за технической сложности оборудования оплатить заказ на сайте нельзя — каждый заказ обрабатывается менеджером, а сами сделки проходят вне сайта. Но выбор оборудования и решений происходит именно на сайте, а значит важно было сделать карточки товаров понятными, информативными и удобными.
4
По-максимуму сохранить дизайн-стилистику прежнего проекта. Заказчик очень просил не менять концепцию глобально, чтобы сайт остался узнаваемым для постоянных пользователей. И конечно, новому сайту был нужен адаптив, потому что без него сейчас не обойтись ни одному интернет-проекту.
5
Предусмотреть в админ-панели конструктор контентных страниц. У заказчика много полезных материалов в виде статей, обучалок и вебинаров, которые тоже публикуются на сайте — важно, чтобы контент-менеджерам было комфортно верстать такие страницы и чтобы те не выглядели слишком однотипно.
Преемственность дизайна
Диана
Руководитель проекта
— Заказчик хотел максимально сохранить привычный пользователям дизайн, но при этом внешний вид сайта важно было осовременить. За основу дизайн-концепции мы взяли логотип заказчика — ромбы. Этот паттерн повторяется в элементах сайта: в промоблоке, на подложках в блоках на главной, на странице собственного производства, в лоадере каталога, в поп-апах для форм и в иконках.
Глеб
Дизайнер
— Сетку на главной решили сделать «резиновой», чтобы на высоких разрешениях, за счет широкой контентной области, можно было выводить сразу большое количество товаров.
Общая концепция — в строгом стиле, цветовая гамма была выстроена на основе цветов бренда — светлая, с контрастными темными перебивками и оранжевыми акцентами. Чтобы она не смотрелась слишком пресно, мы добавили несколько дополнительных цветов.
На выходе получился чистый дизайн с удобной информационной архитектурой, комфортной подачей и приятным визуальным контентом.
Общая концепция — в строгом стиле, цветовая гамма была выстроена на основе цветов бренда — светлая, с контрастными темными перебивками и оранжевыми акцентами. Чтобы она не смотрелась слишком пресно, мы добавили несколько дополнительных цветов.
На выходе получился чистый дизайн с удобной информационной архитектурой, комфортной подачей и приятным визуальным контентом.
Конструктор контентных страниц
IPC2U использует сайт не только для продажи товаров. У заказчика масса обучающих материалов, вебинаров, полезных статей. С их помощью компания продвигает сайт и помогает покупателям разобраться в тонкостях оборудования с учетом специфики разных отраслей и определиться с выбором.
Диана
Руководитель проекта
— Мы предусмотрели гибкую настройку контентных страниц. Контент-менеджер может добавлять на такие страницы тексты, таблицы, списки, кнопки, блоки с двумя колонками, блоки с картинкой и подписью, блоки с видео и текстом и — в некоторых разделах — форму обратной связи и форму записи на мероприятие или вебинар. Теперь каждая статья или новость выглядит уникально, но при этом остаётся в стилистике сайта.
Также мы предусмотрели перелинковку текстовых страниц с товарами каталога. Это удобно для маркетологов, чтобы сразу же показывать товары, о которых рассказывается, например, в новости.
Контент-менеджер может отфильтровать список товаров по нужным параметрам, скопировать ссылку на эту выборку и добавить компонент на страницу новости, статьи или решения — выбранные товары появятся на странице. Фишка в том, что если товары по выбранным параметрам фильтрации добавляются или удаляются в каталоге, то они изменятся и на странице новости. А значит, внутри текстовых страниц всегда будет только актуальный контент.
Контент-менеджер может отфильтровать список товаров по нужным параметрам, скопировать ссылку на эту выборку и добавить компонент на страницу новости, статьи или решения — выбранные товары появятся на странице. Фишка в том, что если товары по выбранным параметрам фильтрации добавляются или удаляются в каталоге, то они изменятся и на странице новости. А значит, внутри текстовых страниц всегда будет только актуальный контент.
Обратная перелинковка тоже работает — она дает возможность показать на странице товара те статьи, обзоры или решения, в которых упоминается товар. Настоящий маркетинговый мэджик!
Продуманный UX
Особенность проекта в том, что у товара может быть миллион опций, которые можно заменить. Например, у компьютера — поменять стандартный процессор на более навороченный, изменить объём оперативной памяти, добавить клавиатуру или расширенную гарантию. И конечно, всё это влияет на цену товара. Это важно показать пользователям.
Поэтому в дизайне страниц товаров в каталоге мы особенно въедливо прорабатывали UX, чтобы вся информация о конкретной конфигурации товара была чёткой, понятной и объективной.
Поэтому в дизайне страниц товаров в каталоге мы особенно въедливо прорабатывали UX, чтобы вся информация о конкретной конфигурации товара была чёткой, понятной и объективной.
При добавлении опций сразу видно, сколько приплюсуется к стоимости, а также появляется особая плашка внизу страницы, где удобно просмотреть список всех выбранных параметров товара. Из этой плашки сконфигурированный товар легко добавить в корзину, указав нужное количество.
Дмитрий
Разработчик
— Детальная настройка товара — редкая штука на проектах. И её уникальность, пожалуй, не столько в наличии такой возможности, сколько в количестве опций — их МНОГО. Важно было, чтобы всё это «добро» можно было благополучно складывать в корзину с учетом всех опций.
Штатный Битрикс «подавился» бы от их количества — у него есть ограничение на длину строки в базе данных в 255 символов. Чтобы сохранить выбранные у товара свойства и перенести их в корзину, этого недостаточно: влезает максимум 4−5 опций, а их бывает значительно больше. Пришлось кастомить :)
Штатный Битрикс «подавился» бы от их количества — у него есть ограничение на длину строки в базе данных в 255 символов. Чтобы сохранить выбранные у товара свойства и перенести их в корзину, этого недостаточно: влезает максимум 4−5 опций, а их бывает значительно больше. Пришлось кастомить :)
«Многосайтовость»
На проекте мы столкнулись с «многосайтовостью»: у каждой языковой версии — по факту свой собственный сайт, для которого используется свой домен (например, ipc2u.ru и ipc2u. kz и т. д.). Плюс у версий у каждой языковой версии по 60−80 тысяч товаров, порядка 3000 уникальных свойств, до 25 типов цен и более 500 разделов с большой вложенностью. Получается, что сайтов в админке — много и они отличаются друг от друга.
Стандартная для Битрикса организация языковых версий для такой задачи не подходит — опять же, из-за ограничений количества символов строки в базе данных. Обычно значения каждого поля задаются в базе данных одной строкой, общей для всех языков. Соответственно, общий объём символов строки делится на количество языковых версий. Для пары-тройки языков это не проблема, но если их больше, то на каждый остаётся слишком мало символов.
Стандартная для Битрикса организация языковых версий для такой задачи не подходит — опять же, из-за ограничений количества символов строки в базе данных. Обычно значения каждого поля задаются в базе данных одной строкой, общей для всех языков. Соответственно, общий объём символов строки делится на количество языковых версий. Для пары-тройки языков это не проблема, но если их больше, то на каждый остаётся слишком мало символов.
Диана
Руководитель проекта
— Заказчик работает по всему миру, поэтому нам важно было максимально упростить контур по созданию новых языковых версий сайта. Обычно, чтобы создать новый сайт в административной части, надо вручную заново создавать все основные инфоблоки и хайлоады аналогично уже имеющемуся сайту, а потом заполнять их контентом на другом языке. Долго, муторно и неудобно. Мы максимально упростили этот процесс.
Дмитрий
Разработчик
— Чтобы влёгкую создавать новые сайты для каждого языка (1 сайт = 1 язык), мы сделали готовый набор языковых инфоблоков и хайлоадов, одинаковый для всех языковых версий.
Евгений
Разработчик
— Благодаря этому новую языковую версию теперь можно добавить за пару минут с помощью всего одной команды в консоли сервера: внутри уже будет вся структура сайта, кроме текстовых страниц. Останется лишь заполнить контентом.
Импорт в стиле Шерлока Холмса
На старом сайте заказчика уже была реализована интеграция с ERP-системой, на новом надо было сделать также. То есть предварительно нам требовалось выяснить, какие именно данные приходят из учетной системы заказчика и какие данные надо в неё отправлять. У заказчика самописная ERP, а значит использовать стандартные руководства по настройке обмена не получится. И это только половина сложностей. Помимо этого:
- в коде старого сайта слишком много доработок, нажитых за 10+ лет, поэтому хоть как-то его использовать, чтобы распутать этот клубок, было нельзя;
- экспорта данных со старого сайта не предусмотрено: мы не могли просто так взять оттуда ни пользователей, ни их заказы;
- документация по обмену данным со старым сайтом заказчика устаревшая, а значит, на неё мы тоже не могли опираться;
- сам обмен данными был слишком долгим: заказчик хотел ускорить его хотя бы до 3 часов.
Дмитрий
Разработчик
— Чтобы разобраться во всем этом, на помощь пришли зумы с заказчиком, где мы кропотливо выясняли, какие инфоблоки на новом сайте нам потребуются и какие именно данные нужны для сборки. Благодаря тесной работе с заказчиком мы и документацию по обмену, кстати, привели в порядок.
- 45 минутЗа столько сейчас происходит полный обмен данными между сайтом и ERP (и это, кстати, не предел скорости).
Евгений
Разработчик
— Импорт данных ускоряется за счет сервера очередей: заказчик готовит архив с файлами импорта, и на сервере очередей запускается задача на распаковку этого архива. Как только файл распаковался, запускаются задачи на обработку файлов из архива (отдельно товары, цены, свойства и т. д.) — на каждый файл ставится своя задача, причем выполняются они в нужном порядке. Например, цены нельзя импортировать раньше товаров: если так сделать, то товар для этой цены просто не будет найден, а цена не сохранится в базе данных.
Из интересного — мы сделали так, что заказчик может сам запланировать выполнение конкретной задачи (список задач — делаем мы) в нужное ему время и с нужной периодичностью. Например, можно импортировать данные каждые N минут (часов, дней, дней недели или месяцев), причем параметры можно комбинировать. Скажем, какая-то задача может выполняться каждый понедельник в 12:30.
Из интересного — мы сделали так, что заказчик может сам запланировать выполнение конкретной задачи (список задач — делаем мы) в нужное ему время и с нужной периодичностью. Например, можно импортировать данные каждые N минут (часов, дней, дней недели или месяцев), причем параметры можно комбинировать. Скажем, какая-то задача может выполняться каждый понедельник в 12:30.
Всемогущий Elasticsearch
Объем данных по товарам и их свойствам на проекте — огромный (особенно, если учитывать языковые версии), и стандартный битриксовый фильтр не смог бы фильтровать свойства с высокой скоростью, а скорость — крайне важна для пользователя. Поэтому для поиска и фильтрации мы использовали старый-добрый Elasticsearch: он шустро обрабатывает запросы и работает с большим объемом данных без проблем и задержек.
Фильтр
Диана
Руководитель проекта
Фильтр у нас не простой: из внешней системы ERP через выгрузки на сайт приходит сортировка и условия вывода свойств для короткого и полного фильтра.
В коротком фильтре все значения свойств спрятаны, чтобы не пестрить перед пользователем кучей пустых чекбоксов. Юзер сам может развернуть нужное свойство и посмотреть его. А если в фильтре много значений у одного свойства, можно включить поиск по значениям свойства: например, выбрать в фильтре конкретный тип поддерживаемого процессора.
В коротком фильтре все значения свойств спрятаны, чтобы не пестрить перед пользователем кучей пустых чекбоксов. Юзер сам может развернуть нужное свойство и посмотреть его. А если в фильтре много значений у одного свойства, можно включить поиск по значениям свойства: например, выбрать в фильтре конкретный тип поддерживаемого процессора.
Поскольку фильтр сам по себе большой, выбранные пользователем значения выводятся сверху в виде тегов, которые легко сбросить в один клик.
Ещё у фильтра хорошая память: если выбрать значение в коротком фильтре, он его запомнит и покажет в развернутом виде в полном фильтре — чтобы пользователь сразу увидел, что какой-то параметр уже задан. А если в полном фильтре выбрать значение, которого нет в коротком, то в коротком фильтре его всё равно покажут пользователю — сразу после всех параметров.
Ещё у фильтра хорошая память: если выбрать значение в коротком фильтре, он его запомнит и покажет в развернутом виде в полном фильтре — чтобы пользователь сразу увидел, что какой-то параметр уже задан. А если в полном фильтре выбрать значение, которого нет в коротком, то в коротком фильтре его всё равно покажут пользователю — сразу после всех параметров.
Поиск
Поиск тоже работает на ElasticSearch (этим уже никого не удивить) и умеет искать по словам в названии товара, в коротком и длинном описании, по новостям, статьям и по всем контентным текстовым страницам. И это — не всё. Также поиск умеет:
- Искать по словам-синонимам. Из-за специфики отрасли пользователи часто ищут вместо панельных компьютеров просто «панельники», и наш поиск умеет понимать такие запросы.
- Понимать другие раскладки клавиатуры. Заказчика показывал статистику по старому сайту: пользователи часто забывают менять раскладку и вбивают английское название товара русскими буквами. Чтобы им не приходилось перепечатывать свой запрос, мы решили эту проблему переконвертацией клавиатуры. Для любой раскладки клавиатуры в админ-панели задается соответствие для каждого языка (а там, на секундочку, не только английский и русский). И тогда по запросу «увы» можно найти промышленные коммутаторы вместо ничего :)
Готовый проект
