Web SDK統合
使用 @spreeai/web-sdk カスタムまたはヘッドレスWebストアフロント向け。
これらの例は、公開されている v3.0.0 パッケージ。呼び出し init() 一度だけ、そのヌル可能な結果をガードします。パートナーは、 clientId;通らないでください partnerId v3へ init()。既存の v2 統合は、バージョンを変更する前に公式アップグレード ガイドに従う必要があります。
インストール
npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0
インストールされている SDK バージョンについて文書化された SDK スタイルシートを含めます。
初期化してレンダリングする
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";
// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });
if (sdk) {
await sdk.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
enableAddToCart: true,
});
}
init() リターン null 認証が失敗した場合。すべてのレンダリング呼び出しを保護する。
サイズ
v3.0.0では、サイズ調整が別画面ではなく、試着体験の中に表示されるようになりました。 sdk.renderSizingButton() 方法。承認済みのサイズデータを持つ衣類の場合、試着ボタンでそのフローを有効にします。
await sdk?.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
enableSizingRecommendation: true,
});
サイズ設定は、衣類データとパートナー構成の準備ができた後にのみ有効にします。
イベント
公開されているSDKには、試着ボタンとカート追加アクションのクライアント側コールバックに関するドキュメントがあります。これらのコールバックを、ストアフロントの既存の分析レイヤーとカートレイヤーに接続してください。分析ペイロードには、顧客の画像、認証情報、または不要な個人データを含めないでください。
制作指導
- ページごとに 1 回初期化します。
- 対象となる衣服のみをレンダリングします。
- 安定したカタログ識別子を渡します。
- クライアント シークレットをブラウザ コードに含めないでください。
- シングルページアプリケーションにおけるバリアントの変更とルート遷移をテストする。
- キーボードのフォーカスとエントリ ポイントのアクセス可能なラベルを保持します。
- 読み込み状態、エラー状態、および利用不可状態を検証します。
- 統合を有効にする前と後の製品ページのパフォーマンスを監視します。