Feature a preferred brand

Combine the brands:filter hook with brands:card:badges to decorate an existing catalog record and display a recommendation.

Define the plugin

import {
  PLUGIN_API_VERSION,
  definePlugin,
  type PluginBrandRecord,
} from '@iconfigurators/plugin-sdk'

type Options = {
  brandSlug: string
  badgeLabel?: string
}

type FeaturedBrand = PluginBrandRecord & {
  customerFeatured?: boolean
}

export default definePlugin<Options>({
  id: 'customer.featured-brand',
  version: '1.0.0',
  apiVersion: PLUGIN_API_VERSION,

  setup(api, options) {
    if (!options?.brandSlug) throw new Error('brandSlug is required')

    api.hooks.filter('brands:filter', (brands, context) => {
      if (context.source !== 'brands') return brands

      return brands.map<FeaturedBrand>((brand) => ({
        ...brand,
        customerFeatured: brand.slug?.toLowerCase() === options.brandSlug.toLowerCase(),
      }))
    })

    api.ui.addStyle(`
      .customer-featured-brand {
        padding: 0.25rem 0.5rem;
        border-radius: 999px;
        background: #2563eb;
        color: white;
        font-size: 0.75rem;
        font-weight: 700;
      }
    `)

    api.ui.mount('brands:card:badges', (container, context) => {
      const brand = context.brand as FeaturedBrand
      if (!brand.customerFeatured) return

      const badge = document.createElement('span')
      badge.className = 'customer-featured-brand'
      badge.textContent = options.badgeLabel ?? 'Recommended'
      container.appendChild(badge)

      return () => badge.remove()
    })
  },
})

Queue the option

queuePlugin(featuredBrandPlugin, {
  options: {
    brandSlug: 'FEATURED_BRAND_SLUG',
    badgeLabel: 'Dealer pick',
  },
})

This pattern decorates existing records; it does not create synthetic catalog brands. Return new records rather than mutating the values received by the hook.