Available JavaScript lifecycle events

Below is a list of the JavaScript events you can hook into on the lifecycle of Filter Query Block Pro. Each section shows the event name, a short description, and a ready-to-copy code example.

// Listen for the beforeInit event
document.addEventListener('filterQueryBlock:beforeInit', (event) => {
  console.info('Received filterQueryBlock:beforeInit', event.detail);
}, true);

// Listen for the afterInit event
document.addEventListener('filterQueryBlock:afterInit', (event) => {
  console.info('Received filterQueryBlock:afterInit', event.detail);
}, true);

// Listen for the initError event
document.addEventListener('filterQueryBlock:initError', (event) => {
  console.info('Received filterQueryBlock:initError', event.detail);
}, true);

// Listen for the beforeRender event
document.addEventListener('filterQueryBlock:beforeRender', (event) => {
  console.info('Received filterQueryBlock:beforeRender', event.detail);
}, true);

// Listen for the afterRender event
document.addEventListener('filterQueryBlock:afterRender', (event) => {
  console.info('Received filterQueryBlock:afterRender', event.detail);
}, true);

// Listen for the stateChange event
document.addEventListener('filterQueryBlock:stateChange', (event) => {
  console.info('Received filterQueryBlock:stateChange', event.detail);
}, true);

Thank you for exploring the available events. If you have any questions or need further examples, feel free to reach out—our team is always here to help you integrate these lifecycle hooks smoothly into your project.