SHOPLINE 連携#

テーマアプリ拡張または管理された独自テーマのブロックを使い、SHOPLINE のオンラインストアに Room Visualizer を連携させます。

検証状況: 2026年9月7日に SHOPLINE Online Store 2.x/3.0 のテーマのドキュメントを確認しました。パートナーアプリやマーチャントのテストストアは利用できませんでした。テンプレートの構文と対応する拡張機能の種類は Online Store の世代で異なるため、実際のストアのバージョンで検証してください。

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

連携箇所の選択#

Online Store 2.0/2.1 の再利用可能な公開アプリでは、SHOPLINE はアプリブロックと必要に応じたアプリ埋め込みブロックを持つテーマアプリ拡張を推奨しています。
Online Store 3.0 のテーマでは、任意の JavaScript アセットとアプリブロックを含む再利用可能なブロックが提供されています。
Script Tag/Asset APIs は旧方式、またはバージョンとアプリの種類に依存する方式です。SHOPLINE の互換性表を確認せずに選択しないでください。
一つのストア向けのテーマカスタマイズでは、使用中のバージョンのブロック、テンプレート、アセットの構造を使用します。

開発用ストア、拡張機能またはテーマへのアクセス、Shop ID、Publishable Key、インポート済みのバリエーションコードを用意します。

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>

商品コードは、ideal.house カタログの sku と一致する必要があります。このドキュメントは、インストール可能な ideal.house の SHOPLINE アプリが存在すると述べているものではありません。

テーマブロックの作成#

商品詳細ページにホスト要素を描画するアプリブロックまたは公開テーマブロックを作成します。使用中の Online Store の世代で定義された正確な商品またはバリエーションのオブジェクトとエスケープ用ヘルパーを使用します。最終的なオンラインストアの HTML は次の形式にする必要があります。

html

<div class="idealhouse-host">
  <div data-idealhouse-button-container data-product-code="CHAIR-OAK-01"></div>
</div>

テンプレートのソースで、CHAIR-OAK-01 を現在選択中のバリエーションの SKU またはコードを取得する式に置き換えます。SHOPLINE 3.0 の Handlebars テンプレートに Shopify の Liquid 式を貼り付けないでください。言語とオブジェクトの仕様が異なります。

アプリブロックはテーマエディターの商品セクションに追加します。アプリ埋め込みでは、画面上に UI を表示せず、SDK をサイト全体に読み込みます。アプリブロックは通常、インストール後にマーチャントが有効化して配置する必要があります。

SDK を一度だけ読み込む#

拡張機能またはテーマの JavaScript アセットで、二つの公開設定を指定してからスクリプトを追加します。

if (!document.querySelector('script[src="https://sdk.ideal.house/sdk.js"]')) {
  const script = document.createElement('script');
  script.src = 'https://sdk.ideal.house/sdk.js';
  script.async = true;
  script.dataset.shopId = '<SHOP_ID>';
  script.dataset.publishableKey = '<PUBLISHABLE_KEY>';
  document.head.append(script);
}

複数のマーチャントの認証情報には、拡張機能の設定または動的パラメーターを使用します。Publishable Key のみを公開し、アプリのシークレットはサーバー側で保管してください。

選択中のバリエーションと動的セクション#

使用中のテーマで公開されている商品選択コールバックを、利用側のアダプターに接続します。

function setIdealhouseVariant(host, sku) {
  host.replaceChildren();
  const code = String(sku || '').trim();
  if (!code) return;
  const container = document.createElement('div');
  container.dataset.idealhouseButtonContainer = '';
  container.dataset.productCode = code;
  host.append(container);
}

SHOPLINE のテーマはカスタマイズできるため、このガイドでは共通のストア向けバリエーションイベントを仮定しません。Online Store 3.0 ではテーマエディターのセクションとブロックのイベントが公開されていますが、これらはエディターのライフサイクルイベントであり、購入者のバリエーション選択イベントではありません。

セクション、フィルター、ページ分割、クイックビュー、テーマエディターのプレビューで商品ノードが再描画される場合は、新しいコンテナを作成します。テーマエディターでブロックがアンロードされるときにリスナーを削除します。商品カードのボタンには項目単位の SKU が必要です。最終的なバリエーションが不明な場合はコントロールを表示しません。

商品のインポート#

SHOPLINE の商品とバリエーションのデータをエクスポートし、ストアで選択したコードを ideal.house の sku に対応付けます。商品アップロードと、承認されたインポート、ジョブの状態、一覧取得、更新、削除、再試行処理のガイドを使用します。

SHOPLINE の管理用 API 同期、Webhook、アプリの OAuth、アプリストアでの配布は、利用側のアダプターで対応します。

検証と削除#

インストールとマーチャントによるブロックの有効化、シンプル商品、各バリエーション、欠落または不明なコード、カード、クイックビュー、フィルター、SPA 形式の画面遷移、モバイル、同意管理、テーマエディターのプレビュー、対応する各 Online Store バージョンをテストします。SDK のリクエストが一回で、コードと SKU の対応が正確であることを確認します。

削除するには、アプリブロックまたは埋め込みを無効にして拡張機能をアンインストールするか、独自ブロックとアセットを削除します。削除後のテーマを公開してキャッシュを消去し、SDK の URL や data-idealhouse-* のマークアップが残っていないことを確認します。