Skip to content

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.

Icon Visualizer developer documentation