独自オンラインストアの開発者向け連携#

ideal.house SDK を読み込み、オンラインストアの productCode の値をカタログに対応付けます。

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

1. SDK の読み込み#

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-publishable-key="<PUBLISHABLE_KEY>"
  async
></script>

2. ボタンの実装方式を一つ選ぶ#

方式 A: SDK が生成するボタン#

対象コンテナを描画します。商品の検証後、SDK がコンテナの子要素としてボタンを作成します。

html

<div data-idealhouse-button-container data-product-code="<PRODUCT_CODE>"></div>

方式 B: 独自に作成するボタン#

ボタンの描画とスタイル設定を自身で行います。SDK は DOM を保持し、利用条件の判定とクリック時の動作を紐付けます。

html

<button
  type="button"
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  style="visibility: hidden;"
>
  View in my room
</button>

3. productCode をカタログと一致させる#

<PRODUCT_CODE>

カタログの productCode とオンラインストアの data-product-code は、大文字と小文字を含めて完全に一致する必要があります。
描画のたびに変更可能な名前から productCode を生成し直さないでください。変更が必要な場合は、カタログとオンラインストアを一緒に更新します。

4. 動的ページと選択中の商品への対応#

SDK はページ読み込み後に追加された対象要素を監視します。選択中の商品が変わった場合は、アプリケーション側で対象要素の属性を更新し、古い SDK の状態をリセットする必要があります。

選択変更後の独自ボタンの更新#

const button = document.querySelector('[data-idealhouse-authored-button]')

function selectProduct(product) {
  button.dataset.productCode = product.productCode
  button.dataset.active = 'false'
  button.style.visibility = 'hidden'

  delete button.dataset.rvProductCode
  delete button.dataset.rvProductType
  delete button.dataset.rvProductId
  delete button.dataset.rvProductIds
}

5. 連携の検証#

ネットワークパネルで、sdk.js が HTTP 200 で読み込まれていることを確認します。
対応する対象要素の data-product-code がカタログと完全に一致することを確認します。
利用可能な商品だけに、自動生成ボタンまたは独自ボタンが表示されることを確認します。
商品が動的に変わる場合、顧客がクリックする前に対象要素が更新されることを確認します。
ボタンをクリックすると、選択した商品で ideal.house Viewer が開くことを確認します。

詳細設定#

サーバーで生成する起動トークン#

バックエンドで有効期間の短い起動トークンを発行する場合にこの方式を使用します。Client Secret をブラウザーの JavaScript に含めてはいけません。

html

<script
  src="https://sdk.ideal.house/sdk.js"
  data-shop-id="<SHOP_ID>"
  data-launch-token="<SERVER_GENERATED_LAUNCH_TOKEN>"
  async
></script>

bash

# Run on your server. Never expose CLIENT_SECRET in browser JavaScript.
curl -X POST "<IDEALHOUSE_API_URL>/shops/<SHOP_ID>/sdk-launch-token" \
  -H "Content-Type: application/json" \
  -H "x-client-id: <CLIENT_ID>" \
  -H "x-client-secret: <CLIENT_SECRET>" \
  -d '{"origin":"https://your-store.example"}'

独自の商品サイズ#

対応する要素に幅、高さ、小文字の単位（ft、in、cm のいずれか）を一緒に指定します。SDK はクリック時に最新の値を読み取ります。

html

<button
  data-idealhouse-authored-button
  data-product-code="<PRODUCT_CODE>"
  data-product-width="8"
  data-product-height="10"
  data-product-size-unit="ft"
  style="visibility: hidden;"
>View in my room</button>