Быстрый старт SDK#

Добавьте на витрину возможность визуализации одного подготовленного товара, прежде чем распространять ее на весь каталог.

1. Подготовка магазина и товара#

Выберите магазин в панели управления. Получите его Shop ID и Publishable Key. Откройте панель управления → Настройки, добавьте источник витрины в Allowed Origins (CORS) и нажмите Сохранить. Убедитесь, что хотя бы один товар готов к визуализации. При импорте с вашего сервера следуйте Product Import API и проверьте итоговый результат задачи.

2. Выбор руководства по платформе#

Для тем Liquid используйте руководство Shopify, для витрин WooCommerce — WooCommerce, а для своего сайта — собственный интернет-магазин. Другие платформы перечислены в обзоре SDK.

3. Загрузка SDK один раз#

Для собственного интернет-магазина загрузите этот скрипт один раз на странице, в которую встраивается интеграция. Замените оба заполнителя значениями одного и того же магазина.

html

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

4. Создание элемента для нужного товара#

Используйте точный productCode из вашего подготовленного каталога. В этом примере SDK создает кнопку после валидации товара.

html

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

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

5. Проверка пути покупателя#

Проверьте, что sdk.js успешно загружается, появляется нужная кнопка, а нажатие открывает Viewer с выбранным товаром. Смените варианты, перейдите к другому товару и повторите проверку на мобильном устройстве. Перед публикацией выполните проверки перед запуском.