CalcumateInitialized Event

What is the CalcumateInitialized event?

The CalcumateInitialized event is a custom browser event that gets automatically dispatched when Calcumate completes its initial setup and is ready for user interaction. This event allows you to programmatically detect when the calculator has fully loaded and access its configuration data.

When is this event triggered?

The event is fired once during the initial load, immediately after:

Integration data has been successfully fetched
Categories and items have been loaded
User's previously selected items have been restored (if any)
All validation checks have passed
The calculator UI is ready for interaction

How do I listen for this event?

You can listen for the CalcumateInitialized event using a standard event listener:

window.addEventListener('CalcumateInitialized', (event) => {
  const data = event.detail;
  console.log('Calcumate initialized:', data);
  
  // Your custom logic here
  handleCalcumateReady(data);
});

What data does the event contain?

The initialization data is available in the event.detail property and includes comprehensive information about the calculator's configuration:

{
    "state": {
        "isReady": true,
        "selectedCategory": "presets",
        "selectedCategoryList": "all",
        "selectedItems": [
            {
                "id": "BUFFETT-LIVINGROOM-19",
                "sort": 7,
                "product": "Buffett",
                "cssId": "buffet",
                "calcumatex": true,
                "calcumate": true,
                "depth": 124.3,
                "dashboard": true,
                "order": 11,
                "restriction": "Bottom only",
                "weight": 40,
                "active": true,
                "width": 45.6,
                "height": 52.2,
                "category": "Living Room",
                "thumbnail": "buffett.webp",
                "quantity": 1
            },
            ...
        ],
        "primaryCalculation": null,
        "secondaryCalculation": null,
        "calculating": false,
        "showDialog": false,
        "animation": "play",
        "animationTimeOuts": [],
        "searchString": "",
        "matchedItems": [],
        "scrollToItem": -1,
        "showCustomItemForm": false,
        "customItems": [],
        "showListModeScreen": false,
        "showPresetsListModeScreen": false,
        "location": null,
        "isLocationEnabled": true,
        "notification": null,
        "userGeo": null,
        "isCSP": false
    }
}

Best Practices

Add the event listener early - Place your event listener in the <head> or early in the <body> to ensure you don't miss the event.
Remove event listeners when they're no longer needed to prevent memory leaks:

  const handler = (event) => {
    console.log('Initialized!', event.detail);
  };
  
  window.addEventListener('CalcumateInitialized', handler);
  
  // Later, when cleaning up
  window.removeEventListener('CalcumateInitialized', handler);

Timing considerations

The CalcumateInitialized event fires before the CalculationFinished event. Here's the typical event sequence:

CalcumateInitialized - Calculator is ready and loaded
User interacts with calculator (adds items, etc.)
CalculationFinished - Calculation results are available

Browser Compatibility

This feature uses the standard CustomEvent API, which is supported in all modern browsers. For older browser support, you may need a polyfill.

Troubleshooting

Event not firing?

Check browser console for initialization errors
Verify the Calcumate script is loading correctly
Ensure there are no domain mismatch errors blocking initialization

Need to re-initialize?

window.dispatchEvent(new CustomEvent('RE-INIT', {}));

PreviousContainer Requirements (Width/Height)NextCalculationFinished Event

Last updated 3 months ago

Was this helpful?

hashtagWhat is the CalcumateInitialized event?

hashtagWhen is this event triggered?

hashtagHow do I listen for this event?

hashtagWhat data does the event contain?

hashtagBest Practices

hashtagTiming considerations

hashtagBrowser Compatibility

hashtagTroubleshooting

hashtagEvent not firing?

hashtagNeed to re-initialize?