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:

  1. CalcumateInitialized - Calculator is ready and loaded

  2. User interacts with calculator (adds items, etc.)

  3. 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', {}));
PreviousCalcumateGEO Session Storage Cleanup in Single Page ApplicationsNextCalculationFinished Event

Last updated

Was this helpful?