Ideal House
Перейти к содержанию

Интеграция Webflow#

Используйте пользовательский код Webflow и поля CMS/электронной коммерции для отображения кнопок Room Visualizer, где код товара соответствует каталогу ideal.house.

Статус проверки: Документация справочного центра Webflow проверена 7 сентября 2026 г. Сайт Webflow клиента был недоступен. Пользовательский код выполняется после предпросмотра или публикации, а Webflow не выполняет серверный код в блоке встраивания, поэтому проверяйте опубликованный сайт на тестовом домене.

Перед загрузкой SDK: Откройте Панель управления → Настройки, добавьте источник вашего интернет-магазина в Allowed Origins (CORS) и нажмите Сохранить. Укажите опубликованное имя хоста, а также источники используемых сред предпросмотра и тестирования; разделяйте несколько источников запятыми. См. инструкцию по настройке.

Предварительные требования и ограничения#

Вам понадобятся права на использование пользовательского кода или блока встраивания кода, тестовый домен, Shop ID, Publishable Key и один SKU, уже импортированный в каталог. Для встраивания JavaScript действуют требования тарифного плана Webflow. В браузере допустимо использовать Publishable Key, но нельзя размещать Client Secret или ключ AI API.

SDK не читает данные электронной коммерции Webflow автоматически. Ваш шаблон должен предоставлять SKU, либо клиентский адаптер должен извлекать его из доверенного поля CMS.

Минимальные требования для подключения SDK#

html
<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

data-product-code должен точно соответствовать импортированному ideal.house sku.

Установка загрузчика#

Откройте Настройки сайта → Пользовательский код и добавьте тег скрипта SDK в область подвала/конца тела. Замените заполнители, сохраните и опубликуйте. Установите его один раз на уровне сайта; не повторяйте его в каждом элементе CMS.

Полотно конструктора Webflow может не выполнять скрипт. Проверяйте на предпросмотре или опубликованном тестовом URL и осматривайте фактический исходный код страницы.

Добавьте кнопку на уровне элемента#

Создайте текстовое поле CMS, например, с именем Idealhouse SKU. Заполните его тем же значением, которое импортировано как ideal.house sku. В шаблоне товара или коллекции CMS добавьте встраивание кода там, где должна находиться кнопка:

html
<div
  data-idealhouse-button-container
  data-product-code="[bind this attribute to the current item's Idealhouse SKU]"
></div>

Используйте элемент Добавить поле в редакторе встраивания Webflow, чтобы вставить значение текущего элемента; приведённая выше инструкция в квадратных скобках не является готовой разметкой для рабочего сайта. После публикации проверьте DOM и убедитесь, что вместо неё вставлена обычная строка, например:

html
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>

Для статической страницы вставьте литеральное значение SKU. Не используйте человекочитаемый идентификатор страницы или идентификатор элемента Webflow, если это точное значение не является импортированным ideal.house SKU.

Варианты и динамическое отображение#

Стандартное связывание в конструкторе Webflow может не предоставлять окончательный вариант SKU для произвольного пользовательского кода во всех макетах электронной коммерции. Если для каждого визуального варианта требуется отдельный ресурс ideal.house, создайте клиентский адаптер, который получает выбранный вариант из поддерживаемой интеграции Webflow или собственного слоя данных, а затем заменяет контейнер:

js
function showIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;
  const node = document.createElement('div');
  node.dataset.idealhouseButtonContainer = '';
  node.dataset.productCode = code;
  host.append(node);
}

Это код клиента. Вызывайте его из задокументированного обратного вызова в инструменте вариантов, который вы фактически используете. Не извлекайте отображаемый текст опций и не предполагайте неофициальное событие Webflow.

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

Импорт данных каталога#

Экспортируйте поля товара/CMS Webflow и сопоставьте Idealhouse SKU с sku. Загрузите через Загрузка товаров и следуйте инструкциям импорт товаров, статус задания, список товаров, обновление товаров, удаление товара и ошибки и повторные попытки.

Браузерный SDK не предоставляет автоматическую синхронизацию Webflow. Экспорт через API CMS, вебхуки и автоматизацию клиент реализует самостоятельно.

Проверка и удаление#

Опубликуйте сайт в тестовой среде и проверьте сопоставленный элемент, отсутствующее поле, неизвестный SKU, список коллекции, шаблон товара, фильтры и разбивку на страницы, модальное окно, мобильный размер экрана, управление согласием и кнопки браузера «Назад» и «Вперёд». Убедитесь, что SDK загружается один раз, каждый выведенный код соответствует текущему элементу, а серверные учётные данные отсутствуют в HTML.

Для удаления удалите пользовательский код SDK на уровне сайта и каждое встраивание/связывание кнопки, опубликуйте изменения повторно и очистите кэш прокси/CDN. Убедитесь, что запрос скрипта и элементы data-idealhouse-* отсутствуют на опубликованном сайте.

Официальные ссылки платформы#