Appearance
Transform data with hooks
Hooks are approved transformation pipelines. Each callback receives the previous valid value and returns the value passed to the next plugin and the application.
Filter the brand directory
ts
api.hooks.filter('brands:filter', (brands, context) => {
if (context.source !== 'brands') return brands
return brands
.map((brand) => ({
...brand,
dealerFeatured: brand.slug === 'FEATURED_BRAND_SLUG',
}))
.sort(
(left, right) => Number(Boolean(right.dealerFeatured)) - Number(Boolean(left.dealerFeatured)),
)
})Return new arrays and records instead of mutating inputs. Catalog hooks transform existing records; they are not item-provider APIs for synthetic brands or wheels.
Customize startup settings
settings:filter runs once before startup configuration is applied and the interface is created. It must be registered before startup:
ts
api.hooks.filter('settings:filter', (settings) => ({
...settings,
options: {
...settings.options,
templateAccentColor: '#b42318',
splashTitle: 'Find wheels for your vehicle',
showInventoryQty: false,
},
}))This hook receives only approved presentation, language, and feature settings. It does not receive the configurator key, account identity, API endpoints, request parameters, RFQ recipients, or plugin descriptors.
Resolve wheel destinations
ts
api.hooks.filter('wheel-destination:resolve', (request) => {
const wheel = request.wheel as { wheelImageId?: string | number }
if (!wheel.wheelImageId) return request
return {
...request,
destination: {
type: 'external',
url: `/products/wheels/${String(wheel.wheelImageId)}`,
target: '_self',
},
}
})Relative external URLs resolve against the embedding website. Return the request unchanged when a custom destination does not apply.
See the hooks reference for timing and return contracts.