Web SDK-integration

Bruge @spreeai/web-sdk til en brugerdefineret eller headless webbutik.

Disse eksempler er rettet mod de offentliggjorte v3.0.0 pakke. Ring init() én gang og beskytte dets nulbare resultat. Partneren er løst fra clientId; ikke bestå partnerId til v3 init()Eksisterende v2-integrationer bør følge den officielle opgraderingsvejledning, før de ændrer versioner.

Installere

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

Inkluder SDK-stylarket, der er dokumenteret for den installerede SDK-version.

Initialiser og render

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() returneringer null når godkendelse mislykkes. Beskyt alle gengivelseskald.

Størrelsesstørrelse

v3.0.0 viser størrelsesindstillinger i prøveoplevelsen i stedet for en separat sdk.renderSizingButton() metode. For et beklædningsgenstand med godkendte størrelsesdata skal du aktivere denne proces på prøveknappen:

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

Aktiver først størrelsesindstilling, når beklædningsdataene og partnerkonfigurationen er klar.

Begivenheder

Det offentlige SDK dokumenterer klientside-tilbagekald for knappen "Try-On" og handlinger "Læg i kurv". Forbind tilbagekald til butikkens eksisterende analyse- og indkøbskurvslag. Placer ikke kundebilleder, legitimationsoplysninger eller unødvendige personlige data i analysedata.

Produktionsvejledning

Initialiser én gang pr. side.
Render kun for berettiget beklædningsgenstand.
Videregiv stabile katalogidentifikatorer.
Hold klienthemmeligheder ude af browserkode.
Test variantændringer og ruteovergange i enkeltsidede applikationer.
Bevar tastaturfokus og en tilgængelig etiket for indgangspunktet.
Valider indlæsnings-, fejl- og utilgængelige tilstande.
Overvåg produktsidens ydeevne før og efter aktivering af integrationen.