รองรับการโทรกลับ
| โทรกลับ | เมื่อมันเกิดไฟไหม้ | น้ําหนักบรรทุกที่สําคัญ |
|---|---|---|
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);
}
},
},
});
}วัดการกระทําที่ถูกต้อง
การโทรกลับด้วยการคลิกปุ่มจะวัดความตั้งใจที่จะเปิดการทดลอง ไม่ใช่ข้อพิสูจน์ว่าการลองใช้งานเสร็จสมบูรณ์หรือการซื้อเกิดขึ้น ใช้การผสานรวมการวิเคราะห์ที่ได้รับอนุมัติของคุณสําหรับผลลัพธ์ขั้นปลาย อย่าสร้างการเรียกกลับที่สมบูรณ์หรือ webhook ของเซิร์ฟเวอร์ที่ไม่มีอยู่ใน API ที่เผยแพร่
การตรวจสอบการยอมรับ
- การดําเนินการรถเข็นที่ประสบความสําเร็จจะเพิ่มผลิตภัณฑ์ ตัวเลือกสินค้า และปริมาณที่ต้องการ
- คําขอที่ล้มเหลวจะแจ้งให้ผู้ซื้อทราบและล้างสถานะการโหลด
- การคลิกที่ซ้ํากันจะไม่ทําให้เกิดการเปลี่ยนแปลงซ้ําโดยไม่ได้ตั้งใจในตัวจัดการของคุณเอง
- การวิเคราะห์มีเฉพาะข้อมูลเมตาของเหตุการณ์ โดยไม่มีรูปภาพลูกค้า โทเค็น หรือข้อมูลส่วนบุคคลที่ไม่จําเป็น