Options¶

Properties¶

usePreloadHtml¶

Type¶

  usePreloadHtml: boolean;

Purpose¶

When configured, custom Html can be loaded to display while the embed is still loading. This can be used for a custom loading message, or a skeleton loader. Please contact our team to discuss options if this is something you'd like to make use of. For more information, see Advanced Loading

Callbacks¶

eventHandler¶

Type¶

eventHandler(event: {
  event:
    | "created"
    | "page-load"
    | "comparison-attribute-changed"
    | "export-started"
    | "machine-selection-changed"
    | "print";
  state: {
    page:
      | "loading"
      | "select-range"
      | "select-model"
      | "select-competitors"
      | "comparison"
      | "machine-specs";
    comparisonAttribute?: String | undefined;
    range?: String | undefined;
    rangePath?: String[] | undefined;
    marketingGroup?: String | undefined;
    subject?: Machine;
    compareTo?: Machine[] | undefined;
  };
}) => void;

Purpose¶

Provides access to the internal event bus that controls the state of the embed. Each event includes an event name and a snapshot of the current state.

For example, an intial load event may look like this:

{
  "event": "page-load",
  "state": {
    "page": "select-competitors",
    "subject": {
      "manufacturer": "MyBrandHere",
      "model": "ABC 123 X"
    }
  }
}

Common uses include:

Verifying that the embed has loaded correct - See here for an example
Logging analytics for user interaction within the embed.

Example¶

new SpecCheckLite({
  // ...
  eventHandler: function (e) {
    console.log(JSON.stringify(e, null, 2));
  },
});

events.notFound¶

Type¶

  notFound() => void;

Purpose¶

Called if Lite cannot find the requested embed. If this occurs, the contents of the container will not be changed.

Example¶

new SpecCheckLite({
  // ...
  events: {
    notFound: function () {
      console.log("Not found");
    },
  },
});

events.serverError¶

Type¶

  serverError(status?: number) => void;

Purpose¶

Called if a server error occurs. If this happens Lite will not attmept to recover, and the embed may be left in an unknown state. status parameter will be the HTTP response status code returned by the server.

Example¶

new SpecCheckLite({
  // ...
  events: {
    serverError: function (status) {
      console.log("Server Error", status);
    },
  },
});

events.clientError¶

Type¶

  clientError() => void;

Purpose¶

Called if a client side error occurs. If this happens Lite will not attmept to recover, and the embed may be left in an unknown state.

Example¶

new SpecCheckLite({
  // ...
  events: {
    clientError: function () {
      console.log("Client Error");
    },
  },
});

events.print¶

Type¶

  print() => void;

Purpose¶

Custom handler for print button (if enabled) - will override default print behaviour.

Example¶

new SpecCheckLite({
  // ...
  events: {
    print: function () {
      console.log("User Requested Print");
      window.print()
    },
  },
});

extendModelData¶

Type¶

  type EnhancedModelData = {
    heroShot?: string;
    new?: string;
    modelLink?: string;
  };

  extendModelData(machine: {
    Id: number;
    Model: string;
    Manufacturer: string;
    Tier: string;
    RegionId: string;
    RevisionId: string;
    IsStartingMachine: boolean;
    Refs?: any
    Range: {
      Key: string;
      Name: string;
    }
  }) => EnhancedModelData | null | undefined | Promise<EnhancedModelData | null | undefined>;

Purpose¶

Provides a callback for providing enhanced data for own-brand equipment. Each eligible model within a comparison will call this callback when added.

Where Refs are available, this is the most reliable way to match data.

Return null or undefined to add no additional data, or return an object with the data you wish to add.

This callback accepts a Promise as a response so may be called asynchronously.

Example¶

new SpecCheckLite({
  // ...
  extendModelData: async function (machine) {
    if (machine.Refs['my-pim'] == 1234) {
      return {
        heroShot: "/img/hero-my-model.jpeg",
        new: true,
        modelLink: "/machines/my-model"
      };
    }

    if (machine.Refs['my-pim'] == 5678) {
      return {
        heroShot: "/img/hero-my-model.jpeg",
        modelLink: "/machines/my-model"
      };
    }
  },
});

heroShotPlaceholderUrlResolver¶

Type¶

  heroShotPlaceholderUrlResolver(
    rangeKey: string | null,
    rangeName: string | null
  ) => string | null | undefined | Promise<string | null | undefined>;

Purpose¶

Provides a callback for providing heroshot placeholders (where applicable). For each comparison this will be called, passing the range key and name to allow for an equipment appropriate placeholder to be provided.

Where the key and name are null, return a generic placeholder to be used where a range specific placeholder cannot be found.

Return a valid image url to be used a the placeholder - or return null / undefined if none is required.

This callback accepts a Promise as a response so may be called asynchronously.

Example¶

new SpecCheckLite({
  // ...
  heroShotPlaceholderUrlResolver: async function (rangeKey) {
    if (rangeKey == 'tracked-excavators') 
      return '/img/tex-placeholder.jpeg'
    return "/img/placeholder.jpeg";
  },
});

Further Assistance¶

If you have any questions at all then please contact our support team by emailing [email protected]