Rappels pris en charge
| Rappel | Quand il tire | Charge utile clé |
|---|---|---|
onTryOnButtonClick | En cliquant sur le bouton, avant que la boîte de dialogue ne s'ouvre. | name |
onAddToCartClicked | Lorsque l'expérience publie un message d'ajout au panier ; activez d'abord l'ajout au panier. | name, garments, setIsLoading, closePopUp, onError |
Gérer une demande de panier
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);
}
},
},
});
}Mesurer la bonne action
Un rappel par clic sur un bouton mesure l'intention d'ouvrir l'essai ; cela ne constitue pas une preuve qu'un essai a été effectué ou qu'un achat a eu lieu. Utilisez votre intégration analytique approuvée pour les résultats en aval. N'inventez pas de rappels d'achèvement ou de webhooks de serveur absents de l'API publiée.
Contrôles d'acceptation
- Une opération de panier réussie ajoute le produit, la variante et la quantité prévus.
- Une demande ayant échoué tient l'acheteur informé et efface l'état de chargement.
- Les clics en double ne créent pas de mutations en double involontaires dans votre propre gestionnaire.
- Les analyses contiennent uniquement des métadonnées d'événement, sans images de clients, jetons ou données personnelles inutiles.