Задача
Образец цвета размером с ноготь и фотография одной дверцы не отвечают на вопрос, который останавливает покупку: как это будет выглядеть на моей кухне и как сочетаются верх, низ и остров. Решение откладывается, а менеджерам приходится вручную собирать референсы и объяснять разницу между коллекциями.
Магазину нужен был модуль, который показывает его собственный ассортимент в реалистичной сцене, даёт менять отдельные конструктивные зоны, скрывает сочетания, которых нет в производственном каталоге, сохраняет конфигурацию и связывает картинку с товарами, образцами или заявкой. Встраиваться модуль должен без переезда магазина на новую платформу. К этому добавлялось требование, которое меняет всю архитектуру: то же самое ядро должно повторно использоваться другим магазином с другим брендом, другими сценами, другой палитрой и другим финалом воронки.
Решение
Послойная сцена без 3D. Кухня собирается в Canvas из подготовленных слоёв: базовое фото помещения, прозрачные маски верхних шкафов, маски нижних, остров и торцевые панели, детали дверцы и рамки. Отдельными слоями идут верхний карниз (crown molding) и нижний карниз под подсветку (light rail molding), патина (glaze) и отделка, дополнительные элементы сцены, водяной знак магазина. Цвет или текстура применяется только к своей маске, поэтому свет, тени и перспектива исходной фотографии сохраняются. Пользователь сразу видит фотореалистичный предпросмотр, без тяжёлого рендера на сервере и ожидания. Порядок слоёв, прозрачность, режим наложения и совместимость элементов настраиваются для каждой сцены отдельно.
Профиль фасада как ключ к каталогу. Выбор профиля на первом шаге связан с коллекцией магазина и определяет доступные цвета, патину, молдинги и дальнейшую привязку к товарам. Общей статической палитры нет: магазин задаёт, какие цвета доступны конкретному профилю и товарной серии, а правила совместимости не дают собрать комбинацию, которой нет в торговом или производственном каталоге.
Независимые зоны. Верхние шкафы, нижние, остров, боковые и торцевые панели, верхний и нижний карнизы, декоративные элементы. У каждой зоны свой текущий цвет, несколько оттенков для быстрого выбора и переход к полной палитре с фильтрацией по коллекции, бренду краски, названию или группе, заданной магазином. Цвет молдинга можно связать со шкафами или задать отдельно, панели острова следуют его конфигурации.
История хранит состояние. Пошаговая отмена и повтор действий, сброс отдельной зоны или всех цветов и деталей, возврат к предыдущему шагу без потери остальных настроек. Можно сохранить несколько вариантов, копировать и переименовывать их, включить режим «до и после» или сравнение двух комбинаций. Ссылка на вариант передаёт набор идентификаторов сцены, профиля, зон, цветов и элементов; тяжёлое изображение в URL не попадает. Скачивается при этом готовый рендер из Canvas с водяным знаком магазина.
Каждая визуальная опция связана с товаром. Категория и товарная линейка, профиль и стиль фасада, цвет и отделка, коллекция панелей и молдингов, товар-образец, атрибут для коммерческого предложения, данные для корзины или заявки дизайнеру. Финал выбирает магазин: открыть отфильтрованную коллекцию, добавить образцы, передать параметры в запрос коммерческого предложения, сохранить конфигурацию в аккаунт покупателя, приложить рендер к заявке дизайнеру или вернуть странице магазина структурированный объект через API интеграции.
Бренд магазина на общем ядре. Для каждого магазина настраиваются логотип, цвета и типографика, домены и разрешённые источники встраивания, тексты и локализация. У магазина свои сцены и превью, профили фасадов с привязкой к товарам, палитры и цветовые группы, отделки и патина, декоративные элементы и правила совместимости. Отдельно настраиваются призыв к действию, водяной знак и идентификаторы аналитики. Продукт обновляется централизованно, но внутри каждой витрины выглядит родным.
Кабинет магазина и версии конфигурации. В кабинете магазин загружает базовые сцены, управляет масками и порядком слоёв, зонами и интерактивными областями. Там же библиотека профилей, текстуры, цвета и метаданные отделки, привязка к каталогу, предпросмотр и валидация. Перед публикацией проверяются размеры слоёв, обязательные зоны, битые ассеты и отсутствующие привязки к товарам. У конфигурации есть версии и откат, поэтому неудачное обновление одного магазина не останавливает общий сервис.
Встраивание и доверие к данным. Модуль встраивается через iframe или скрипт на JavaScript, связь со страницей идёт через postMessage или JS API. Есть обратные вызовы при смене шага и конфигурации, передача фильтров товаров и данных корзины, прямая ссылка на сохранённый вариант. Тема задаётся токенами, высота iframe согласуется со страницей, переходы на страницы магазина работают без привязки к конкретной CMS. Обязательны список разрешённых источников и CORS. Цену и доступность, пришедшие из браузера, магазин не принимает на веру: привязку к товарам и финальное действие проверяет его сервер.
Результат
Покупатель видит свой выбор в настоящей кухонной сцене, настраивает зоны по отдельности, не натыкается на несуществующие сочетания и уходит из конструктора с конфигурацией, привязанной к товарам магазина. Магазин подключает модуль к своей витрине без переезда на новую платформу; ассортимент, палитры и сценарий завершения остаются его собственными. Ассеты и конфигурации загружаются отдельно от страницы магазина, поэтому сцены и палитры обновляются без релиза витрины. Аналитика собирает воронку целиком. Сначала открытие визуализатора, выбор сцены и профиля, смена цвета зоны, отделка и декоративные слои. Затем сохранение варианта, сравнение, скачивание, «Поделиться», запрос образцов, клик по финальной кнопке и завершённая передача конфигурации в магазин. Компания получила один продукт вместо серии похожих заказов: новый магазин подключается конфигурацией, ассетами и привязкой к каталогу, без отдельной ветки кода.
