Документація

SDK 2.0 · ІНТЕГРАЦІЯ

Кошик і події

Підключіть два задокументованих зворотних викликів до вітрини та аналітики.

Підтримувані зворотні виклики

Зворотний дзвінокКоли він стріляєКлючове корисне навантаження
onTryOnButtonClickПісля натискання кнопки перед відкриттям діалогового вікна.name
onAddToCartClickedКоли досвід публікує повідомлення про додавання до кошика; спочатку ввімкніть додавання до кошика.name, garments, setIsLoading, closePopUp, onError

Обробка запиту на кошик

TypeScript
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
    enableAddToCart: true,
    events: {
      onTryOnButtonClick: ({ name }) => {
        // Forward this non-sensitive event to your analytics layer.
        console.info(name);
      },
      onAddToCartClicked: async ({
        garments, setIsLoading, closePopUp, onError,
      }) => {
        setIsLoading(true);
        try {
          // Implement this endpoint in YOUR storefront backend.
          // Validate and map these garment IDs to your own cart variants.
          const response = await fetch("/api/cart/from-spreeai", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ garments }),
          });
          if (!response.ok) throw new Error("Cart request failed");
          closePopUp();
        } catch {
          onError("Could not add to bag. Please try again.");
        } finally {
          setIsLoading(false);
        }
      },
    },
  });
}

Виміряйте правильну дію

Зворотний виклик при натисканні кнопки вимірює намір відкрити примірку; це не є доказом завершення примірки або покупки. Використовуйте схвалену інтеграцію аналітики для подальших результатів. Не вигадуйте зворотні виклики завершення або серверні вебхуки, яких немає в опублікованому API.

Приймальні чеки

  • Успішна операція кошика додає запланований продукт, варіант і кількість.
  • Невдалий запит інформує покупця та очищає стан завантаження.
  • Подвійні клацання не створюють ненавмисних повторних мутацій у вашому власному обробнику.
  • Аналітика містить лише метадані подій без зображень клієнтів, токенів або непотрібних особистих даних.
Посилання на джерела

Пошук заголовків і вмісту сторінок. Escape закриває пошук.

Оберіть свою мову.