Szybki start dla zestawu SDK sieci Web

Zanim zaczniesz

• A clientId wydane przez SPREEAI dla zatwierdzonego środowiska.
• Odzież, która została przyjęta, należy do Twojego konta i jest dostępna do przymierzenia.
• Stronę produktu, którą możesz edytować oraz kontener z unikalnym identyfikatorem HTML.

1. Zainstaluj

npm install @spreeai/web-sdk@3.0.0

Arkusz stylów jest częścią pakietu i musi być zawarty w pakiecie.

2. Dodaj pojemnik

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

3. Zainicjuj i renderuj

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() może wrócić null. Sprawdź wynik przed renderowaniem i inicjuj raz na stronę, a nie dla każdego przycisku.

4. Sprawdź wynik

1. Załaduj stronę produktu. Prawidłowy, dostępny ubiór oznacza guzik do przymiarki.
2. Otwórz przymierzalnię i potwierdź zamierzony ubiór i kolor.
3. Zamknij i otwórz ponownie. Sprawdź działanie na telefonie i komputerze stacjonarnym.
4. Wypróbuj niedostępny element garderoby w środowisku testowym. Potwierdź, że normalna ścieżka produktu i kasy jest nadal użyteczna.

Gdzie iść dalej