Задача
Swatch размером с ноготь и фотография одной дверцы не отвечают на вопрос, который останавливает покупку: как это будет выглядеть на моей кухне и как сочетаются верх, низ и остров. Решение откладывается, а менеджерам приходится вручную собирать референсы и объяснять разницу между коллекциями.
Магазину нужен был модуль, который показывает его собственный ассортимент в реалистичной сцене, даёт менять отдельные конструктивные зоны, скрывает сочетания, которых нет в производственном каталоге, сохраняет конфигурацию и связывает картинку с товарами, образцами или заявкой — и при этом встраивается без переезда магазина на новую платформу. К этому добавлялось требование, которое меняет всю архитектуру: то же самое ядро должно повторно использоваться другим магазином с другим брендом, другими сценами, другой палитрой и другим финалом воронки.
Решение
Послойная сцена вместо 3D. Кухня собирается в Canvas из подготовленных слоёв: базовое фото помещения, прозрачные маски верхних шкафов, маски нижних, остров и торцевые панели, детали дверцы и рамки, crown и light rail molding, glaze и finish overlays, дополнительные элементы сцены, watermark магазина. Цвет или текстура применяется только к своей маске, поэтому свет, тени и перспектива исходной фотографии сохраняются. Пользователь получает мгновенный photorealistic preview без тяжёлого рендера на сервере и ожидания. Порядок слоёв, прозрачность, blend mode и совместимость элементов настраиваются для каждой сцены отдельно.
Профиль фасада — не картинка, а ключ. Выбор профиля на первом шаге связан с коллекцией магазина и определяет доступные цвета, glaze, молдинги и последующий product mapping. Палитра не является общей статической библиотекой: магазин задаёт, какие цвета доступны конкретному профилю и товарной серии, а правила совместимости не дают собрать комбинацию, которой нет в торговом или производственном каталоге.
Независимые зоны. Верхние шкафы, нижние, остров, боковые и торцевые панели, crown molding, light rail molding, декоративные элементы. Для каждой зоны — текущий цвет, быстрые swatches и переход к полной палитре с фильтрацией по коллекции, бренду краски, названию или группе, заданной магазином. Цвет молдинга можно связать со шкафами или задать отдельно, панели острова следуют его конфигурации.
История хранит состояние, а не картинку. Пошаговый undo и redo, сброс отдельной зоны, сброс всех цветов и деталей, возврат к предыдущему шагу без потери остальных настроек, несколько сохранённых вариантов, копирование, переименование, before/after и сравнение двух комбинаций. Ссылка на вариант открывает набор идентификаторов сцены, профиля, зон, цветов и элементов, а не тяжёлое изображение в URL. Скачивается при этом уже готовый Canvas-render с watermark магазина.
Каждая визуальная опция связана с товаром. Категория и product family, профиль и door style, цвет и finish, коллекция панелей и молдингов, sample product, атрибут для quote, payload для корзины или design request. Финал определяет merchant: открыть отфильтрованную коллекцию, добавить образцы, передать параметры в запрос коммерческого предложения, сохранить конфигурацию в аккаунт покупателя, приложить рендер к заявке дизайнеру или вернуть host-странице структурированный объект через integration API.
White-label без форка ядра. Для каждого магазина настраиваются логотип, цвета и типографика, домены и allowed embed origins, тексты и локализация, набор сцен и превью, профили фасадов и product mappings, палитры и цветовые группы, отделки и glaze, декоративные элементы, правила совместимости, CTA, watermark и analytics identifiers. Продукт обновляется централизованно, но внутри каждой витрины выглядит родным.
Merchant admin и версия конфигурации. Загрузка базовых сцен, управление масками и порядком слоёв, зоны и интерактивные области, библиотека профилей, текстуры, цвета и метаданные отделки, catalog mapping, предпросмотр и валидация. Перед публикацией проверяются размеры слоёв, обязательные зоны, битые ассеты и отсутствующие product mappings. Конфигурация версионируется и откатывается — неудачное обновление одного магазина не останавливает общий сервис.
Встраивание и доверие к данным. Подключение через iframe или JavaScript embed, postMessage или JS API, callbacks изменения шага и конфигурации, передача product filters и cart payload, deeplink к сохранённому варианту, theme tokens, согласованное управление высотой iframe, переходы на host routes без привязки к конкретной CMS. Обязательны allowed origins и CORS, а клиентский payload не считается доверенным источником цены и доступности: product mapping и CTA проверяются на сервере магазина.
Результат
Покупатель видит свой выбор в настоящей кухонной сцене, настраивает зоны по отдельности, не натыкается на несуществующие сочетания и уходит из конструктора не с картинкой, а с конфигурацией, привязанной к товарам магазина. Магазин подключает модуль к существующей витрине вместо переезда на новую платформу; ассортимент, палитры и сценарий завершения остаются его собственными. Ассеты и конфигурации загружаются отдельно от host-страницы, поэтому сцены и палитры обновляются без релиза витрины. Аналитика собирает воронку целиком: открытие визуализатора, выбор сцены и профиля, смену цвета зоны, отделку и декоративные слои, сохранение варианта, сравнение, скачивание, share, запрос образцов, клик по CTA и завершённую передачу конфигурации в магазин. А компания получила один продукт вместо серии похожих заказов: подключение нового магазина — это конфигурация, ассеты и mapping, а не отдельная ветка кода.
