Squarespace 連携#

コード挿入機能で Squarespace に Room Visualizer を設置し、ページエディターがカスタムコードを許可する場所に商品固有のコンテナを配置します。

検証状況: 2026年9月7日に Squarespace ヘルプセンターのドキュメントを確認しました。顧客の Squarespace サイトは利用できませんでした。コード挿入と JavaScript コードブロックには対応プランが必要です。カスタムコードは Squarespace のサポート対象外であり、Ajax 読み込みの影響を受ける場合があります。

SDK を読み込む前に: ダッシュボード → 設定を開き、オンラインストアのオリジンを Allowed Origins (CORS) に追加して保存をクリックします。公開サイトのホスト名と、利用するプレビューまたはステージングのオリジンを含めます。複数のオリジンはカンマで区切ってください。設定手順を参照してください。

対応範囲と前提条件#

この方式は、商品ページが安定した小規模カタログ、または明示的な商品コードのデータ層を管理できるサイトに特に適しています。対応プラン、サイト所有者権限、Shop ID、Publishable Key、インポート済みの ideal.house の SKUs が必要です。

このガイドでは、Squarespace 向けの ideal.house 拡張機能は提供していません。標準の商品エディターは、選択したバリエーションの SKU を取得するための安定した公開 JavaScript API を保証していません。そのため、バリエーション単位の照合には利用側のアダプターが必要であり、すべてのテンプレートで実用的とは限りません。

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 と完全に一致する必要があります。コード挿入機能で Client Secret を使用しないでください。

ローダーの設置#

ウェブサイト → ページ → カスタムコード → コード挿入 を開きます（サイトのバージョンによりラベルが異なる場合があります）。フッター に SDK の <script> を貼り付け、両方のプレースホルダーを置き換えて保存します。フッターへの挿入はサイトのページの </body> の前に行われます。チェックアウトページではコード挿入は利用できません。

ローダーは一度だけ設置します。別の連携ですでに追加されている場合は重複分を削除します。

商品ボタンの配置#

ページエディターで JavaScript を有効にしたコードブロックを使用できる場所に、以下を配置します。

html

<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 は最後の手段として利用側で実装し、監視範囲を商品領域に限定してください。

商品データのインポート#

Squarespace の商品またはバリエーションの SKU と ideal.house の sku の対応表を管理し、商品アップロードを使用します。公開されている一連の手順は、商品インポート、ジョブの状態、商品一覧、商品更新、商品削除、エラーと再試行に記載されています。

ブラウザー用 SDK は Squarespace の商品を同期しません。Commerce API のエクスポート、Webhook、定期ジョブは利用側で管理します。

検証と削除#

ログイン中の編集ではカスタムコードが抑止される場合があるため、公開サイトをプライベートウィンドウでテストします。対応付け済みの商品、SKU がない商品、不明な SKU、商品ブロック、クイックビュー、Ajax による画面遷移、ブラウザーの戻る・進む、モバイル表示、Cookie 同意、チェックアウトが対象外であることを確認します。SDK のリクエストが一回だけ成功し、商品コードと SKU が完全に一致することを検証します。

削除するには、フッターの挿入コード、すべてのコードブロック、ホスト要素、対応付けスクリプトを削除して保存し、キャッシュを消去します。公開ページに SDK のリクエストや data-idealhouse-* 要素がないことを検証します。