Faslet Global Object

The `window._faslet` global

The _faslet global object is defined as follows: The Faslet system allows you to control and interact with the Size Me Up Virtual Assistant through a global JavaScript variable window._faslet. This interface provides an accessible way to customize the Size Me Up Virtual Assistant's behavior according to your needs.

interface Window {
  _faslet?: {
    id: string; // The product identifier
    variants: {
      size: string;
      color?: string;
      id: string;
      available: boolean;
      sku: string;
      price?: number;
      imageUrl?: string; // The thumbnail image for this variant to be shown in the widget result screen
    }[];
    colors?: {
      id: string;
      name: string;
    }[];
    addToCart?: (variantId: string) => Promise<unknown>; // Will be invoked when Add-to-cart is clicked at the end of the widget flow
    sku: string; // The product SKU if it exists
    shopUrl: string;
    onButtonShow?: () => unknown; // Will be invoked when the button should show
    onButtonHidden?: () => unknown; // Will be invoked when the button is hidden (either by AB testing or because it shouldn't show on this product)
    onResult?: (
      result: { 
        label: string; 
        userName: string | undefined;
        userId: string;
        profile: {
          weight: number | undefined;
          height: number | undefined;
          ageRange: string | undefined;
          referenceShoeBrand: string | undefined;
          referenceShoeSize: string | undefined;
        }
      }, 
      resultType: 'auto' | 'result-screen'
    ) => unknown; // Will be invoked when a result is calculated
    onColorSelected?: (colorId: string) => unknown; // Will be invoked when a color is selected at the end of the widget flow
    selectColor?: (colorId: string) => unknown; // Can be invoked to tell the widget which color option to select
    openWidget?: () => unknown; // Can be invoked to programmatically open the widget flow (in case of custom built buttons)
  };
}

Here are the properties available within the window._faslet object:

Property	Type	Required	Description
`id`	string	Yes	The product identifier.
`addToCart`	function	Yes	A function that will be invoked when the 'Add to Cart' button is clicked at the end of the popup flow.
`variants`	array	Yes	An array of variant objects with properties such as `size`, `color`, `id`, `available`, `sku`, `price`, and `imageUrl`.
`colors`	array	No	An array of color objects each with `id` and `name` properties.
`sku`	string	No	The product SKU, if it exists.
`shopUrl`	string	No	The URL of the shop.
`onButtonShow`	function	No	A function that will be invoked when the button should show.
`onButtonHidden`	function	No	A function that will be invoked when the button is hidden (either by AB testing or because it shouldn't show on this product).
`onResult`	function	No	A function that will be invoked when a result is calculated. It takes two parameters: an object with information about the result such as the size `label` that was recommended to the customer, the user's `profile` and a `resultType` which can be either 'auto' or 'result-screen'.
`onColorSelected`	function	No	A function that will be invoked when a color is selected at the end of the popup flow.
`selectColor`	function	No	A function that can be invoked to tell the Virtual Assistant which color option to select.
`openWidget`	function	No	A function that can be invoked to programmatically open the popup flow (in case of custom built buttons).

tip

Note that the addToCart function returns a promise. This allows calling a backend api asynchronously and the popup will await this. This is very handy if your add to cart is not simply a redirect. If in doubt, a Promise.resolve() can always be returned, as has been done in the above examples.

The window._faslet global​

The `window._faslet` global