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

Интегрируйте Room Visualizer с Wix Stores через механизм расширения Wix, соответствующий типу вашего сайта. Для Wix Editor и Wix Studio нужны разные подходы.

Статус проверки: Документация расширений Wix проверена 7 сентября 2026 г. Сайт Wix клиента и учётные данные приложения были недоступны, поэтому сквозная проверка не проводилась. SDK и его контейнер должны находиться в одном DOM интернет-магазина; встраивание HTML через iframe этого не заменяет.

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

Выберите правильный путь Wix#

В документации Wix указано, что встроенные скрипты Stores недоступны в Wix Studio; вместо них для приложений предлагается расширение в виде плагина сайта. Нельзя установить решение со встроенным скриптом для Editor и считать, что оно также поддерживает Studio.

Требования#

Подготовьте тестовый сайт Wix с Wix Stores, права на публикацию пользовательского кода или расширения приложения, Shop ID и Publishable Key ideal.house и импортированный тестовый SKU. Определите, есть ли у выбранного варианта Wix собственный SKU. Не размещайте секреты приложения и ключи серверных API на странице браузера.

Минимальная разметка SDK#

Если Wix позволяет вашему коду выполняться в документе интернет-магазина, используйте следующую поддерживаемую разметку ideal.house:

<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>

Код товара должен точно совпадать с sku, импортированным в ideal.house.

Wix Editor: установка для одного сайта#

В панели управления Wix добавьте тег SDK через Настройки → Пользовательский код, разместите его в теле страницы или в конце тела и выберите страницы товаров, на которых он нужен. Опубликуйте сайт: режима предпросмотра недостаточно для проверки рабочего сайта.

Затем добавьте пользовательский элемент страницы товара или точку расширения Wix Stores, которая создаёт контейнер в том же документе верхнего уровня. Не используйте встраивание HTML Wix для кнопки: оно работает внутри iframe, поэтому скрипт в родительском документе не сможет обнаружить контейнер, а скрипт внутри iframe не сможет управлять страницей товара.

Размещаемый элемент должен предоставлять одну операцию, реализованную в вашем коде:

function setIdealhouseSku(host, sku) {
  host.replaceChildren();
  const code = typeof sku === 'string' ? sku.trim() : '';
  if (!code) return;

  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Вызывайте её только после того, как Wix вернёт полные данные текущего товара или варианта через API, доступный вашей странице или расширению. Это код адаптера, который реализует клиент; в нём намеренно не указано непроверенное событие страницы Wix.

Приложение Wix: встроенный скрипт для магазинов Wix Editor#

Wix Stores предоставляет области details-placeholder и bottom-placeholder для расширений со встроенными скриптами. Добавьте внешний контейнер в одну из этих областей, не заменяя её содержимое: она может использоваться другими приложениями. Настройте скрипт SDK как отдельный встраиваемый фрагмент или создайте его программно с точными атрибутами src, data-shop-id и data-publishable-key.

Wix Site API, доступный встроенным скриптам, созданным через CLI, позволяет читать контекст интернет-магазина. Получите SKU текущего варианта через поддерживаемый API Stores платформы Wix, затем вызовите вашу связующую функцию setIdealhouseSku(). Оставляйте область вставки пустой, пока не будет определён полный SKU.

Wix Studio: плагин сайта#

Создайте плагин сайта Wix Stores для документированного слота страницы товара. Создайте контейнер в интерфейсе плагина и загрузите SDK в документ сайта, формируемый Wix. Плагин должен передавать определённый им SKU текущего варианта в DOM-контейнер. Названия слотов Wix Studio и API компонентов могут меняться; при создании расширения выбирайте их по актуальной справке CLI/API, а не копируйте название из этого руководства.

Не используйте слот плагина, который выводит элемент управления в изолированном iframe: работа SDK и его визуализатора через такую границу не проверена. Выберите точку расширения Wix, размещающую контейнер в документе интернет-магазина, или используйте магазин с отдельным клиентским приложением, где вы управляете документом.

Сопоставление товаров и навигация#

Сопоставьте sku товара или варианта Wix с sku в ideal.house. Не подставляйте незаметно идентификатор товара Wix в качестве запасного значения: сгенерированный идентификатор не совпадёт с SKU в каталоге, если вы намеренно не импортировали именно его.

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

1. очистите ранее отрендеренный контейнер;
2. определите полностью выбранный вариант товара;
3. вставьте свежий контейнер с его SKU;
4. оставляйте внешний контейнер пустым, если полный SKU не определён или не поддерживает визуализацию.

В галереях и повторяющихся списках каждому элементу нужен собственный SKU. Для быстрого просмотра и товаров в модальных окнах требуется такой же связующий код для обработки жизненного цикла в слоте модального окна.

Импорт продуктов#

Wix Stores не синхронизируется с ideal.house автоматически. Экспортируйте поля продукта и варианта Wix, установите каждый нужный Wix SKU как sku и используйте Загрузка продуктов. См. также импорт продуктов, статус задачи, список продуктов, обновление продуктов, удаление продукта и ошибки и повторные попытки.

Автоматическую синхронизацию Wix с ideal.house, процесс установки приложения и обработчик вебхуков Wix клиент реализует самостоятельно; это руководство не обещает готовые решения для этих задач.

Проверка перед публикацией#

1. Проверьте опубликованный сайт в приватном окне браузера на компьютере и мобильном устройстве.
2. Убедитесь, что SDK загружается один раз в том же документе, где находится контейнер.
3. Сравните код товара в DOM с импортированным SKU: они должны совпадать в точности.
4. Измените каждую опцию до выбора финальной вариации; подтвердите, что старый контейнер удален и появляется новый.
5. Проверьте навигацию Wix на стороне клиента, страницы галерей и повторяющихся списков товаров, быстрый просмотр, кнопки браузера «Назад» и «Вперёд», настройки согласия и режимы с входом в учётную запись и без него.
6. Убедитесь, что неизвестный или пустой SKU не приводит к появлению неработающего элемента управления визуализатором.
7. Для приложения проверьте установку, включение, отключение и удаление на отдельных тестовых сайтах Wix Editor и Studio в соответствии с заявленной поддержкой.

Удаление интеграции#

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

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

• Wix: настройка Wix Stores с помощью встроенных скриптов
• Wix: о встроенных скриптах
• Wix: о расширениях сайта
• Wix: Пользовательские элементы