문서

SDK 2.0 · 통합

장바구니 및 이벤트

문서화된 두 개의 콜백을 매장 및 분석에 연결합니다.

지원되는 콜백

콜백불이 붙을 때키 페이로드
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);
        }
      },
    },
  });
}

올바른 행동 측정

버튼 클릭 콜백은 입어볼 의도를 측정합니다. 이는 시착 완료 또는 구매가 이루어졌다는 증거가 되지 않습니다. 다운스트림 결과에 대해 승인된 분석 통합을 사용하십시오. 게시된 API에 없는 완료 콜백이나 서버 웹후크를 만들어내지 마세요.

승인 확인

  • 성공적인 카트 작업은 원하는 제품, 변형 및 수량을 추가합니다.
  • 실패한 요청은 구매자에게 계속 정보를 제공하고 로드 상태를 지웁니다.
  • 중복 클릭은 자체 핸들러에서 의도하지 않은 중복 변형을 생성하지 않습니다.
  • 분석에는 고객 이미지, 토큰 또는 불필요한 개인 데이터 없이 이벤트 메타데이터만 포함됩니다.
소스 참조

페이지 제목과 내용을 검색하세요. Escape는 검색을 닫습니다.

언어를 선택하세요.