Web SDK -integraatio

Käyttää @spreeai/web-sdk mukautetulle tai headless-verkkokaupalle.

Nämä esimerkit kohdistuvat julkaistuihin versio 3.0.0 paketti. Soita init() kerran ja vartioi sen nollautuvaa tulosta. Partneri ratkaistaan clientId; älä ohita partnerId versiohun 3 init()Olemassa olevien v2-integraatioiden tulee noudattaa virallista päivitysopasta ennen versioiden vaihtamista.

Asentaa

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

Sisällytä asennetulle SDK-versiolle dokumentoitu SDK-tyylitiedosto.

Alusta ja renderöi

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() tuotot null kun todennus epäonnistuu. Suojaa kaikki renderöintikutsut.

Koko

v3.0.0 mahdollistaa koon muuttamisen jo sovitustoiminnon sisällä erillisen koon muuttamisen sijaan. sdk.renderSizingButton() menetelmä. Jos vaatteella on hyväksytyt kokotiedot, ota kyseinen työnkulku käyttöön sovituspainikkeessa:

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

Ota koon määritys käyttöön vasta, kun vaatteen tiedot ja kumppanin kokoonpano ovat valmiit.

Tapahtumat

Julkinen SDK dokumentoi asiakaspuolen takaisinkutsut Kokeile-painikkeelle ja lisää ostoskoriin -toiminnoille. Yhdistä takaisinkutsut verkkokaupan olemassa oleviin analytiikka- ja ostoskorikerroksiin. Älä lisää asiakaskuvia, tunnistetietoja tai tarpeettomia henkilötietoja analytiikkasisältöihin.

Tuotanto-ohjeet

Alusta kerran sivua kohden.
Renderöi vain kelvolliset vaatteet.
Välitä vakaat luettelotunnisteet.
Pidä asiakassalaisuudet poissa selainkoodista.
Testaa varianttien muutoksia ja reittisiirtymiä yksisivuisissa sovelluksissa.
Säilytä näppäimistökohdistus ja helppokäyttöinen nimi aloituskohdassa.
Vahvista lataus-, epäonnistumis- ja ei-käytettävyystilat.
Seuraa tuotesivun suorituskykyä ennen integraation käyttöönottoa ja sen jälkeen.