Hướng dẫn nhanh về Web SDK

Trước khi bạn bắt đầu

• A clientId do SPREEAI phát hành cho môi trường được phê duyệt của bạn.
• Một sản phẩm may mặc đã hoàn tất quá trình nhập, thuộc về tài khoản của bạn và có sẵn để mặc thử.
• Trang sản phẩm bạn có thể chỉnh sửa và vùng chứa có ID HTML duy nhất.

1. Cài đặt

npm install @spreeai/web-sdk@3.0.0

Biểu định kiểu là một phần của gói và phải được bao gồm trong gói của bạn.

2. Thêm vùng chứa

<div id="spreeai-try-on"></div>

3. Khởi tạo và kết xuất

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() có thể trở lại null. Kiểm tra kết quả trước khi hiển thị và khởi tạo một lần trên mỗi trang thay vì cho mỗi nút.

4. Kiểm tra kết quả

1. Tải trang sản phẩm. Một bộ quần áo hợp lệ, có sẵn sẽ có nút thử.
2. Mở phòng thử đồ và xác nhận loại quần áo cũng như màu sắc dự định.
3. Đóng và mở lại nó. Kiểm tra trải nghiệm trên điện thoại và máy tính để bàn.
4. Hãy thử một loại quần áo không có sẵn trong môi trường thử nghiệm của bạn. Xác nhận sản phẩm bình thường của bạn và đường dẫn thanh toán vẫn có thể sử dụng được.

Đi đâu tiếp theo