Интеграция со Squarespace#
Установите Room Visualizer на Squarespace с помощью вставки кода и разместите отдельные контейнеры товаров там, где редактор страниц допускает пользовательский код.
Статус проверки: Документация справочного центра Squarespace проверена 7 сентября 2026 г. Сайт Squarespace клиента был недоступен. Для вставки кода и блоков JavaScript нужны подходящие тарифы; пользовательский код не входит в область поддержки Squarespace, а загрузка через Ajax может влиять на его работу.
Перед загрузкой SDK: Откройте Панель управления → Настройки, добавьте источник вашего интернет-магазина в Allowed Origins (CORS) и нажмите Сохранить. Укажите опубликованное имя хоста, а также источники используемых сред предпросмотра и тестирования; разделяйте несколько источников запятыми. См. инструкцию по настройке.
Область применения и требования#
Этот путь наиболее удобен для небольшого каталога со стабильными страницами товаров либо для сайта, где вы контролируете явный слой данных с кодами товаров. Вам понадобятся подходящий план, доступ владельца сайта, Shop ID, Publishable Key и предварительно импортированные SKU ideal.house.
Платформа Squarespace не предоставляет расширения ideal.house в рамках этого руководства. Стандартный редактор товаров не гарантирует наличие стабильного публичного JavaScript API для выбранного варианта товара 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>
Код товара должен точно совпадать с sku товара, импортированного в каталог. Не используйте Client Secret в разделе вставки кода.
Установка загрузчика#
Откройте Сайт → Страницы → Пользовательский код → Вставка кода (названия могут различаться в зависимости от версии сайта). Вставьте <script> SDK в Нижнюю часть страницы, замените оба значения-заполнителя и сохраните. Код из этой области вставляется на страницы сайта перед </body>; страницы оформления заказа не поддерживают вставленный код.
Устанавливайте загрузчик только один раз. Если он уже добавлен другим интеграционным решением, удалите дубликат.
Размещение кнопки товара#
Там, где редактор страниц позволяет использовать блок кода с поддержкой JavaScript, разместите:
<div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
Используйте SKU именно этого товара. В Squarespace 7.1 макеты «Магазин/Детали товара» могут не принимать произвольные блоки в основной области информации о товаре. Практичный вариант — обычная страница макета с блоком товара и соседним кодовым блоком, по одной паре на товар. Убедитесь, что страница магазина остаётся включённой, так как блоки товаров зависят от неё.
Для больших каталогов разработчик может добавлять контейнеры на основе стабильного соответствия, которое поддерживает клиент, например сопоставления пути URL с SKU:
const skuByPath = {
'/shop/oak-chair': 'CHAIR-OAK-01',
'/shop/walnut-chair': 'CHAIR-WALNUT-01'
};
function renderForPath() {
const host = document.querySelector('[data-idealhouse-host]');
const sku = skuByPath[location.pathname];
if (!host) return;
host.replaceChildren();
if (!sku) return;
const container = document.createElement('div');
container.dataset.idealhouseButtonContainer = '';
container.dataset.productCode = sku;
host.append(container);
}
Сопоставление URL, вставку внешнего контейнера и обработчик навигации клиент реализует самостоятельно. Не извлекайте данные из закрытого внутреннего состояния Squarespace и не полагайтесь на неизменность его структуры.
Варианты, быстрый просмотр и загрузка через Ajax#
Если один товар Squarespace имеет несколько вариантов с разными ресурсами ideal.house, показывайте кнопку только после того, как ваш адаптер сможет определить выбранный вариант SKU из поддерживаемого источника. При каждом изменении заменяйте старый контейнер на новый. Если поддерживаемый колбэк выбора или источник данных отсутствует, используйте один общий SKU на уровне товара только в том случае, если все варианты используют один и тот же визуальный ресурс, либо не показывайте кнопку.
Быстрый просмотр, блоки товаров и загрузка страниц через Ajax могут заменять содержимое страницы. Squarespace предупреждает, что загрузка через Ajax может конфликтовать с пользовательским кодом. Тестируйте точный шаблон; при необходимости отключите загрузку через Ajax или вызывайте renderForPath() из механизма навигации, которым вы управляете. MutationObserver является адаптером клиента в качестве последней меры и должен быть ограничен областью товара.
Импорт данных товаров#
Поддерживайте таблицу соответствия SKU товаров и вариантов Squarespace значениям sku в ideal.house, затем используйте загрузку товаров. Полный общедоступный процесс описан в разделах импорт товаров, статус задачи, список товаров, обновление товаров, удаление товара и ошибки и повторные попытки.
Браузерный SDK не синхронизирует товары Squarespace. Экспорт через API электронной коммерции, вебхуки и задания по расписанию клиент реализует самостоятельно.
Проверка и удаление#
Тестируйте опубликованный сайт в приватном окне, так как редактирование при входе в систему может подавлять пользовательский код. Проверьте один сопоставленный товар, один отсутствующий SKU, один неизвестный SKU, блоки товаров, быстрый просмотр, Ajax-навигацию, кнопки «Назад»/«Вперёд» браузера, мобильную раскладку, согласие с использованием cookie и исключение оформления заказа. Убедитесь в одном успешном запросе SDK и точном соответствии кода товара/SKU.
Для удаления интеграции удалите код, вставленный в нижнюю часть страницы, а также все блоки кода, внешние контейнеры и скрипты сопоставления. Сохраните изменения и очистите кеши. Убедитесь, что опубликованная страница больше не выполняет запрос SDK и не содержит элементов data-idealhouse-*.