웹 SDK 통합
사용 @spreeai/web-sdk 맞춤형 또는 헤드리스 웹 스토어프론트의 경우.
이 예시들은 게시된 내용을 대상으로 합니다. 버전 3.0.0 패키지. 전화 init() 한 번만 사용하고 무효화 가능한 결과를 보호합니다. 파트너는 다음으로부터 해결됩니다. clientId통과하지 마세요 partnerId v3으로 init()기존 v2 통합 기능은 버전을 변경하기 전에 공식 업그레이드 가이드를 따라야 합니다.
설치하다
npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0
설치된 SDK 버전에 대한 문서화된 SDK 스타일시트를 포함하세요.
초기화 및 렌더링
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";
// Add <div id="spreeai-try-on"></div> to the product page first.
const sdk = await init({ clientId: "your-client-id" });
if (sdk) {
await sdk.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
enableAddToCart: true,
});
}
init() 보고 null 인증 실패 시 모든 렌더링 호출을 보호합니다.
사이즈
v3.0.0에서는 사이즈 선택 기능을 별도의 메뉴가 아닌, 가상 착용 화면 내에서 바로 확인할 수 있도록 개선했습니다. sdk.renderSizingButton() 방법. 사이즈 데이터가 승인된 의류의 경우, '착용해보기' 버튼을 눌러 해당 기능을 활성화하세요.
await sdk?.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
enableSizingRecommendation: true,
});
의류 데이터와 파트너 구성이 완료된 후에만 사이즈 조정 기능을 활성화하십시오.
이벤트
공개 SDK 문서에는 '착용해보기' 버튼 및 '장바구니에 담기' 작업에 대한 클라이언트 측 콜백 함수가 포함되어 있습니다. 콜백 함수를 스토어프론트의 기존 분석 및 장바구니 레이어에 연결하세요. 분석 페이로드에 고객 이미지, 계정 정보 또는 불필요한 개인 데이터를 포함하지 마세요.
제작 지침
- 페이지당 한 번씩 초기화합니다.
- 적합한 의류에 대해서만 렌더링합니다.
- 안정적인 카탈로그 식별자를 전달하세요.
- 클라이언트 비밀 정보는 브라우저 코드에 포함시키지 마세요.
- 단일 페이지 애플리케이션에서 테스트 변형 변경 및 경로 전환을 테스트합니다.
- 진입점에 키보드 포커스와 접근성 있는 레이블을 유지합니다.
- 로딩, 오류 및 사용 불가 상태를 검증합니다.
- 통합 기능을 활성화하기 전후의 제품 페이지 성능을 모니터링하세요.