지원되는 콜백
| 콜백 | 불이 붙을 때 | 키 페이로드 |
|---|---|---|
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에 없는 완료 콜백이나 서버 웹후크를 만들어내지 마세요.
승인 확인
- 성공적인 카트 작업은 원하는 제품, 변형 및 수량을 추가합니다.
- 실패한 요청은 구매자에게 계속 정보를 제공하고 로드 상태를 지웁니다.
- 중복 클릭은 자체 핸들러에서 의도하지 않은 중복 변형을 생성하지 않습니다.
- 분석에는 고객 이미지, 토큰 또는 불필요한 개인 데이터 없이 이벤트 메타데이터만 포함됩니다.