시작하기 전에
- A
clientId귀하의 승인된 환경을 위해 SPREEAI에서 발행되었습니다. - 섭취가 완료된 의류는 귀하의 계정에 귀속되며 입어볼 수 있습니다.
- 편집할 수 있는 제품 페이지와 고유한 HTML ID가 있는 컨테이너입니다.
1. 설치
터미널
npm install @spreeai/web-sdk@3.0.0스타일시트는 패키지의 일부이며 번들에 포함되어야 합니다.
2. 컨테이너 추가
HTML
<div id="spreeai-try-on"></div>3. 초기화 및 렌더링
TypeScript
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";
// Add <div id="spreeai-try-on"></div> to your product page.
const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
await sdk.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
});
} else {
// Keep the normal product and purchase journey available.
console.warn("SPREEAI could not initialize.");
}init() 돌아올 수 있다 null. 렌더링하기 전에 결과를 확인하고 각 버튼이 아닌 페이지당 한 번 초기화하십시오.
4. 결과 확인
- 제품 페이지를 로드합니다. 유효하고 사용 가능한 의류는 입어보기 버튼을 렌더링합니다.
- 피팅룸을 열고 원하는 의상과 색상을 확인하세요.
- 닫았다가 다시 엽니다. 휴대폰과 데스크톱에서 경험을 확인하세요.
- 테스트 환경에서 사용할 수 없는 의류를 사용해 보세요. 정상적인 제품을 확인하고 결제 경로를 계속 사용할 수 있는지 확인하세요.