Skip to main content

List Price Plugin

Storefront plugin config that surfaces a separate list price (recommended retail / manufacturer price) alongside the active selling price. Use it to render struck-through "before" prices, discount labels, or campaign indicators when the active price is below the list price.

Disclaimer: This module depends on a compatible list-price plugin being active in the consumer's Vendure backend instance, exposing listPrice / listPriceWithTax on ProductVariant (and on Product.listPrice / Product.listPriceWithTax if you also use the search-result strategy). Configure the backend first, then register this plugin config in the storefront.

Purpose​

Use this module when your backend stores a separate list price per variant and you need that value available across product, search, and order contexts without duplicating GraphQL field selections in every consumer.

Features​

  • Extends product, brief-product, and order queries with listPrice and listPriceWithTax on variants and order line variants
  • Augments Product, BriefProductVariant, and SearchResult with optional listPrice / listPriceWithTax fields — only when this plugin is imported
  • Registers showListPrices, listPrice, and listPriceWithTax plugin feature mappings so consumers can read list-price values through the standard feature API
  • Resolves list prices from OrderLine.productVariant, ProductVariant, or SearchResult automatically
  • Ships vendureListPriceSearchResultStrategy — a ready-made price strategy for use with VendureSearchResultCustomPricePlugin that fetches price, priceWithTax, listPrice, and listPriceWithTax from the products operation
  • Ships isCampaign utility to compare a list price against the active price

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​

Exports​

  • VendureListPricePlugin — the plugin config instance
  • vendureListPriceSearchResultStrategy — price strategy for VendureSearchResultCustomPricePlugin that includes list prices
  • isCampaign — utility that returns true when the active price differs from a non-zero list price
  • ListPriceFeatures type

VendureListPricePlugin​

Plugin config instance created with VendurePluginConfig. Register it via pluginConfigs in your data provider.

Adds to ProductVariant / BriefProductVariant

FieldTypeDescription
listPriceSinglePrice?List price for the variant
listPriceWithTaxSinglePrice?List price for the variant, including tax

Adds to Product

FieldTypeDescription
listPricePrice?List price union (PriceRange | SinglePrice)
listPriceWithTaxPrice?List price union including tax

Adds to SearchResult (populated by vendureListPriceSearchResultStrategy)

FieldTypeDescription
listPricePrice?List price union written into the search result cache
listPriceWithTaxPrice?List price union including tax

ListPriceFeatures​

interface ListPriceFeatures {
  showListPrices: boolean
  listPrice: (props: {
    variant?: ProductVariant
    orderLine?: OrderLine
    searchResult?: SearchResult
    identifier?: string
  }) => Price
  listPriceWithTax: (props: {
    variant?: ProductVariant
    orderLine?: OrderLine
    searchResult?: SearchResult
    identifier?: string
  }) => Price
}
FeatureTypeDescription
showListPricesbooleanToggle list-price rendering in consuming components
listPricefunctionResolves list price (multiplied by quantity for order lines, falling back to discountedLinePriceWithTax when the variant has no list price)
listPriceWithTaxfunctionSame as listPrice but using listPriceWithTax

vendureListPriceSearchResultStrategy​

Price strategy for VendureSearchResultCustomPricePlugin that queries the products operation for price, priceWithTax, listPrice, and listPriceWithTax as PriceRange | SinglePrice unions. When passed as the priceStrategy setting, the strategy result is merged into the React Query cache for search and searchField responses — including the augmented listPrice / listPriceWithTax fields on each SearchResult item.

Signature

const vendureListPriceSearchResultStrategy: (
  productIds: string[],
  sdk: VendureSDK,
) => Promise<Array<VendureSearchResultCustomPriceStrategy>>

Parameters

ParameterTypeRequiredDescription
productIdsstring[]YesProduct IDs to fetch prices for
sdkVendureSDKYesThe Vendure SDK instance

Module augmentation

Importing this strategy augments VendureSearchResultCustomPriceStrategy from @haus-storefront-react/vendure-plugin-configs/search-result-custom-price with optional listPrice? and listPriceWithTax? fields, so the extra values flow through fetchPrices into the cached search items automatically.

isCampaign​

Compares a list price against an active price. Returns false when the list price resolves to 0, and true when the two values differ. Accepts PriceRange, SinglePrice, or numeric inputs.

const isCampaign: (
  listPrice: PriceRange | SinglePrice | number,
  currentPrice: PriceRange | SinglePrice | number,
) => boolean

Basic Usage​

Example 1: Register the Plugin​

import { VendureListPricePlugin } from '@haus-storefront-react/vendure-plugin-configs/list-price'

const listPricePlugin = VendureListPricePlugin.init({
  enableFeatures: ['showListPrices'],
})

Example 2: Hydrate List Prices on Search Results​

Combine vendureListPriceSearchResultStrategy with VendureSearchResultCustomPricePlugin to populate listPrice and listPriceWithTax on every SearchResult item returned by search / searchField.

Order matters: register VendureSearchResultCustomPricePlugin so it can strip price / priceWithTax / currencyCode from the default search query, then register VendureListPricePlugin to enable the feature and bring in the type augmentation.

import { VendureSearchResultCustomPricePlugin } from '@haus-storefront-react/vendure-plugin-configs/search-result-custom-price'
import {
  VendureListPricePlugin,
  vendureListPriceSearchResultStrategy,
} from '@haus-storefront-react/vendure-plugin-configs/list-price'

const pluginConfigs = [
  VendureSearchResultCustomPricePlugin.init({
    settings: {
      priceStrategy: vendureListPriceSearchResultStrategy,
    },
  }),
  VendureListPricePlugin.init({ enableFeatures: ['showListPrices'] }),
]

Example 3: Render a Campaign Label​

Use isCampaign to compare the variant's list price against the active price.

import { isCampaign } from '@haus-storefront-react/vendure-plugin-configs/list-price'

export function ListPriceLabel({ variant }) {
  if (!variant.listPriceWithTax) return null
  const onCampaign = isCampaign(variant.listPriceWithTax, variant.priceWithTax)
  return onCampaign ? <s>{variant.listPriceWithTax.value}</s> : null
}

Advanced Usage​

Reading List Prices via the Feature API​

Once the plugin is registered, listPrice and listPriceWithTax become standard plugin features and can be invoked through the feature dispatcher with any of variant, orderLine, or searchResult. The handler picks the first matching source and returns a numeric Price.

import { useFeature } from '@haus-storefront-react/hooks'

export function VariantListPrice({ variant }) {
  const listPriceWithTax = useFeature('listPriceWithTax', { variant })
  return <span>{listPriceWithTax || null}</span>
}

Made with ❤️ by Haus Tech Team