For new integrations, use this order of preference:

1. WordPress/PHP hooks for server-side behavior
2. scoped CSS for presentation changes
3. native custom events exposed by the modern frontend

Product media event

The product mount dispatches yps-calcsheet:product-media-state whenever runtime media logic is enabled or disabled for the current calculator view.

document.querySelectorAll('[data-yps-calcsheet-app="product"]').forEach((mount) => {
  mount.addEventListener('yps-calcsheet:product-media-state', (event) => {
    console.log('Media enabled:', event.detail.enabled);
  });
});

Admin save event

After the modern admin saves a calculator, the window dispatches yps-calcsheet:admin-calculator-save.

window.addEventListener('yps-calcsheet:admin-calculator-save', (event) => {
  console.log('Saved calculator ID:', event.detail.calculatorId);
  console.log('Calculator payload:', event.detail.calculator);
});

About the old jQuery triggers

If your website still listens to old triggers such as awspcBeforeCalculatePrice, awspcAfterCalculatePrice, or awspcAjaxCalculatePriceSuccess, treat that integration as legacy code and retest it carefully in staging after every upgrade.

Do not build new integrations on top of those legacy jQuery hooks.