Awọn ipe ti o ṣe atilẹyin
| Ipepada | Nigbati o ba ina | Isanwo bọtini |
|---|---|---|
onTryOnButtonClick | Lori bọtini tẹ, ṣaaju ki ibaraẹnisọrọ to ṣii. | name |
onAddToCartClicked | Nigbati iriri naa ba firanṣẹ ifiranṣẹ afikun-si-ẹru; jeki fi-to-fun rira akọkọ. | name, garments, setIsLoading, closePopUp, onError |
Mu ibeere fun rira kan
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);
}
},
},
});
}Ṣe iwọn iṣe ti o tọ
Bọtini-tẹ-ipe pada ṣe iwọn idi lati ṣii igbiyanju-lori; kii ṣe ẹri pe igbiyanju-lori ti pari tabi rira kan waye. Lo iṣọpọ atupale ti a fọwọsi fun awọn abajade isale. Ma ṣe ṣẹda awọn idapada ipari tabi awọn iwo wẹẹbu olupin ti ko si ni API ti a tẹjade.
Awọn sọwedowo gbigba
- Aṣeyọri fun rira n ṣe afikun ọja ti a pinnu, iyatọ ati opoiye.
- Ibere ti o kuna n jẹ ki olutaja naa sọ fun ati sọ ipo ikojọpọ kuro.
- Awọn titẹ pidánpidán ko ṣẹda awọn iyipada ẹda airotẹlẹ ninu oluṣakoso tirẹ.
- Awọn atupale ni metadata iṣẹlẹ nikan ni, laisi awọn aworan onibara, awọn ami tabi data ti ara ẹni ti ko wulo.