Retornos de chamada suportados
| Retorno de chamada | Quando dispara | Carga principal |
|---|---|---|
onTryOnButtonClick | Ao clicar no botão, antes que a caixa de diálogo seja aberta. | name |
onAddToCartClicked | Quando a experiência publica uma mensagem de adição ao carrinho; habilite adicionar ao carrinho primeiro. | name, garments, setIsLoading, closePopUp, onError |
Lidar com uma solicitação de carrinho
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);
}
},
},
});
}Meça a ação certa
Um retorno de chamada de clique de botão mede a intenção de abrir o teste; não é prova de que uma prova foi concluída ou uma compra ocorreu. Use sua integração analítica aprovada para obter resultados posteriores. Não invente retornos de chamada de conclusão ou webhooks de servidor que estejam ausentes da API publicada.
Verificações de aceitação
- Uma operação de carrinho bem-sucedida adiciona o produto, a variante e a quantidade pretendidos.
- Uma solicitação com falha mantém o comprador informado e limpa o estado de carregamento.
- Cliques duplicados não criam mutações duplicadas indesejadas em seu próprio manipulador.
- As análises contêm apenas metadados de eventos, sem imagens de clientes, tokens ou dados pessoais desnecessários.