Інтеграція веб-SDK

Використання @spreeai/web-sdk для власної або безголової веб-вітрини.

Ці приклади спрямовані на опубліковані версія 3.0.0 пакет. Зателефонуйте init() один раз і захистити його нульовий результат. Партнер вирішується з 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 документує зворотні виклики на стороні клієнта для кнопки «Спробувати» та дій додавання до кошика. Підключіть зворотні виклики до існуючих шарів аналітики та кошика магазину. Не розміщуйте зображення клієнтів, облікові дані чи непотрібні персональні дані в аналітичних даних.

Керівництво з виробництва

Ініціалізувати один раз на кожну сторінку.
Рендерити лише для відповідних предметів одягу.
Передавати стабільні ідентифікатори каталогу.
Не допускайте внесення секретних даних клієнта до коду браузера.
Тестування змін варіантів та переходів маршрутів в односторінкових застосунках.
Зберегти фокус клавіатури та спеціальну підпис для точки входу.
Перевірити стани завантаження, збою та недоступності.
Відстежуйте ефективність сторінки продукту до та після ввімкнення інтеграції.