Какие фичи обязательно нужны сайту-каталогу (на примере производителя стройматериалов)

Заказчик

Американская компания, производящая фасадные материалы. Их площадка — это агрегатор собственной продукции и продукции брендов, которые с ними сотрудничают.

Задача

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

Компания обратилась к нам с запросом на миграцию сайта на новую версию Drupal и на расширение его функциональности. Платформа должна была учитывать региональные особенности ассортимента, поддерживать взаимодействие с дилерами и обеспечивать передачу клиентских данных в CRM-систему Salesforce.

Технологии: Drupal, Salesforce, Bazaarvoice

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

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

•  мигрировать сайт с Drupal 7 на Drupal 9;
• внедрить новый дизайн, разработанный клиентом;
• настроить формы сбора заявок с последующей отправкой данных в Salesforce;
• создать карточки товаров, содержимое которых меняется в зависимости от региона покупателя,
• реализовать функцию сравнения товаров;
• внедрить удобную систему отображения и управления страницами дилеров;
• связать сайт с сервисом-отзывиком.

Миграция на Drupal 9

Из-за того что Drupal 7 с технической точки зрения имеет мало общего с Drupal 8 и 9, переход на «девятку» означал полную перестройку проекта. Это хороший момент, чтобы запланировать редизайн сайта, расправиться с техническим долгом и пересмотреть старые алгоритмы, что мы с клиентом и сделали.

Что нам было важно выполнить в ходе миграции:

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

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

Для этого мы использовали модуль Layout Builder. Он совмещает в себе принципы drag-and-drop и WYSIWYG (What You See Is What You Get): элементы интерфейса свободно компонуются на странице, а посмотреть результат своих действий можно тут же, примерно как в Тильде.

Геозависимый контент: ассортимент подстраивается под регион

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

Обычно такая фича реализуется на серверной стороне, что уничтожает кэш и замедляет работу сайта. Мы пошли другим путём: разработали Front-End Modifier — кастомный модуль на JavaScript, который работает в браузере пользователя. С его помощью мы задаем правила: скрыть серию для таких-то регионов, заменить этот или тот элемент. При загрузке страницы все геозависимые элементы по умолчанию скрыты. Модуль определяет геоположение, «проходит» по правилам и показывает только актуальный для региона контент.

Такой подход сохраняет кэш, ускоряет загрузку и делает опыт взаимодействия с сайтом более предсказуемым. Никаких «мерцаний» элементов, которые сначала появились, а потом исчезли — только чистый и точный результат.

Мы также реализовали возможность ручного выбора региона. Например, если житель Нью-Йорка заказывает монтаж дома, находясь в отпуске в Калифорнии, он может вручную ввести домашний ZIP-код и увидеть каталог, актуальный для Нью-Йорка.

Работа с дилерской сетью

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

Интеграция с Salesforce: маппинг и повторная отправка данных

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

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

Как устроен сбор и передача данных

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

Для этого мы использовали модуль Salesforce Suite, который обеспечивает авторизацию в CRM и работу с её API. Однако по умолчанию модуль предлагает базовую схему маппинга, которая не учитывает кастомные поля и сложные формы. Поэтому мы реализовали собственный механизм соответствия полей.

Маппинг полей через интерфейс, а не в коде

В основе решения — кастомный webform handler, который запускается сразу после отправки формы. Он собирает данные из полей и формирует массив, пригодный для отправки в Salesforce. Ключевая особенность — возможность управлять маппингом через интерфейс.

 В интерфейсе настроек каждой веб-формы появляется наш хэндлер под названием salesforce mapping. В нём редактор сайта может указать соответствия между полями формы и полями Salesforce: в одном выпадающем списке выбирается поле формы, в другом — поле из CRM. Всё это без единой строки кода.

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

Повторная отправка данных в случае ошибки

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

Все формы, с которых не удалось передать данные, попадают на специальную страницу Salesforce Failed Submissions. Там собираются заявки, в которых произошел сбой, а также отображается сообщение об ошибке, если Salesforce вернул ответ. Это могут быть как системные ошибки, так и сообщения вроде «некорректный формат даты».

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

Результаты проекта

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

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