Events We Emit

StrutFit dispatches window events so your storefront can react to measurement changes, component clicks 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.

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.

Size profile events

Some changes affect a shopper's recommendation without changing their measurement code. Answering the sizing questions the assistant asks on its results screen is one: the answers are stored against the shopper's saved profile, so the measurement code stays the same while the size it resolves to can change.

The manager clears its cached product responses before dispatching this, so any component that re-queries in response gets a fresh recommendation. strutfit-size-button already does, and emits strutfit:sizeUpdated if the size it resolves has changed.

window.addEventListener('strutfit:sizeProfileUpdated', () => {
  // any size StrutFit resolved before now may be out of date
});

Recommended size events

Every strutfit-size-button dispatches strutfit:sizeUpdated on window whenever the size it resolves for its product changes — once the product config first loads, and again after the shopper updates their measurement code or answers the assistant's sizing questions. The detail carries the same size, unit and width the button renders, so a storefront can persist the recommendation (for example as a hidden line item property on the add-to-cart form).

sizeText is the three parts joined with spaces and blanks dropped, e.g. 9 US D or M. Apparel products only ever populate size and sizeText. size, unit and width are null whenever the shopper has no size for the product, and sizeText distinguishes the two reasons why:

'Unavailable' is a fixed, untranslated value so it stays stable for reporting, even though the button itself renders a localised message in the same state.

Like the ready events, the event may fire before your listener is registered, so each button also records its latest result on window.StrutFit.recommendedSizes.

// 1. Read any sizes that resolved before this script ran
const alreadyResolved = window.StrutFit?.recommendedSizes ?? [];
alreadyResolved.forEach((recommendedSize) => {
  // recommendedSize.sizeText, e.g. '9 US D'
});

// 2. Listen for later updates
window.addEventListener('strutfit:sizeUpdated', (event) => {
  const { productCode, sizeText } = event.detail;
  // sizeText is 'Unavailable' when the product has no size for the shopper, null when unsized
});

Click events

Each interactive StrutFit component dispatches a click event on window when a shopper activates it — by mouse click or by keyboard (Enter or Space). A disabled component does not fire one. strutfit-fit-tip displays text rather than being interactive, so it has no click event.

The chat bubble is not tied to a product, so its detail carries mode instead of a productCode. mode is the assistant mode the click is about to open — 'faq' or 'find', matching its chat-mode attribute.

Use these for analytics, or any custom logic that should run alongside the assistant opening.

window.addEventListener('strutfit:sizeButtonClicked', (event) => {
  const { id, productCode } = event.detail;
  // e.g. send an analytics event
});

window.addEventListener('strutfit:chatBotBubbleClicked', (event) => {
  const { id, mode } = event.detail;
  // mode is 'faq' or 'find'
});

Intercepting the click

Every click event is cancelable. Calling preventDefault() stops StrutFit opening the assistant, so your storefront can handle the click itself.

window.addEventListener('strutfit:sizeButtonClicked', (event) => {
  if (shopperNeedsToPickAColourFirst) {
    event.preventDefault(); // the assistant will not open
    showColourPicker();
  }
});

Leave the event alone if you only want to observe clicks — the assistant opens as normal unless a listener explicitly cancels it.

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.

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.