Интеграция с собственным интернет-магазином для разработчиков#

Загрузите SDK ideal.house и сопоставьте значения productCode витрины с каталогом.

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

1. Загрузите SDK#

html

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

2. Выберите один способ создания кнопки#

Вариант A: сгенерированная SDK кнопка#

Создайте целевой контейнер. После проверки товара SDK добавит в него дочернюю кнопку.

html

<div data-idealhouse-button-container data-product-code="<PRODUCT_CODE>"></div>

Вариант B: собственная кнопка#

Создайте и оформите кнопку самостоятельно. SDK сохранит DOM, добавит проверку доступности визуализации и обработчик нажатия.

html

<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. Обеспечьте совпадение productCode со значением в каталоге#

<PRODUCT_CODE>

Значение productCode в каталоге и data-product-code на витрине должны быть идентичны, включая регистр символов.
Не регенерируйте productCode из изменяемого имени при каждом рендере; обновляйте каталог и витрину вместе, когда это необходимо.

4. Обрабатывайте динамические страницы и выбранные товары#

SDK отслеживает целевые элементы, добавленные после загрузки страницы. При смене выбранного товара приложение всё равно должно обновлять атрибуты целевого элемента и сбрасывать старое состояние SDK.

Обновление собственной кнопки после изменения выбора#

const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.productCode
  button.dataset.active = 'false'
  button.style.visibility = 'hidden'

  delete button.dataset.rvProductCode
  delete button.dataset.rvProductType
  delete button.dataset.rvProductId
  delete button.dataset.rvProductIds
}

5. Проверьте интеграцию#

На вкладке «Сеть» видно, что sdk.js загружен со статусом HTTP 200.
Атрибут data-product-code соответствующего целевого элемента точно совпадает со значением в каталоге.
Сгенерированная или собственная кнопка отображается только у товаров, доступных для визуализации.
При динамической смене товара целевой элемент обновляется до нажатия покупателя.
Нажатие на кнопку открывает Viewer ideal.house с выбранным товаром.

Расширенная конфигурация#

Сгенерированный на сервере токен запуска#

Используйте этот режим, когда ваш бэкенд выпускает токены запуска с коротким временем жизни. Client Secret никогда не должен появляться в браузерном JavaScript.

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

bash

# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

Пользовательский размер товара#

Укажите ширину, высоту и единицу измерения в нижнем регистре (ft, in или cm) вместе на соответствующем элементе. SDK считывает последние значения в момент нажатия.

html

<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>