Ideal House
コンテンツにスキップ

Wix 連携#

サイトの種類に合う Wix の拡張機能を通じて、Wix Stores に Room Visualizer を連携させます。Wix Editor と Wix Studio では異なる方式が必要です。

検証状況: 2026年9月7日 に Wix の拡張機能のドキュメントを確認しました。顧客の Wix サイトやアプリの認証情報は利用できなかったため、一連の操作全体の検証は行っていません。SDK とそのコンテナは同じストアの DOM 内に存在する必要があり、HTML の iframe では代用できません。

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

適切な Wix の方式の選択#

オンラインストア推奨される挿入方式制限
一つのマーチャントの Wix Editor サイトサイトの カスタムコード と商品ページの要素または独自アプリページデータには引き続き利用側の橋渡し処理が必要
Wix Editor Stores 向けの Wix アプリ埋め込みスクリプト拡張と Wix Stores のプレースホルダーWix Stores の埋め込みスクリプトは Wix Studio に非対応
Wix Studio サイトWix Stores サイトプラグインのスロットWix アプリまたは拡張機能のプロジェクトが必要
ヘッドレスの Wix ストア自身の React/Vue フロントエンドに SDK を追加対応するフレームワークのガイドに従う

Wix は、Stores の埋め込みスクリプトが Wix Studio では利用できないと明記し、アプリにはサイトプラグイン拡張を案内しています。Editor 向けの埋め込みスクリプトを設置して、Studio にも対応していると扱わないでください。

前提条件#

Wix Stores を備えた Wix のテストサイト、カスタムコードまたはアプリ拡張を公開する権限、ideal.house の Shop ID と Publishable Key、インポート済みのテスト用 SKU を用意します。選択した Wix のバリエーションに固有の SKU があるか確認します。アプリのシークレットとバックエンドの API キーはブラウザーのページに含めないでください。

SDK の最小マークアップ#

Wix がストアのドキュメント内でのコード実行を許可している場所では、対応する ideal.house のマークアップは次のとおりです。

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>

商品コードは、インポート先の ideal.house の sku と完全に一致する必要があります。

Wix Editor: 一つのサイトへの設置#

Wix のダッシュボードで 設定 → カスタムコード から SDK タグを追加し、body 内または body の末尾に配置して、必要な商品ページを選びます。サイトを公開してください。プレビューモードだけでは本番環境の確認として不十分です。

次に、同じ最上位ドキュメントにコンテナを生成する商品ページのカスタム要素または Wix Stores の拡張ポイントを追加します。ボタンには Wix の HTML 埋め込みを使用しないでください。iframe 内で実行されるため、親ドキュメントのスクリプトはコンテナを検出できず、iframe 内のスクリプトは商品ページを制御できません。

配置可能な要素では、自身のコードで一つの操作を公開するようにします。

js
function setIdealhouseSku(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);
}

ページまたは拡張機能で利用可能な API を通じて、Wix が現在の商品またはバリエーションの完全な情報を返した後にのみ呼び出します。これは利用側のアダプターのコードです。未検証の Wix ページイベントは意図的に指定していません。

Wix アプリ: Wix Editor Stores 向けの埋め込みスクリプト#

Wix Stores は埋め込みスクリプト拡張用に details-placeholder と bottom-placeholder の配置箇所を提供しています。いずれかのプレースホルダーにホスト要素を追加します。他のアプリも共有できるため、中身を置き換えないでください。SDK スクリプトを別の埋め込み断片として設定するか、正確な src、data-shop-id、data-publishable-key 属性でプログラムから作成します。

CLI で作成した埋め込みスクリプトから利用できる Wix の Site API は、ストアのコンテキストを読み取れます。Wix の対応する Stores API で現在のバリエーションの SKU を確定し、自身の setIdealhouseSku() の橋渡し処理を呼び出します。完全な SKU が得られるまではプレースホルダーを空にしておきます。

Wix Studio: サイトプラグイン#

公開されている商品ページのスロットを対象とする Wix Stores サイトプラグインを作成します。プラグインの UI からコンテナを描画し、Wix が描画するサイトのドキュメント内で SDK を読み込みます。プラグインは、確定した現在のバリエーションの SKU を DOM コンテナに渡す必要があります。Wix Studio のスロット名やコンポーネントのインターフェースは変わる場合があります。このガイドから名前をコピーせず、拡張機能を生成する際に現在の CLI/API リファレンスから選択してください。

分離された iframe 内にコントロールを描画するプラグインスロットは使用しないでください。SDK とビューアーは、その境界をまたぐ動作が検証されていません。ストアのドキュメント内にコンテナを配置する Wix の拡張ポイントを選ぶか、自身でドキュメントを管理できるヘッドレスストアを使用します。

商品の対応付けと画面遷移#

Wix の商品またはバリエーションの sku を、ideal.house の sku に対応付けます。Wix の商品 ID に暗黙に切り替えないでください。生成された ID は、意図的にインポートした場合を除き、カタログの SKU と一致しません。

Wix の商品ページでは、選択肢の変更やクライアント側の画面遷移で内容が置き換わる場合があります。公開された商品または選択肢のコールバックごとに、次を行います。

  1. 以前に描画したコンテナを消去する
  2. 選択中の完全なバリエーションを確定する
  3. その SKU を持つ新しいコンテナを挿入する
  4. 完全な、または可視化可能な SKU が存在しない場合はホスト要素を空にしておく

ギャラリーとリピーターでは、各項目に独自の項目単位の SKU が必要です。クイックビューとモーダルの商品にも、モーダルのスロット内で同じライフサイクルの橋渡し処理が必要です。

商品のインポート#

Wix Stores は ideal.house と自動同期しません。Wix の商品とバリエーションのフィールドをエクスポートし、使用する各 Wix の SKU を sku に設定して、商品アップロードを使用します。商品インポート、ジョブの状態、商品一覧、商品更新、商品削除、エラーと再試行を参照してください。

Wix から ideal.house への自動同期、アプリのインストールフロー、Wix の Webhook 処理は利用側で実装します。このガイドはそれらの提供を保証していません。

公開前の検証#

  1. デスクトップとモバイルのプライベートブラウジングのウィンドウで、公開サイトをテストします。
  2. コンテナと同じドキュメント内で SDK が一度だけ読み込まれることを確認します。
  3. DOM の商品コードをインポートした SKU と正確に比較します。
  4. 最終的なバリエーションが選択されるまで各選択肢を変更し、古いコンテナが削除されて新しいものが表示されることを確認します。
  5. Wix のクライアント側画面遷移、商品ギャラリーとリピーターのページ、クイックビュー、ブラウザーの戻る・進む、同意設定、会員モードとログアウト状態を確認します。
  6. 不明または空の SKU で、動作しない可視化コントロールが残らないことを確認します。
  7. アプリでは、対応範囲に応じて別々の Wix Editor と Studio のテストサイトで、インストール、有効化、無効化、アンインストールをテストします。

連携の削除#

Wix のカスタムコード項目を削除または無効化し、商品ページの要素を削除します。アプリでは、埋め込みスクリプトまたはサイトプラグイン拡張を削除し、テストサイトからアンインストールします。公開後、スクリプトのリクエストとすべての data-idealhouse-* ノードがなくなったことを確認します。

プラットフォームの公式リファレンス#