Integrace webových SDK
Použití @spreeai/web-sdk pro vlastní nebo bezhlavý webový obchod.
Tyto příklady se zaměřují na publikované v3.0.0 balíček. Zavolejte init() jednou a ochránit jeho nulovatelný výsledek. Partner je vyřešen z clientIdneprocházet partnerId do verze 3 init()Stávající integrace v2 by se měly před změnou verzí řídit oficiálním průvodcem upgradem.
Instalovat
npm install @spreeai/web-sdk@3.0.0
# or
yarn add @spreeai/web-sdk@3.0.0
Uveďte stylový list SDK zdokumentovaný pro nainstalovanou verzi SDK.
Inicializovat a vykreslit
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() výnosy null když selže ověření. Chraňte všechna volání renderování.
Velikost
Verze 3.0.0 umožňuje výběr velikosti v rámci zkoušení, nikoli jako samostatný prvek. sdk.renderSizingButton() metoda. U oděvu se schválenými údaji o velikosti povolte tento postup na tlačítku vyzkoušení:
await sdk?.renderTryOnButton({
elementId: "spreeai-try-on",
garments: [{ garmentId: "your-garment-id" }],
enableSizingRecommendation: true,
});
Povolte změnu velikosti až po přípravě dat oděvu a konfigurace partnera.
Události
Veřejná sada SDK dokumentuje zpětná volání na straně klienta pro tlačítko Vyzkoušet a akce přidání do košíku. Propojte zpětná volání se stávajícími analytickými vrstvami a vrstvami košíku v obchodě. Nevkládejte do analytických dat obrázky zákazníků, přihlašovací údaje ani zbytečné osobní údaje.
Pokyny pro výrobu
- Inicializovat jednou na stránku.
- Vykreslovat pouze pro vhodné oděvy.
- Předávat stabilní identifikátory katalogu.
- Udržujte tajné údaje klienta mimo kód prohlížeče.
- Otestujte změny variant a přechody tras v jednostránkových aplikacích.
- Zachovat fokus klávesnice a přístupný popisek pro vstupní bod.
- Ověřte stavy načítání, selhání a nedostupnosti.
- Sledujte výkon stránky produktu před a po aktivaci integrace.