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/modelLoaded

Fires after the 3D model has finished loading and has been added to the scene. No parameters are passed.

Use this hook for any logic that requires direct access to the Three.js scene or mesh objects. Code that depends on the loaded model must not run in store init() — hook it here instead to avoid a race condition.

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

  addAction('wp3dconf/frontend/modelLoaded', function() {
    console.log('3D model is in the scene');
  }, 10);
});

wp3dconf/frontend/afterModelLoaded

Fires after wp3dconf/frontend/modelLoaded and after the initial active-layer selections have been applied to the canvas. Use this when your logic depends on both the model and the default configuration state being fully applied.

Parameters

Parameter	Type	Description
store	Object	The Alpine.js store instance

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

  addAction('wp3dconf/frontend/afterModelLoaded', function({ store }) {
    console.log('Model loaded with initial selections:', store.activeLayers);
  }, 10);
});

Key distinctions between the two model-loaded actions:

Hook	When it fires	Use for
wp3dconf/frontend/modelLoaded	Immediately after the GLB is added to the Three.js scene	Raw scene/mesh access with no selection state required
wp3dconf/frontend/afterModelLoaded	After model load + initial layer selections applied to canvas	Anything that needs the fully configured starting state

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);
});

wp3dconf/frontend/summary/layerCustomData

Filters the custom data object returned for a layer when the summary is rendered. Use this to enrich, transform, or replace the raw stored data — for example to add display labels for a colour value or format a range input.

Return null to suppress the custom data for that layer.

Parameter	Type	Description
customData	Object|null	The raw custom data stored for this layer, or null if none
uid	String	UID of the layer
store	Object	The Alpine.js store instance

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

  addFilter('wp3dconf/frontend/summary/layerCustomData', function(customData, { uid, store }) {
    if (!customData || !customData.color) {
      return customData;
    }

    return {
      ...customData,
      label: 'Colour: ' + customData.color,
    };
  }, 10);
});