Skip to main content

Badge Plugin

Storefront plugin config and UI primitives for reading and rendering product badges.

Disclaimer: This module depends on compatible plugin behavior being active in the consumer's Vendure backend instance. Configure the backend first, then register this plugin config in the storefront.

Purpose​

Use this module when you need badge data in product/search queries and want reusable headless components for rendering badge positions and images.

Features​

  • Extends queries with badge fields for products and search results
  • Exposes VendureBadgePlugin for DataProvider pluginConfigs
  • Exposes ProductBadge headless UI primitives (Root, Group, Item, Image)
  • Provides settings-driven badge position filtering

Installation​

npm install @haus-storefront-react/vendure-plugin-configs

Note: This is not a public package. Contact the Haus Tech Team for access.

API Reference​

Components​

ProductBadge

Headless badge primitives with Root, Group, Item, and Image for custom rendering.

Exports​

  • VendureBadgePlugin
  • ProductBadge
  • Badge type
  • BadgeFeatures, BadgePluginRequests, BadgePluginSettings types

Basic Usage​

Example 1: Register Plugin in Data Provider​

Use this to configure and register the badge plugin in your provider pluginConfigs.

import { VendureBadgePlugin } from '@haus-storefront-react/vendure-plugin-configs/badge'

const pluginConfig = VendureBadgePlugin.init({
  enableFeatures: {
    showBadges: true,
  },
  settings: {
    defaultPositions: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
    availablePositions: {
      productListItem: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
      productDetail: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
      imageCarousel: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
    },
  },
})

Example 2: Consume Plugin Functionality​

Use this in application UI after the plugin has been registered.

import { ProductBadge } from '@haus-storefront-react/vendure-plugin-configs/badge'

export function ProductBadges({ product }) {
  return (
    <ProductBadge.Root product={product}>
      {({ groupedBadges }) =>
        Object.entries(groupedBadges).map(([position, badges]) => (
          <ProductBadge.Group key={position} position={position}>
            {badges.map((badge) => (
              <ProductBadge.Item key={badge.id} badge={badge}>
                <ProductBadge.Image badge={badge} />
              </ProductBadge.Item>
            ))}
          </ProductBadge.Group>
        ))
      }
    </ProductBadge.Root>
  )
}

Made with ❤️ by Haus Tech Team