Tích hợp Web SDK

Sử dụng @spreeai/web-sdk Dành cho cửa hàng trực tuyến tùy chỉnh hoặc không có giao diện người dùng.

Những ví dụ này nhắm đến các ấn phẩm đã được xuất bản. v3.0.0 gói hàng. Gọi init() một lần và bảo vệ kết quả có thể vô hiệu của nó. Đối tác được giải quyết từ clientId; đừng đi qua partnerId đến v3 init()Các tích hợp v2 hiện có nên tuân theo hướng dẫn nâng cấp chính thức trước khi thay đổi phiên bản.

Cài đặt

npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0

Bao gồm cả tệp định kiểu SDK được ghi lại cho phiên bản SDK đã cài đặt.

Khởi tạo và hiển thị

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() trả lại null Khi quá trình xác thực thất bại. Bảo vệ tất cả các lệnh gọi render.

Kích thước

Phiên bản 3.0.0 tích hợp tùy chọn kích cỡ ngay trong quá trình thử đồ, thay vì hiển thị riêng biệt. sdk.renderSizingButton() phương pháp. Đối với trang phục có dữ liệu kích thước đã được phê duyệt, hãy kích hoạt quy trình đó trên nút thử đồ:

await sdk?.renderTryOnButton({
  elementId: "spreeai-try-on",
  garments: [{ garmentId: "your-garment-id" }],
  enableSizingRecommendation: true,
});

Chỉ kích hoạt tính năng điều chỉnh kích thước sau khi dữ liệu về trang phục và cấu hình đối tác đã sẵn sàng.

Sự kiện

Tài liệu SDK công khai mô tả các hàm gọi lại phía máy khách cho nút "Thử đồ" và hành động "Thêm vào giỏ hàng". Kết nối các hàm gọi lại với các lớp phân tích và giỏ hàng hiện có của cửa hàng trực tuyến. Không đặt hình ảnh khách hàng, thông tin đăng nhập hoặc dữ liệu cá nhân không cần thiết vào dữ liệu phân tích.

Hướng dẫn sản xuất

Khởi tạo một lần cho mỗi trang.
Chỉ hiển thị các sản phẩm may mặc đủ điều kiện.
Truyền các mã định danh danh mục ổn định.
Hãy giữ bí mật thông tin khách hàng riêng tư, không đưa vào mã trình duyệt.
Kiểm tra các thay đổi biến thể và chuyển đổi tuyến đường trong các ứng dụng một trang.
Giữ nguyên tiêu điểm bàn phím và nhãn dễ truy cập cho điểm vào.
Xác thực các trạng thái đang tải, lỗi và không khả dụng.
Theo dõi hiệu suất trang sản phẩm trước và sau khi kích hoạt tích hợp.