Integracja z Web SDK

Używać @spreeai/web-sdk dla niestandardowego lub bezinterfejsowego sklepu internetowego.

Te przykłady dotyczą opublikowanych wersja 3.0.0 pakiet. Zadzwoń init() raz i strzeż jego wyniku, który może być nullem. Partner jest rozstrzygany od clientId; nie przechodź partnerId do v3 init()W przypadku istniejących integracji v2 należy postępować zgodnie z oficjalnym przewodnikiem aktualizacji przed zmianą wersji.

Zainstalować

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

Dołącz arkusz stylów SDK udokumentowany dla zainstalowanej wersji SDK.

Zainicjuj i wyrenderuj

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() zwroty null gdy uwierzytelnianie się nie powiedzie. Zabezpiecz wszystkie wywołania renderowania.

Rozmiarowanie

Wersja 3.0.0 udostępnia informacje o rozmiarach w ramach przymierzania, a nie osobno sdk.renderSizingButton() W przypadku odzieży z zatwierdzonymi danymi dotyczącymi rozmiarów, włącz tę opcję w przycisku przymierzania:

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

Włącz funkcję zmiany rozmiarów dopiero po przygotowaniu danych dotyczących odzieży i konfiguracji partnera.

Wydarzenia

Publiczny zestaw SDK dokumentuje wywołania zwrotne po stronie klienta dla przycisku Try-On i akcji dodawania do koszyka. Połącz wywołania zwrotne z istniejącymi warstwami analitycznymi i koszyka w witrynie sklepowej. Nie umieszczaj zdjęć klientów, danych uwierzytelniających ani zbędnych danych osobowych w ładunkach analitycznych.

Wskazówki dotyczące produkcji

Inicjuj raz na stronę.
Renderuj tylko wybrane ubrania.
Przekaż identyfikatory katalogu stabilnego.
Nie udostępniaj poufnych informacji klientom w kodzie przeglądarki.
Testuj zmiany wariantów i przejścia tras w aplikacjach jednostronicowych.
Zachowaj fokus klawiatury i dostępną etykietę punktu wejścia.
Sprawdź stany ładowania, awarii i niedostępności.
Monitoruj wydajność strony produktu przed i po włączeniu integracji.