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

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

Добавьте ideal.house Room Visualizer на сайт WordPress: загрузите один публичный браузерный скрипт и создайте контейнер, код товара в котором совпадает с SKU товара, импортированного в каталог.

Статус проверки: Документация проверена 7 сентября 2026 г. Это руководство не прошло сквозную проверку на теме WordPress клиента. Перед публикацией проверьте его на тестовой копии сайта с теми же версиями темы и конструктора страниц, которые вы используете.

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

Область применения и требования#

Это руководство охватывает сайты WordPress, классические темы, блочные темы и конструкторы страниц, позволяющие добавлять HTML. Если сайт использует данные продуктов WooCommerce, для выбора вариантов используйте руководство WooCommerce.

Подготовка:

  • права администратора, а для постоянной установки — дочернюю тему или небольшой плагин, разработанный для вашего сайта;
  • Shop ID и Publishable Key из панели управления ideal.house;
  • один товар, уже импортированный в ideal.house, с известным sku;
  • тестовую страницу, на которой можно отключить кеширование и минификацию на время проверки.

Publishable Key предназначен для браузерной разметки. Никогда не размещайте Client Secret или ключ AI API в HTML сайта WordPress.

Подтвердите контракт SDK#

Минимальная поддерживаемая установка — это ровно один скрипт 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 должен точно совпадать с sku в каталоге, включая регистр и знаки препинания. Содержимым контейнера управляет SDK. Это руководство не предоставляет готовый плагин ideal.house для WordPress.

Установите скрипт на весь сайт#

WordPress рекомендует загружать клиентские скрипты через wp_enqueue_script(). Добавьте следующий код в functions.php дочерней темы или в плагин, разработанный для вашего сайта. Фильтр добавляет два обязательных атрибута данных к тегу, который формирует WordPress.

php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'idealhouse-room-visualizer',
        'https://sdk.ideal.house/sdk.js',
        array(),
        null,
        array('strategy' => 'async', 'in_footer' => true)
    );
});

add_filter('script_loader_tag', function ($tag, $handle) {
    if ($handle !== 'idealhouse-room-visualizer') {
        return $tag;
    }

    return str_replace(
        '<script ',
        '<script data-shop-id="<SHOP_ID>" data-publishable-key="<PUBLISHABLE_KEY>" ',
        $tag
    );
}, 10, 2);

Замените оба плейсхолдера. Версии WordPress до 6.3 не принимают массив как последнее значение аргумента wp_enqueue_script(); вместо этого передайте true и используйте фильтр script_loader_tag, чтобы добавить также async.

Не устанавливайте SDK повторно через блок кода или менеджер тегов. В инструментах разработчика выражение document.querySelectorAll('script[src="https://sdk.ideal.house/sdk.js"]').length должно возвращать 1.

Разместите кнопку#

В блочном редакторе добавьте блок Произвольный HTML в том месте, где должна появиться кнопка:

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

Для повторяющихся карточек рендерьте ту же разметку из шаблона темы и экранируйте код как атрибут HTML:

php
<div
  data-idealhouse-button-container
  data-product-code="<?php echo esc_attr($idealhouse_product_code); ?>"
></div>

Ваша тема или плагин должны предоставлять $idealhouse_product_code. Не используйте идентификатор записи, слаг или заголовок, если это значение не совпадает в точности с импортированным в ideal.house sku.

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

Перед запуском создайте явную таблицу соответствий:

значение WordPressзначение ideal.houseПравило
пользовательское поле, например idealhouse_skuskuточное совпадение строк
одна страница без вариантоводин импортированный продуктодин контейнер
элемент коллекции конструктора страницполе SKU отдельного элементане используйте один общий код для всей коллекции

При переключении варианта товара на странице ваш адаптер должен установить новое значение data-product-code. Перед вставкой нового контейнера удалите старый, чтобы не использовать устаревшее состояние визуализатора:

js
function renderIdealhouseButton(host, sku) {
  host.replaceChildren();
  if (!sku) return;

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

Это код адаптера, который реализует клиент. Он не вызывает недокументированный метод ideal.house и не вводит вымышленное событие WordPress; вызывайте его из документированного обработчика, предоставляемого вашей темой или конструктором страниц.

Динамическая навигация и кэши#

При использовании AJAX-фильтров, бесконечной прокрутки, модальных карточек товаров или переходов конструктора страниц вставляйте новый контейнер после появления нового узла товара в DOM. Не клонируйте контейнер, который SDK уже заполнил. Если инструмент не предоставляет стабильный обработчик завершения отрисовки, добавьте контейнер в шаблон элемента, чтобы при каждой отрисовке создавалась чистая разметка.

После изменения темы очистите кеши WordPress, CDN и плагинов оптимизации. Исключите https://sdk.ideal.house/sdk.js из преобразований для отложенной загрузки, если плагин оптимизации удаляет его атрибуты данных или откладывает выполнение до взаимодействия с пользователем.

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

Контент WordPress не синхронизируется автоматически. Экспортируйте выбранное пользовательское поле как sku и импортируйте соответствующие записи через Загрузку продукта. Далее следуйте разделам импорт продуктов, статус задачи, список продуктов, обновление продуктов, удаление продукта и ошибки и повторные попытки.

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

  1. Откройте тестовый сайт в приватном окне браузера, а не в режиме предпросмотра редактора WordPress.
  2. Убедитесь, что запрос SDK выполняется успешно и только один раз.
  3. Проверьте контейнер и сравните data-product-code посимвольно с импортированным sku.
  4. Убедитесь, что импортированный SKU позволяет использовать визуализатор, а неизвестный SKU не приводит к появлению неработающего элемента управления.
  5. Проверьте навигацию конструктора страниц, фильтры, кнопки браузера «Назад» и «Вперёд», мобильную вёрстку и настройки согласия.
  6. Выберите каждый поддерживаемый вариант и убедитесь, что контейнер пересоздается с его SKU.
  7. Проверьте консоль браузера и протестируйте снова с включенным кешированием/минификацией.

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

Удалите функцию подключения скрипта и фильтр script_loader_tag, затем удалите все блоки или фрагменты шаблона с data-idealhouse-button-container. Очистите все кеши и убедитесь, что URL SDK отсутствует в исходном коде страницы и на вкладке сетевых запросов.

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