サポートされているコールバック
| コールバック | 発火したら | キーペイロード |
|---|---|---|
onTryOnButtonClick | ダイアログが開く前にボタンをクリックしたとき。 | name |
onAddToCartClicked | エクスペリエンスがカートに追加メッセージを投稿するとき。まずカートに追加を有効にしてください。 | name, garments, setIsLoading, closePopUp, onError |
カートリクエストを処理する
TypeScript
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";
const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
await sdk.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
enableAddToCart: true,
events: {
onTryOnButtonClick: ({ name }) => {
// Forward this non-sensitive event to your analytics layer.
console.info(name);
},
onAddToCartClicked: async ({
garments, setIsLoading, closePopUp, onError,
}) => {
setIsLoading(true);
try {
// Implement this endpoint in YOUR storefront backend.
// Validate and map these garment IDs to your own cart variants.
const response = await fetch("/api/cart/from-spreeai", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ garments }),
});
if (!response.ok) throw new Error("Cart request failed");
closePopUp();
} catch {
onError("Could not add to bag. Please try again.");
} finally {
setIsLoading(false);
}
},
},
});
}正しい行動を測定する
ボタンクリックのコールバックは、試着を開始する意図を測定します。試着が完了したこと、または購入が行われたことを証明するものではありません。承認された分析統合を下流の結果に使用します。公開された API にない完了コールバックやサーバー Webhook を作成しないでください。
受け入れチェック
- カート操作が成功すると、目的の製品、バリエーション、数量が追加されます。
- リクエストが失敗すると、買い物客に情報が提供され、読み込み状態がクリアされます。
- 重複クリックによって、独自のハンドラーに意図しない重複ミューテーションが作成されることはありません。
- 分析にはイベントのメタデータのみが含まれ、顧客の画像、トークン、不要な個人データは含まれません。