समर्थित कॉलबैक
| कॉलबैक | जब आग लगती है | कुंजी पेलोड |
|---|---|---|
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);
}
},
},
});
}सही कार्रवाई को मापें
एक बटन-क्लिक कॉलबैक प्रयास को खोलने के इरादे को मापता है; यह इस बात का प्रमाण नहीं है कि प्रयास पूरा हो गया या खरीदारी हो गई। डाउनस्ट्रीम परिणामों के लिए अपने अनुमोदित एनालिटिक्स एकीकरण का उपयोग करें। पूर्ण कॉलबैक या सर्वर वेबहुक का आविष्कार न करें जो प्रकाशित एपीआई से अनुपस्थित हैं।
स्वीकृति जांच
- एक सफल कार्ट संचालन इच्छित उत्पाद, प्रकार और मात्रा जोड़ता है।
- एक असफल अनुरोध खरीदार को सूचित रखता है और लोडिंग स्थिति को साफ़ करता है।
- डुप्लिकेट क्लिक आपके अपने हैंडलर में अनपेक्षित डुप्लिकेट म्यूटेशन नहीं बनाते हैं।
- एनालिटिक्स में ग्राहक छवियों, टोकन या अनावश्यक व्यक्तिगत डेटा के बिना, केवल ईवेंट मेटाडेटा होता है।