Разработка онлайн-каталога для производителя

Один из наших заказчиков - производитель гидравлического оборудования, работает с 1991 года. Когда мы взялись за его интернет-магазин, в каталоге было семь уровней вложенности. Родительская категория, подкатегория, в ней ещё одна, и так далее. В этом лабиринте терялись не только покупатели. Сама компания забыла о части позиций, зарытых где-то на шестом уровне. Товар производился, лежал на складе и не продавался, потому что до него никто не доходил.

Это не редкость и не чья-то халатность. Так выглядит любой каталог, который рос двадцать лет вместе с номенклатурой и ни разу не пересобирался.
Отсюда мысль, вокруг которой построена вся статья:каталог живёт или умирает на модели данных, а не на дизайне.Красивая сетка карточек поверх семиуровневой каши остаётся кашей. А аккуратно разложенные данные вытягивают даже посредственный интерфейс.

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

Меня зовут Богдан Квитка, я руковожу GoodFellazz. Компания работает с 2015 года, мы делаем сайты для российских производителей: Строймашсервис, Hermes Industries, Z1 Lighting Tools. Все примеры ниже - из этих проектов. Здесь описано то, что мы решали руками.

Сразу оговорка. Я не берусь обещать, что каталог поднимет вам продажи: это зависит от рынка, цены и работы менеджеров, а не от кода. Что каталог делает точно - показывает продукцию тем, кто ищет её по техническим параметрам, и снимает с отдела продаж вопросы, на которые не нужен человек.

Бытовая аналогия

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

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

Важно: каталог и магазин не исключают друг друга. Мы часто делаем каталог с двумя режимами. Для гостя работает кнопка «запросить цену». Для дилера после входа в личный кабинет открывается его прайс и корзина. Это одна система, а не два сайта.

На чём здесь спотыкаются

Формулировка задачи определяет бюджет сильнее, чем количество позиций. Если вы просите смету на «интернет-магазин», подрядчик заложит эквайринг, статусы заказа и логистику - то есть треть работ, которые вам не нужны. Если просите «каталог», а через полгода понадобится корзина для дилеров, придётся переделывать модель заказа.

Правильный вопрос к себе перед первым разговором с подрядчиком: что человек должен сделать на сайте, чтобы это считалось успехом. Ответ на него определяет всё остальное.

02. Из чего состоит каталог продукции: пять слоёв

Когда клиент говорит «сделайте каталог», он обычно имеет в виду то, что видно глазами: сетку карточек и фильтр слева. На деле каталог - это пять слоёв, и видимый только один. Если экономить на нижних, верхний развалится через полгода.

Слой 1. Модель данных

Как в системе описан товар: какие у него есть характеристики, какие из них обязательные, какие числовые, какие справочные. Здесь же решается, что считать отдельным товаром, а что - вариантом одного товара.
Это самый скучный и самый дорогой в переделке слой. Именно про него сквозная мысль статьи.

Слой 2. Источник данных и обмен

Откуда товары попадают на сайт: выгрузка из 1С, ручной ввод в админке, импорт из Excel, API поставщика. И что происходит, когда данные меняются.

Слой 3. Логика витрины

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

Слой 4. Интерфейс

Карточка товара, сетка, мобильная версия, состояние «ничего не найдено», скорость отклика фильтра.

Слой 5. Действие

Что человек может сделать, найдя нужное: оставить заявку, добавить в подборку, скачать спецификацию, запросить цену, оформить заказ в личном кабинете.

Что это значит для вас

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

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

Структура по номенклатуре или по задаче клиента

Тонкий момент, который сильно влияет на конверсию. Производитель мыслит своей номенклатурой: серии, типы, исполнения. Покупатель мыслит своей задачей: ему нужен гидроцилиндр не «двустороннего действия серии ЦГ», а «для катка».

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

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

Что это значит для вас

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

Состояние «ничего не найдено»

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

Что это значит для вас

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

Чертёж вместо фотографии

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

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

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

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

Похожая логика на сайте Hermes Industries. На продуктовых страницах стоят блоки с промышленным оборудованием в разрезе: важные узлы подсвечиваются, по нажатию открывается описание. Для котла разрез объясняет устройство лучше, чем фотография корпуса снаружи.

Действие с карточки

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

Отдельно решали вопрос с позициями, у которых цена не проставлена. Для них сделали быстрый выкуп: человек оставляет заявку на конкретный товар, не проходя весь путь оформления заказа. Это механизм «запросить цену» для случаев, когда публичной цены нет.

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

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

Что это значит для вас

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

06. Интеграция каталога с 1С и наполнение данными

Каталог живёт ровно настолько, насколько актуальны данные внутри него. Здесь два вопроса: откуда данные приходят и в каком они состоянии.

Почему интеграция с 1С редко бывает типовой

Скажу честно: сама передача данных - не самая сложная часть. Сложное начинается, когда выясняется, что данные на стороне клиента лежат не так, как предполагает стандартный протокол обмена.
На zao-sms.ru мы столкнулись ровно с этим. Система клиента не соответствовала стандартным протоколам, данные приходили в формате, который типовой обмен не переваривает. Пришлось писать отдельные решения: правильно опознавать товары и вытаскивать нужную информацию из системы клиента в том виде, в каком она там есть.
Это одна из причин, по которой мы работаем на Laravel и Vue, а не на коробочной CMS. В коробке такая задача решается обходом чужой логики через плагины. На фреймворке она описывается напрямую, как обычный код.

07. Разработка каталога: шесть этапов

Порядок, который у нас сложился на проектах для производителей. Отклонения от него почти всегда стоят денег.

Этап 1. Аналитика номенклатуры

Смотрим выгрузку из 1С, считаем позиции, группы и характеристики, находим неструктурированные поля и дубли. На выходе - карта данных и список того, что нужно привести в порядок.
Здесь же собираем семантику: какими словами ваш товар ищут. Это влияет на структуру разделов напрямую.

Этап 2. Проектирование структуры и модели данных

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

Этап 3. Прототипы

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

Этап 4. Дизайн

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

Этап 5. Разработка и интеграция

Мы делаем каталоги на Laravel и Vue, для тяжёлых проектов - в формате SPA с серверным рендерингом, чтобы страницы нормально индексировались. Параллельно идут три потока: витрина, административная часть и обмен с 1С. Отдельной задачей - поисковый движок и индексация характеристик.

Этап 6. Наполнение, тестирование, запуск

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

Важно про редиректы.Если каталог у вас уже был и адреса меняются, карта редиректов - не мелочь на последний день. От неё зависит, сохраните вы позиции в поиске или начнёте набирать их заново. На проекте Строймашсервиса это было прямым требованием заказчика: обновить сайт и не потерять SEO.

Что это значит для вас

Обратите внимание на порядок: этапы 1 и 2 идут до дизайна и занимают около трети срока. Если подрядчик предлагает начать с макетов «чтобы вы увидели, как будет выглядеть», чаще всего за этим стоит желание быстрее закрыть этап подписью, не разбираясь в ваших данных.
Требуйте на выходе второго этапа документ, а не картинку. В нём должно быть написано, как хранятся характеристики и какие фильтры из них соберутся.

08. Шесть ошибок при разработке каталога

Все шесть из реальных проектов, своих и чужих.

Ошибка 1. Сначала дизайн, потом данные

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

Ошибка 2. Фильтры по текстовым полям

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

Ошибка 3. Каталог без цены и без замены ей

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

Ошибка 4. Индексация всех комбинаций фильтров

Каждое сочетание параметров доступно поиску. Каталог на 20 000 товаров порождает сотни тысяч почти пустых страниц.
Чем оборачивается:поисковые системы тратят обход на мусор и хуже индексируют нормальные страницы. Разгребание занимает месяцы.

Ошибка 5. Красивый инструмент, невидимый для поиска

Отдельный сюжет, который мы прошли на сайтеHermes Industries.Мы встроили конструктор страниц на Grapes.js, чтобы менеджеры собирали посадочные из готовых блоков без разработчика. Аналог Тильды внутри Laravel.
Дальше выяснилось, что поисковые роботы не видят блоки, собранные конструктором. Пришлось разбирать конструктор по частям, находить проблемные компоненты и чинить.
Чем оборачивается:страницы существуют, менеджеры их наполняют, руководство видит работу, а поиск их не индексирует. Обнаруживается это обычно через несколько месяцев, когда кто-то догадывается проверить.

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

Ошибка 6. Обмен с 1С без журнала и без ответственного

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

Что это значит для вас

У пяти ошибок из шести общая черта: они не видны в день сдачи проекта. Каталог выглядит рабочим, акт подписан, все довольны. Проявляются они через полгода-год, когда подрядчик уже занят другими клиентами.
Поэтому принимать каталог нужно на полной выгрузке и конкретными действиями: замерить отклик фильтра, посмотреть журнал обмена, открыть страницу конструктора в режиме поискового робота. Демонстрационные данные и беглый просмотр глазами тут ничего не покажут.
Если у вас уже есть каталог и он в описанном состоянии, посмотрите разделдоработки проектов на Laravel.Чаще всего чинится, но бывает и так, что переписать дешевле.

09. Разработка каталога: цена и сроки

Точную цифру без вашей номенклатуры назвать нельзя. Разброс определяют три вещи: количество позиций, состояние данных в 1С и наличие вариативности.

Как это выглядит на практике

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

11. Четыре каталога, которые мы сделали

Даю проекты так, как имею право: через задачу и решение. Показателей по выручке и конверсии в открытом виде у меня нет, и придумывать проценты я не буду. Все четыре проекта - производители, все четыре доступны по ссылкам, можно открыть и проверить.