Короткий посібник з веб-SDK

Перш ніж почати

• A clientId виданий SPREEAI для вашого затвердженого середовища.
• Одяг, який уже використано, належить до вашого облікового запису та доступний для примірки.
• Сторінка продукту, яку можна редагувати, і контейнер з унікальним ідентифікатором HTML.

1. Встановити

npm install @spreeai/web-sdk@3.0.0

Таблиця стилів є частиною пакета і має бути включена у ваш пакет.

2. Додайте контейнер

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

3. Ініціалізація та візуалізація

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. Перевірити результат

1. Завантажте сторінку товару. Дійсний, доступний одяг відображає ґудзик для примірки.
2. Відкрийте приміряльну та підтвердьте запланований одяг і колір.
3. Закрийте та знову відкрийте його. Перевірте роботу на телефоні та комп’ютері.
4. Спробуйте недоступний одяг у вашому тестовому середовищі. Переконайтеся, що ваш звичайний продукт і шлях до оплати залишаються придатними для використання.

Куди йти далі