element.on()

Method@tryyoursize/sdk

Listens to an element event. A handler that throws never breaks the SDK or the other handlers.

on<K extends keyof ElementEvents>(event: K, handler: (e: ElementEvents[K]) => void): void;

Parameters

eventkeyof ElementEventsRequired

"ready", "size", "open", "close", "loaderror" or "recommendation". See the event pages.

handler(e: ElementEvents[K]) => voidRequired

Called with the event payload.

Example

JavaScriptReactHTML

guide.on("recommendation", (r) => r.status === "ready" && preselect(r.size));
guide.on("size", ({ size }) => preselect(size));          // "Use this size" in the window
guide.on("loaderror", ({ error }) => console.warn(error.code));

<SizeGuide
  product="SKU-123"
  onRecommendation={(r) => r.status === "ready" && preselect(r.size)}
  onSize={({ size }) => preselect(size)}
  onLoadError={({ error }) => console.warn(error.code)}
/>

const el = document.querySelector("tys-size-guide");
el.addEventListener("tys:recommendation", (e) => e.detail.status === "ready" && preselect(e.detail.size));
el.addEventListener("tys:size", (e) => preselect(e.detail.size));