Events We Emit

StrutFit dispatches window events so your storefront can react to measurement changes and component lifecycle. Measurement-code events are fired by the Assistant Manager after it receives updates from the embedded assistant and persists them to local storage. Each StrutFit component also fires its own ready event when it loads.

Measurement code events

Each event uses a CustomEvent with detail.mCode. The value may be a string or null when the active code is cleared.

Event name	When it fires	`detail`
`strutfit:footMCodeUpdated`	Active footwear measurement code was updated	`{ mCode }` — string or `null`
`strutfit:bodyMCodeUpdated`	Active body / apparel measurement code was updated	`{ mCode }` — string or `null`
`strutfit:tryonMCodeUpdated`	Active try-on measurement code was updated	`{ mCode }` — string or `null`

Under the hood, the manager handles internal assistant messages (UPDATE_FOOT_MCODE, UPDATE_BODY_MCODE, UPDATE_TRYON_MCODE), writes the corresponding fields to StrutFit user data in local storage, then dispatches the matching event on window.

Listening for measurement code events

Use window.addEventListener. Cast or narrow event to CustomEvent if you use TypeScript.


window.addEventListener('strutfit:footMCodeUpdated', (event) => {
  const mCode = event.detail?.mCode;
  // mCode is the new active foot M-code, or null if cleared
});
 
window.addEventListener('strutfit:bodyMCodeUpdated', (event) => {
  const mCode = event.detail?.mCode;
  // mCode is the new active body M-code, or null if cleared
});
 
window.addEventListener('strutfit:tryonMCodeUpdated', (event) => {
  const mCode = event.detail?.mCode;
  // mCode is the new active try-on M-code, or null if cleared
});

Remember to remove listeners when your component or app context is torn down if you attach them in SPA code.

Component ready events

Each StrutFit web component dispatches a ready event on window once it has loaded its configuration and determined that it should be visible. The event fires at most once per component instance.

Because the event may fire before your listener is registered, each component also pushes its element id into a global array on window.StrutFit. Check the array first for any components that are already ready, then listen for the event to catch the rest.

Event name	Component	`detail`	Global array
`strutfit:sizeButtonReady`	`strutfit-size-button`	`{ id }` — string	`window.StrutFit.sizeButtonsReady`
`strutfit:fitTipReady`	`strutfit-fit-tip`	`{ id }` — string	`window.StrutFit.fitTipsReady`
`strutfit:chatBotBubbleReady`	`strutfit-chat-bot-bubble`	`{ id }` — string	`window.StrutFit.chatBotBubbleReady`
`strutfit:sizeChartButtonReady`	`strutfit-size-chart-button`	`{ id }` — string	`window.StrutFit.sizeChartButtonsReady`
`strutfit:tryonButtonReady`	`strutfit-tryon-button`	`{ id }` — string	`window.StrutFit.tryonButtonsReady`

Listening for ready events


// 1. Check for components that are already ready
const alreadyReady = window.StrutFit?.sizeButtonsReady ?? [];
alreadyReady.forEach((id) => {
  // handle already-ready component
});
 
// 2. Listen for components that become ready later
window.addEventListener('strutfit:sizeButtonReady', (event) => {
  const id = event.detail?.id;
  // handle newly ready component
});

The same pattern applies to all five events — substitute the event name and global array as needed.