Integrazione con Web SDK

Utilizzo @spreeai/web-sdk per un negozio online personalizzato o headless.

Questi esempi prendono di mira la pubblicazione v3.0.0 pacchetto. Chiama init() una volta e proteggi il suo risultato nullable. Il partner viene risolto da clientId; Non passare partnerId alla versione 3 init()Le integrazioni v2 esistenti devono seguire la guida di aggiornamento ufficiale prima di cambiare versione.

Installare

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

Includi il foglio di stile SDK documentato per la versione SDK installata.

Inizializza e visualizza

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() resi null quando l'autenticazione fallisce. Proteggere tutte le chiamate di rendering.

Taglia

La versione 3.0.0 espone le taglie all'interno dell'esperienza di prova, anziché in un'interfaccia separata. sdk.renderSizingButton() metodo. Per un capo con dati di taglia approvati, abilita tale flusso sul pulsante prova:

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

Abilita la selezione delle taglie solo dopo che i dati relativi al capo e la configurazione del partner sono pronti.

Eventi

La documentazione SDK pubblica descrive le callback lato client per il pulsante "Prova" e per le azioni di aggiunta al carrello. Collega le callback ai livelli di analisi e carrello esistenti del negozio online. Non inserire immagini dei clienti, credenziali o dati personali non necessari nei payload di analisi.

Guida alla produzione

Inizializzare una sola volta per pagina.
Rendering disponibile solo per i capi idonei.
Passa gli identificatori di catalogo stabili.
Non inserire i segreti del client nel codice del browser.
Testa le modifiche alle varianti e le transizioni di percorso nelle applicazioni a pagina singola.
Mantenere il focus della tastiera e un'etichetta accessibile per il punto di ingresso.
Convalidare gli stati di caricamento, errore e indisponibilità.
Monitorare le prestazioni della pagina prodotto prima e dopo l'attivazione dell'integrazione.