JavaScript Hooks & Actions

JavaScript – Lifecycle Event

Before registering hooks, wait for the frontend to be ready.

Event	Description
wp3dconf/frontend:ready	Fires when the Alpine.js frontend is fully initialised. Register all frontend actions and filters here.

window.addEventListener('wp3dconf/frontend:ready', function(event) {
  const { addAction, addFilter } = window.WP3dConf;

  addAction('wp3dconf/frontend/storeInitialized', function() {
    console.log('Frontend store ready');
  }, 10);
});

JavaScript – Global API

All JavaScript hooks are accessed via window.WP3dConf.

const { addAction, addFilter, hasAction, removeAction } = window.WP3dConf;

A utilities object is also available via window.WP3dConfUtils.

const { log } = window.WP3dConfUtils;

addAction( hook, callback, priority )

Parameter	Type	Default	Description
hook	String	–	The hook name
callback	Function	–	The function to call
priority	Number	10	Lower numbers run first

addFilter( hook, callback, priority )

Same signature as addAction. The callback must return the first argument (the filtered value).

JavaScript Actions

wp3dconf/frontend/storeInitialized

Fires when the Alpine.js store has been initialised. No parameters are passed.

window.addEventListener('wp3dconf/frontend:ready', function() {
  const { addAction } = window.WP3dConf;
  const { log } = window.WP3dConfUtils;

  addAction('wp3dconf/frontend/storeInitialized', function() {
    log('Store initialized');
  }, 10);
});

wp3dconf/frontend/data/initialized

Fires after the configurator data has been loaded into the store.

Parameter	Type	Description
store	Object	The Alpine.js store instance

wp3dconf/frontend/layer/activated

Fires when a layer option is activated by the customer.

Parameter	Type	Description
uid	String	UID of the activated layer
layer	Object	The layer object
store	Object	The Alpine.js store instance

wp3dconf/frontend/layer/deactivated

Fires when a layer option is deactivated.

Parameter	Type	Description
uid	String	UID of the deactivated layer
layer	Object	The layer object
store	Object	The Alpine.js store instance

wp3dconf/frontend/data/priceUpdated

Fires whenever the calculated price is updated.

Parameter	Type	Description
store	Object	The Alpine.js store instance

addAction('wp3dconf/frontend/data/priceUpdated', function({ store }) {
  console.log('Updated price:', store.price);
}, 10);

wp3dconf/frontend/canvas/apply

Fires when a layer change is applied to the 3D canvas. Use this to hook into the rendering pipeline for custom material or mesh logic.

Parameter	Type	Description
uid	String	UID of the layer being applied
layer	Object	The layer object
targetMeshes	Array	Three.js mesh objects targeted by this layer
customData	Object	Any custom data attached to the layer
store	Object	The Alpine.js store instance

addAction('wp3dconf/frontend/canvas/apply', function({ uid, layer, targetMeshes, store }) {
  targetMeshes.forEach(mesh => {
    // Custom mesh manipulation
  });
}, 10);

JavaScript Filters

wp3dconf/frontend/price/layer

Filters the price contribution of an individual layer. Return a modified total to override the default price calculation.

Parameter	Type	Description
total	Number	The current price total for this layer
uid	String	UID of the layer
layer	Object	The layer object
store	Object	The Alpine.js store instance

window.addEventListener('wp3dconf/frontend:ready', function() {
  const { addFilter } = window.WP3dConf;

  addFilter('wp3dconf/frontend/price/layer', function(total, { uid, layer, store }) {
    if (uid === 'my-layer-uid') {
      return total * 2;
    }
    return total;
  }, 10);
});