Pagsasama ng Web SDK

Gamitin @spreeai/web-sdk para sa isang custom o headless web storefront.

Ang mga halimbawang ito ay naka-target sa mga nailathalang bersyon 3.0.0 pakete. Tumawag init() isang beses at bantayan ang nullable na resulta nito. Ang partner ay naresolba mula sa clientId; huwag pumasa partnerId sa v3 init()Dapat sundin ng mga kasalukuyang v2 integration ang opisyal na gabay sa pag-upgrade bago baguhin ang mga bersyon.

I-install

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

Isama ang SDK stylesheet na nakadokumento para sa naka-install na bersyon ng SDK.

Magsimula at mag-render

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() mga pagbabalik null kapag nabigo ang authentication. Bantayan ang lahat ng render calls.

Pagsusukat

Inilalantad ng v3.0.0 ang pagsukat sa loob ng karanasan sa pagsubok, sa halip na isang hiwalay na sdk.renderSizingButton() paraan. Para sa isang damit na may aprubadong datos ng sukat, paganahin ang daloy na iyon sa buton ng pagsubok:

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

Paganahin lamang ang laki pagkatapos handa na ang datos ng damit at ang configuration ng partner.

Mga Kaganapan

Dinodokumento ng pampublikong SDK ang mga callback sa panig ng kliyente para sa button na Try-On at mga aksyon na add-to-cart. Ikinokonekta ang mga callback sa mga kasalukuyang analytics at cart layer ng storefront. Huwag maglagay ng imahe, kredensyal, o hindi kinakailangang personal na data ng customer sa mga payload ng analytics.

Gabay sa produksyon

Mag-initialize nang isang beses bawat pahina.
I-render lamang para sa mga kwalipikadong damit.
Ipasa ang mga stable na identifier ng katalogo.
Ilayo ang mga sikreto ng kliyente sa code ng browser.
Subukan ang mga pagbabago sa variant at mga transisyon sa ruta sa mga single-page na application.
Panatilihin ang pokus ng keyboard at isang madaling ma-access na label para sa entry point.
Patunayan ang mga estado ng pagkarga, pagkabigo, at mga hindi magagamit na estado.
Subaybayan ang performance ng product page bago at pagkatapos i-enable ang integration.