Web SDK-integrasjon

Bruk @spreeai/web-sdk for en tilpasset eller headless nettbutikk.

Disse eksemplene er rettet mot det publiserte v3.0.0 pakke. Ring init() én gang og beskytte det nullbare resultatet. Partneren løses fra clientId; ikke bestå partnerId til v3 init()Eksisterende v2-integrasjoner bør følge den offisielle oppgraderingsveiledningen før versjoner endres.

Installer

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

Inkluder SDK-stilarket som er dokumentert for den installerte SDK-versjonen.

Initialiser og gjengi

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() returer null når autentisering mislykkes. Beskytt alle gjengivelseskall.

Størrelse

v3.0.0 eksponerer størrelser i prøveopplevelsen, i stedet for en separat sdk.renderSizingButton() metode. For et plagg med godkjente størrelsesdata, aktiver den flyten på prøvingsknappen:

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

Aktiver størrelsesvalg først etter at plaggdataene og partnerkonfigurasjonen er klare.

Arrangementer

Det offentlige SDK-et dokumenterer tilbakekall på klientsiden for Prøv-knappen og legg-i-handlekurv-handlinger. Koble tilbakekall til butikkfrontens eksisterende analyse- og handlekurvlag. Ikke plasser kundebilder, legitimasjon eller unødvendige personopplysninger i analysenyttelaster.

Produksjonsveiledning

Initialiser én gang per side.
Gjengi kun for kvalifiserte plagg.
Overfør stabile katalogidentifikatorer.
Hold klienthemmeligheter unna nettleserkoden.
Test variantendringer og ruteoverganger i applikasjoner med én side.
Behold tastaturfokus og en tilgjengelig etikett for inngangspunktet.
Valider lasting, feil og utilgjengelige tilstander.
Overvåk ytelsen til produktsiden før og etter aktivering av integrasjonen.