Быстрый старт Web 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. Попробуйте недоступную одежду в тестовой среде. Подтвердите свой обычный продукт, и путь оформления заказа останется доступным.

Куда идти дальше