Guida rapida all'SDK Web

Prima di iniziare

• A clientId rilasciato da SPREEAI per l'ambiente approvato.
• Un capo che ha completato l'acquisizione appartiene al tuo account ed è disponibile per la prova.
• Una pagina di prodotto che puoi modificare e un contenitore con un ID HTML univoco.

1. Installa

npm install @spreeai/web-sdk@3.0.0

Il foglio di stile fa parte del pacchetto e deve essere incluso nel pacchetto.

2. Aggiungi un contenitore

<div id="spreeai-try-on"></div>

3. Inizializzare ed eseguire il rendering

import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

// Add <div id="spreeai-try-on"></div> to your product page.
const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });

if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
  });
} else {
  // Keep the normal product and purchase journey available.
  console.warn("SPREEAI could not initialize.");
}

init() può tornare null. Controlla il risultato prima del rendering e inizializza una volta per pagina anziché per ciascun pulsante.

4. Controlla il risultato

1. Carica la pagina del prodotto. Un capo valido e disponibile restituisce un pulsante di prova.
2. Apri il camerino e conferma il capo e il colore desiderati.
3. Chiudilo e riaprilo. Controlla l'esperienza su un telefono e un desktop.
4. Prova un capo non disponibile nel tuo ambiente di test. Conferma che il tuo prodotto normale e il percorso di pagamento rimangano utilizzabili.

Dove andare dopo