Интеграция Shoplazza#
Добавьте Room Visualizer в Shoplazza через расширение приложения для темы или собственную тему Liquid и выводите SKU выбранного варианта как код товара ideal.house.
Статус проверки: Документация Shoplazza по темам, расширениям, товарам и вариантам проверена 7 сентября 2026 г. Партнёрское приложение и тестовый магазин продавца были недоступны, поэтому установку и переключение вариантов нужно проверить в магазине для разработки.
Перед загрузкой SDK: Откройте Панель управления → Настройки, добавьте источник вашего интернет-магазина в Allowed Origins (CORS) и нажмите Сохранить. Укажите опубликованное имя хоста, а также источники используемых сред предпросмотра и тестирования; разделяйте несколько источников запятыми. См. инструкцию по настройке.
Предварительные требования#
Подготовьте магазин разработки/продавца Shoplazza, доступ к исходному коду темы или расширения приложения, Shop ID, Publishable Key и импортированные записи для поддерживаемых SKU вариантов. Сделайте дубликат темы продавца перед кастомизацией.
Расширение приложения темы — это поддерживаемый переиспользуемый путь. Блок приложения вставляет видимый пользовательский интерфейс и должен быть добавлен продавцом в совместимый раздел товара; встраивание приложения может загружать глобальное поведение.
Минимальные требования для подключения SDK#
<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>
Shoplazza документирует variant.sku; используйте эту точную строку в качестве ideal.house sku.
Добавление блока приложения#
Создайте блок приложения в расширении темы для раздела товара. Блоки Shoplazza Liquid в контексте товара имеют доступ к product. Начните с пустого внешнего контейнера, затем передайте выбранный вариант из состояния формы товара активной темы:
<div class="idealhouse-host"></div>
{% schema %}
{
"name": { "en-US": "Room Visualizer", "zh-CN": "房间可视化" },
"target": "section",
"javascript": ["idealhouse.js"],
"settings": []
}
{% endschema %}
Для товара с одним вариантом JavaScript блока может прочитать единственную документированную запись в product.variants из данных, безопасно сериализованных темой. Для товара с несколькими вариантами оставляйте внешний контейнер пустым, пока существующая форма товара темы не определит выбор. Это позволяет не зависеть от недокументированного свойства Liquid для выбранного варианта.
Загрузка SDK#
В idealhouse.js загрузите SDK один раз. Для приложения, рассчитанного на повторное использование, передавайте Shop ID и Publishable Key через проверенную публичную конфигурацию блока или встраивания, а не жёстко задавайте данные одного продавца в коде:
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);
}
Никогда не раскрывайте секрет приложения или ideal.house Client Secret.
Синхронизация выбранного варианта#
Подключите задокументированный обратный вызов формы товара темы к этому адаптеру:
function renderIdealhouseVariant(host, variant) {
host.replaceChildren();
const code = String(variant && variant.sku || '').trim();
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
В объекте варианта Shoplazza документировано поле sku, но темы могут по-разному реализовывать выбор. Подключение обработчика клиент реализует в своём адаптере. После нового выбора пересоздавайте контейнер, а не ограничивайтесь изменением разметки, уже заполненной SDK.
Для карточек коллекций, быстрого просмотра, фильтров поиска и разделов, формируемых на стороне клиента, добавьте внешний контейнер для каждого элемента и вызывайте связующую функцию после документированного обработчика отрисовки темы. Если окончательный вариант на карточке не определён, не показывайте кнопку или добавьте ссылку на страницу товара.
Импорт товаров#
Экспортируйте каждый поддерживаемый variant.sku и импортируйте его как ideal.house sku через Загрузка товаров. См. импорт товаров, статус задания, список товаров, обновление товаров, удаление товара и ошибки и повторные попытки.
Экспорт через API администратора, вебхуки, синхронизацию по расписанию, OAuth и распространение расширения клиент реализует самостоятельно.
Проверка и удаление#
Проверьте размещение блока приложения, включение встраивания, товар с одним вариантом, все сочетания опций товаров с несколькими вариантами, пустые, повторяющиеся и неизвестные SKU, карточки коллекций, быстрый просмотр, фильтры, историю браузера, мобильную версию, локализацию и валюты, согласие, а также предпросмотр темы и её опубликованную версию. Убедитесь, что SDK запрашивается один раз и SKU выбранного варианта точно сопоставлен.
Для удаления отключите и удалите расширение приложения темы или удалите пользовательские Liquid/JavaScript, опубликуйте чистую тему, очистите кэши витрины и убедитесь, что SDK и все узлы data-idealhouse-* отсутствуют.