Actions and filters available on the customer-facing configurator page – both JavaScript (Alpine.js) and PHP.
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/layer/enabled / wp3dconf/frontend/layer/disabled
Fire when a layer’s enabled state changes (independent of selection/visibility — a disabled layer can’t be clicked, e.g. via a Conditional Logic set_state action).
| Parameter | Type | Description |
|---|---|---|
uid | String | UID of the layer |
layer | Object | The layer object |
store | Object | The Alpine.js store instance |
wp3dconf/frontend/layer/shown / wp3dconf/frontend/layer/hidden
Fire when a layer’s visibility changes.
| Parameter | Type | Description |
|---|---|---|
uid | String | UID of the layer |
layer | Object | The layer object |
store | Object | The Alpine.js store instance |
wp3dconf/frontend/group/opened / wp3dconf/frontend/group/closed
Fire when a group/subgroup layer is expanded or collapsed in the controls UI.
| Parameter | Type | Description |
|---|---|---|
uid | String | UID of the group layer |
layer | Object | The layer object |
store | Object | The Alpine.js store instance |
wp3dconf/frontend/modelLoaded / wp3dconf/frontend/afterModelLoaded
Fire once the 3D model has finished loading in the canvas. modelLoaded fires first and is used internally to apply the initial active-layer selection to the canvas; afterModelLoaded fires once that’s done, so it’s the safer hook for addon code that needs the canvas fully settled.
| Parameter | Type | Description |
|---|---|---|
store | Object | The Alpine.js store instance |
addAction('wp3dconf/frontend/afterModelLoaded', function({ store }) {
console.log('Model ready, active layers applied');
}, 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_amounts
Filters a single active layer’s own { price, salePrice } pair before it’s added into the running total. Runs once per active layer, before wp3dconf/frontend/price/layer (which instead filters the accumulated running total after each layer is folded in). Use this one when you need to change what a specific layer itself is worth; use price/layer when you need to adjust the total as a whole.
| Parameter | Type | Description |
|---|---|---|
amounts | Object | { price, salePrice } for this layer, read from its settings |
context | Object | { uid, layer, store } |
addFilter('wp3dconf/frontend/price/layer_amounts', function(amounts, { uid, layer, store }) {
if (uid === 'my-layer-uid') {
amounts.price += 5;
}
return amounts;
}, 10);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 shown for a layer in the summary popup. Return null to omit the entry entirely (used by Custom Fields to hide a switch’s raw true value, since the layer name already says everything).
| Parameter | Type | Description |
|---|---|---|
data | Object|null | The layer’s custom data (store.customData[uid]), or null |
context | Object | { uid, store } |
addFilter('wp3dconf/frontend/summary/layerCustomData', function(data, { uid, store }) {
if (!data) return data;
return { ...data, extra: 'note' };
}, 10);wp3dconf/frontend/submit/blocked
Filters whether the add-to-cart / Get a Quote submission should be blocked. Return true to block. Used by Custom Fields to block submission while a required field is empty.
| Parameter | Type | Description |
|---|---|---|
blocked | Boolean | Whether submission is currently blocked |
context | Object | { store, form, context } — form is the form element, context is 'cart' or 'quote' |
addFilter('wp3dconf/frontend/submit/blocked', function(blocked, { store, context }) {
if (blocked) return blocked; // Don't override an existing block.
return myValidationFails(store) ? true : blocked;
}, 10);wp3dconf/frontend/storeValuesToRetrieveParams
Filters the request parameters sent when generating a shareable link (the ?key= flow). Use this to append additional fields to the payload the server stores.
| Parameter | Type | Description |
|---|---|---|
params | Object | Request params (action, nonce, active_layers, custom_data) |
store | Object | The Alpine.js store instance |
addFilter('wp3dconf/frontend/storeValuesToRetrieveParams', function(params, store) {
params.my_field = store.myValue;
return params;
}, 10);