Интеграция с BigCommerce#
Добавьте Room Visualizer в интернет-магазин BigCommerce на Stencil: загрузите SDK один раз и укажите SKU текущего товара или варианта в контейнере, где SDK создаёт кнопку.
Статус проверки: Документация разработчика BigCommerce проверена 7 сентября 2026 г. Тестовый магазин был недоступен. Stencil и Catalyst используют разные модели отрисовки и навигации; это руководство предлагает конкретный способ для Stencil, а магазинам на Catalyst рекомендует адаптер для соответствующего фреймворка.
Перед загрузкой SDK: Откройте Панель управления → Настройки, добавьте источник вашего интернет-магазина в Allowed Origins (CORS) и нажмите Сохранить. Укажите опубликованное имя хоста, а также источники используемых сред предпросмотра и тестирования; разделяйте несколько источников запятыми. См. инструкцию по настройке.
Выберите способ интеграции для вашего магазина#
- Stencil: установите загрузчик через менеджер скриптов или API скриптов, затем добавьте контейнер в шаблон собственной темы.
- Catalyst: добавьте скрипт и компонент в Catalyst React/Next.js приложение; следуйте руководству React / Next.js.
- Устаревший Blueprint: перейдите на поддерживаемую платформу интернет-магазина или попросите разработчика BigCommerce найти безопасную точку вставки. В актуальной документации API скриптов Blueprint рассматривается отдельно.
Вам понадобятся доступ к редактированию темы, тестовая тема или канал, Shop ID и Publishable Key ideal.house и хотя бы один SKU BigCommerce, импортированный в ideal.house.
Минимальные требования для подключения 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>
Код товара в контейнере должен точно совпадать с sku товара, импортированного в каталог. Это руководство не предполагает наличия готового приложения ideal.house для BigCommerce.
Установка на Stencil#
В разделе Интернет-магазин → Менеджер скриптов создайте скрипт, размещаемый внизу страницы, для нужного магазина или канала и страниц товаров. Вставьте только тег скрипта SDK из примера, указав учётные данные, допустимые для браузера. Менеджер скриптов предоставляет в панели управления возможности API скриптов с учётом каналов.
Для приложения, предназначенного для повторного использования, применяйте API скриптов BigCommerce. За эту операцию API и процесс OAuth приложения отвечает ваш сервис интеграции; не раскрывайте его токен доступа в коде интернет-магазина.
Убедитесь, что существует только один тег SDK. Не добавляйте его также в templates/layout/base.html.
Отрисовка начального продукта#
В собственной теме Stencil добавьте контейнер рядом с формой товара в используемый темой фрагмент шаблона просмотра товара:
{{#if product.sku}}
<div
data-idealhouse-button-container
data-product-code="{{product.sku}}"
></div>
{{/if}}
Конкретный фрагмент зависит от темы. Используйте Stencil CLI для предпросмотра изменённой темы и храните изменения в теме под контролем версий, а не редактируйте сгенерированный HTML интернет-магазина.
Для карточек создавайте контейнер только тогда, когда в контексте карточки доступен точный SKU, который вы импортировали. На странице категории для товара с опциями окончательный SKU варианта может быть ещё не определён; добавьте ссылку на страницу товара, если покупатель ещё не выбрал вариант полностью.
Синхронизация опций продукта#
JavaScript темы Stencil получает изменения опций товара через код страницы товара, специфичный для темы. Добавьте собственный адаптер в том месте, где текущая тема уже получила ответ с данными окончательно выбранного варианта:
export function replaceIdealhouseContainer(host, sku) {
host.replaceChildren();
const code = typeof sku === 'string' ? sku.trim() : '';
if (!code) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = code;
host.append(container);
}
Передавайте SKU выбранного варианта из обработчика темы. Темы BigCommerce могут настраивать или заменять стандартную реализацию страницы товара, поэтому это руководство не вводит вымышленное глобальное событие изменения опций. Удаляйте старый контейнер перед вставкой нового.
Быстрый просмотр и динамические страницы#
Быстрый просмотр, фасетный поиск, разбивка на страницы и навигация на стороне клиента могут заменять DOM товара. Добавляйте чистый контейнер в каждый формируемый шаблон и вызывайте ту же связующую функцию после документированного обработчика отрисовки темы. Не клонируйте контейнер, уже заполненный SDK.
Catalyst использует отрисовку React на стороне клиента и не предоставляет контекст Handlebars темы Stencil. Загрузите SDK один раз в общей оболочке приложения и задавайте ключ компонента визуализатора по SKU выбранного варианта, как показано в руководстве React/Next.js.
Импорт и сопоставление данных товаров#
Сопоставьте значения BigCommerce sku с ideal.house sku; для вариантов используйте каждый вариант SKU, а не ID родительского продукта. Данные каталога BigCommerce не синхронизируются браузерным SDK.
Используйте загрузку продуктов для утвержденной схемы импорта, затем проверьте импорт продуктов, статус задачи, список продуктов, обновление продуктов, удаление продукта и ошибки и повторные попытки. Любой экспорт API, веб-хук или запланированная синхронизация BigCommerce выполняется адаптером, управляемым клиентом.
Проверка и удаление#
Перед запуском проверьте простой товар, все сочетания опций, товар без SKU и SKU, отсутствующий в ideal.house. Проверьте страницу товара, карточки категорий, быстрый просмотр, фасетную навигацию, кнопки браузера «Назад» и «Вперёд», мобильную вёрстку, обработку согласия и каждый активный канал магазина. В инструментах разработчика убедитесь, что выполняется один успешный запрос SDK, а код товара точно совпадает с SKU.
Чтобы удалить интеграцию, удалите запись менеджера скриптов или запись API скриптов, всю разметку контейнеров в теме и код адаптера. Опубликуйте очищенную тему и очистите кеши магазина и CDN. Убедитесь, что запрос SDK отсутствует во всех каналах.