룩과 의상 만들기 | SDK 2.0

Shopify: 쇼핑객이 직접 제작한 룩

룩 구축은 Virtual Try-On에서 시작되고 이에 따라 달라집니다. 기능 설정에서 켜고 활성화하세요. 쇼 룩 구축 피팅룸 블록에 있습니다. 테마를 저장하고 상점 첫화면을 다시 로드하세요.

Shopify: 상인이 제작한 의상

의상 탭은 Ready 상의와 Ready 하의를 페어링하기 위한 별도의 베타 작업 흐름입니다. 변형을 선택하고 의상 이름을 지정하고 제작하세요. 의상을 만들어도 실시간으로 적용되지는 않습니다. 별도로 활성화하세요. 기본 제품을 비활성화하면 의상도 비활성화됩니다.

Web SDK: 기존 의상 요청

ID가 있는 컨테이너 추가 spreeai-look. 선택적인 변형이 포함된 여러 의류 항목을 전달하여 선택한 제품이 포함된 사용 가능한 의상을 요청하세요.

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-look",
    garments: [
      { garmentId: "TOP_GARMENT_ID", variant: { color: "blue" } },
      { garmentId: "BOTTOM_GARMENT_ID", variant: { color: "indigo" } },
    ],
  });
}

결과 확인

요청한 모든 의류와 고정된 변형이 사용 가능한 의상에 속하는지 확인하세요.
의상 단추와 개봉 후 표시된 의류를 확인하세요.
일치하지 않는 폴백을 테스트하고 첫 번째 의류가 적절한지 확인합니다.
카트 통합을 별도로 테스트하세요. Shopify의 가방에 룩 추가 옵션은 룩의 모든 항목이 아닌 현재 제품을 추가합니다.

소스 참조