Mga suportadong callback
| Callback | Kapag ito ay nagpaputok | Mahalagang data na ipinapasa |
|---|---|---|
onTryOnButtonClick | Sa pag-click sa pindutan, bago magbukas ang dialog. | name |
onAddToCartClicked | Kapag nag-post ang karanasan ng isang add-to-cart na mensahe; paganahin muna ang add-to-cart. | name, garments, setIsLoading, closePopUp, onError |
Pangasiwaan ang isang kahilingan sa cart
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);
}
},
},
});
}Sukatin ang tamang aksyon
Ang isang button-click callback ay sumusukat sa layunin na buksan ang try-on; hindi ito patunay na nakumpleto ang isang try-on o may naganap na pagbili. Gamitin ang iyong naaprubahang pagsasama ng analytics para sa mga downstream na resulta. Huwag mag-imbento ng mga callback sa pagkumpleto o webhook ng server na wala sa na-publish na API.
Mga tseke sa pagtanggap
- Ang matagumpay na pagpapatakbo ng cart ay nagdaragdag ng nilalayong produkto, variant at dami.
- Ang isang nabigong kahilingan ay nagpapanatili ng kaalaman sa mamimili at nililimas ang estado ng paglo-load.
- Ang mga duplicate na pag-click ay hindi gumagawa ng hindi sinasadyang mga duplicate na mutations sa sarili mong handler.
- Naglalaman lang ang Analytics ng metadata ng kaganapan, nang walang mga larawan ng customer, mga token, o hindi kinakailangang personal na data.