Webb-SDK-integration

Använda @spreeai/web-sdk för en anpassad eller headless webbutik.

Dessa exempel riktar sig till de publicerade v3.0.0 paket. Ring init() en gång och skydda dess nollställbara resultat. Partnern är upplöst från clientId; passera inte partnerId till v3 init()Befintliga v2-integrationer bör följa den officiella uppgraderingsguiden innan versioner byts.

Installera

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

Inkludera SDK-stilmallen som dokumenterats för den installerade SDK-versionen.

Initiera och rendera

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 autentiseringen misslyckas. Skydda alla renderingsanrop.

Storleksanpassning

v3.0.0 exponerar storleksreglering i provningsupplevelsen, snarare än en separat sdk.renderSizingButton() metod. För ett plagg med godkänd storleksdata, aktivera det flödet på provningsknappen:

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

Aktivera storleksval endast efter att plaggdata och partnerkonfiguration är klara.

Händelser

Det publika SDK:t dokumenterar återanrop på klientsidan för knappen "Prova" och åtgärderna "Lägg till i varukorgen". Koppla återanrop till butikens befintliga analys- och varukorgslager. Placera inte kundbilder, inloggningsuppgifter eller onödiga personuppgifter i analysnyttolaster.

Produktionsvägledning

Initiera en gång per sida.
Rendera endast för kvalificerade plagg.
Skicka stabila katalogidentifierare.
Håll klienthemligheter borta från webbläsarkoden.
Testa variantändringar och ruttövergångar i applikationer med en sida.
Behåll tangentbordsfokus och en tillgänglig etikett för ingångspunkten.
Validera inläsnings-, fel- och otillgänglighetstillstånd.
Övervaka produktsidans prestanda före och efter att integrationen har aktiverats.