支援的回調
| 回調 | 當它著火時 | 關鍵負載 |
|---|---|---|
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。
驗收檢查
- 成功的購物車操作會添加預期的產品、型號和數量。
- 失敗的請求會通知購物者並清除載入狀態。
- 重複點擊不會在您自己的處理程序中建立意外的重複突變。
- 分析僅包含事件元數據,不含客戶圖像、令牌或不必要的個人數據。