SDK クイックスタート#

カタログ全体に展開する前に、準備済みの商品を一つ使ってオンラインストアに商品可視化の入り口を追加します。

1. ストアと商品の準備#

ダッシュボードでストアを選択し、その Shop ID と Publishable Key を取得します。ダッシュボード → 設定を開き、Allowed Origins (CORS) にオンラインストアのオリジンを追加して保存をクリックします。可視化の準備ができた商品が少なくとも一つあることを確認してください。バックエンドからインポートする場合は、Product Import API の説明に従い、ジョブの最終結果を確認します。

2. プラットフォーム別ガイドの選択#

Liquid テーマには Shopify、WooCommerce のオンラインストアには WooCommerce、独自サイトには独自オンラインストアのガイドを使用します。その他のプラットフォーム別ガイドは SDK の概要に掲載しています。

3. SDK を一度だけ読み込む#

独自オンラインストアの場合、このスクリプトを埋め込み先のページで一度だけ読み込みます。両方のプレースホルダーを同じストアの値で置き換えてください。

html

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

4. 一致する対象要素の描画#

準備済みカタログの正確な商品コードを使用します。この例では、商品の検証後に SDK がボタンを生成するよう指定しています。

html

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

対象要素があるだけでは、商品が利用条件を満たしているとは限りません。選択中のバリエーション、商品の準備状況、識別子の対応付けを確認してください。

5. 顧客の操作の流れをテストする#

sdk.js が正常に読み込まれ、正しいボタンが表示され、クリックすると意図した商品で Viewer が開くことを確認します。バリエーションの変更、別の商品への移動、モバイルでの操作も確認してください。公開前に公開前チェックリストを完了します。