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

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

Интегрируйте Room Visualizer с онлайн-магазином SHOPLINE через расширение приложения темы или контролируемый блок пользовательской темы.

Статус проверки: Документация по темам интернет-магазина SHOPLINE 2.x/3.0 проверена 7 сентября 2026 г. Партнерское приложение или тестовый магазин продавца не были доступны. Синтаксис шаблонов и поддерживаемые типы расширений различаются в зависимости от поколения интернет-магазина, поэтому проверяйте соответствие точной версии магазина.

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

Выберите способ интеграции#

  • Для переиспользуемого публичного приложения в интернет-магазине 2.0/2.1, SHOPLINE рекомендует использовать расширение темы с блоком приложения и необязательным встраиваемым блоком приложения.
  • Темы интернет-магазина 3.0 предоставляют переиспользуемые блоки с необязательными ресурсами JavaScript и блоками приложений.
  • API тегов скриптов/ресурсов устарели или зависят от версии/типа приложения; не используйте их, не проверив таблицу совместимости SHOPLINE.
  • Для кастомизации темы одного магазина используйте структуру блоков/шаблонов и ресурсов активной версии.

Подготовьте магазин разработки, доступ к расширению/теме, Shop ID, Publishable Key и импортированные коды вариантов.

Минимальные требования для подключения 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>

Код товара должен соответствовать sku каталога ideal.house. Эта документация не утверждает, что существует устанавливаемое приложение ideal.house SHOPLINE.

Создание блока темы#

Создайте блок приложения или публичный блок темы, который отображает внешний контейнер на страницах деталей товара. Используйте точный объект товара/варианта и помощники экранирования, описанные для вашего поколения интернет-магазина. Итоговый HTML витрины должен быть:

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

В исходном шаблоне замените CHAIR-OAK-01 выражением, возвращающим SKU или код выбранного варианта. Не вставляйте выражение Shopify Liquid в шаблоны SHOPLINE 3.0 на Handlebars: это разные языки с разными структурами объектов.

Для блока приложения добавьте его в раздел товара в редакторе тем. Для встраивания приложения используйте его для глобальной загрузки SDK без видимого пользовательского интерфейса. Блоки приложений обычно требуют, чтобы продавец активировал/размещал их после установки.

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

В ресурсе JavaScript расширения/темы создайте скрипт с двумя публичными настройками перед его добавлением:

js
if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
  const script = document.createElement('script');
  script.src = 'https://sdk.ideal.house/sdk.js';
  script.async = true;
  script.dataset.shopId = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
}

Используйте конфигурацию расширения/динамические параметры для учетных данных нескольких продавцов. Раскрывайте только Publishable Key; храните секреты приложения на вашем сервере.

Выбранные варианты и динамические разделы#

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

js
function setIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

Темы SHOPLINE настраиваемы, поэтому в этом руководстве не изобретается универсальное событие выбора варианта витрины. В интернет-магазине 3.0 документированы события секций/блоков редактора тем, но это события жизненного цикла редактора, а не события выбора варианта покупателем.

Когда разделы, фильтры, пагинация, быстрый просмотр или предпросмотр в редакторе тем повторно создают узел товара, создавайте новый контейнер. Удаляйте обработчики при выгрузке блока из редактора тем. Кнопке карточки товара нужен SKU именно этого товара; не показывайте элемент управления, пока итоговый вариант не определён.

Импорт товаров#

Экспортируйте данные товаров и вариантов SHOPLINE и сопоставьте выбранный код витрины с sku в ideal.house. Используйте загрузку товаров и утверждённые руководства по импорту, статусу задачи, получению списка, обновлению, удалению и обработке повторных попыток.

Синхронизацию через API администрирования SHOPLINE, вебхуки, OAuth приложения и распространение через магазин приложений клиент реализует в своём адаптере.

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

Протестируйте установку и включение блока продавцом, простой товар, каждый вариант, отсутствующие/неизвестные коды, карточки, быстрый просмотр, фильтры, навигацию в стиле SPA, мобильную версию, согласие, предпросмотр в редакторе тем и все поддерживаемые версии интернет-магазина. Убедитесь в одном запросе SDK и точном соответствии кода/SKU.

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

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