Интеграция с Web SDK

Использовать @spreeai/web-sdk для веб-магазина, созданного на заказ или без графического интерфейса.

Эти примеры ориентированы на опубликованные материалы. v3.0.0 пакет. Звонок. init() один раз и защитить его результат, допускающий значение null. Партнер определяется из clientId; не проходи partnerId к версии 3 init(). Существующие интеграции версии 2 должны следовать официальному руководству по обновлению перед изменением версий.

Установить

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

Включите таблицу стилей SDK, соответствующую установленной версии SDK.

Инициализация и отрисовка

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() возвраты null При сбое аутентификации. Защитить все вызовы рендеринга.

Размер

В версии 3.0.0 определение размеров отображается непосредственно в процессе примерки, а не в отдельной функции. sdk.renderSizingButton() метод. Для одежды с утвержденными размерами включите этот процесс при нажатии кнопки «Примерка»:

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

Включайте определение размеров только после того, как будут готовы данные об одежде и конфигурация партнера.

События

В общедоступном SDK описаны обратные вызовы на стороне клиента для кнопки «Примерка» и действий «Добавить в корзину». Свяжите обратные вызовы с существующими уровнями аналитики и корзины магазина. Не размещайте изображения клиентов, учетные данные или ненужные персональные данные в полезных нагрузках аналитики.

Руководство по производству

Инициализация выполняется один раз для каждой страницы.
Отображается только для подходящих предметов одежды.
Передайте стабильные идентификаторы каталога.
Не храните секретные данные клиента в коде браузера.
Протестируйте изменения вариантов и переходы между маршрутами в одностраничных приложениях.
Сохраните фокус клавиатуры и доступную метку для точки входа.
Проверьте состояния загрузки, сбоя и недоступности.
Отслеживайте эффективность страниц товаров до и после включения интеграции.