Skip to main content

Search Result Custom Price Plugin

Storefront plugin config that replaces price, priceWithTax, and currencyCode on search results — and injects listPrice and listPriceWithTax — with values resolved by a pluggable price strategy.

Disclaimer: This module hooks into the Vendure SDK's search and searchField methods at runtime. The replacement prices are fetched asynchronously and written back into the React Query cache after the initial search response returns.

Purpose​

Vendure search results may return stale or simplified price data (e.g. from a search index). Use this plugin when you need accurate, up-to-date prices on search/product-list pages — for example prices resolved from product variants or from the Product.price union type — without changing how the rest of your storefront consumes search results.

Features​

  • Strips price, priceWithTax, and currencyCode from the default search query so the index is not the price source
  • Overrides search and searchField SDK methods to fetch replacement prices via a configurable strategy
  • Injects listPrice and listPriceWithTax fields that don't exist on search results natively
  • Ships a built-in default strategy that resolves prices (including list prices) from variant data
  • Ships priceOnProductsStrategy, an alternative strategy that queries Product.price / Product.priceWithTax / Product.listPrice / Product.listPriceWithTax union fields (PriceRange | SinglePrice)
  • Writes updated results back into the React Query cache automatically

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​

  • VendureSearchResultCustomPricePlugin — the plugin config instance
  • priceOnProductsStrategy — a ready-made price strategy that queries products with PriceRange/SinglePrice fields
  • fetchPrices — lower-level helper used internally; also exported for advanced composition
  • VendureSearchResultCustomPricePluginSettings type
  • VendureSearchResultCustomPriceStrategy type

VendureSearchResultCustomPricePlugin​

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

VendureSearchResultCustomPricePluginSettings​

interface VendureSearchResultCustomPricePluginSettings {
  priceStrategy?: (
    productIds: string[],
    sdk: VendureSDK,
  ) => Promise<Array<VendureSearchResultCustomPriceStrategy>>
}
SettingTypeRequiredDefaultDescription
priceStrategy(productIds: string[], sdk: VendureSDK) => Promise<Strategy[]>NoBuilt-in variant-based strategyCustom async function that resolves prices for a list of product IDs

VendureSearchResultCustomPriceStrategy​

The shape each strategy must return per product.

interface VendureSearchResultCustomPriceStrategy {
  productId: string
  price: Price
  priceWithTax: Price
  listPrice?: Price
  listPriceWithTax?: Price
  currencyCode: CurrencyCode
}

Utilities​

priceOnProductsStrategy​

Alternative price strategy that queries the products operation and resolves Price as the PriceRange | SinglePrice union type. Use this when your backend exposes price, priceWithTax, listPrice, and listPriceWithTax on the Product entity directly.

Parameters

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

Returns

Promise<Array<VendureSearchResultCustomPriceStrategy>>

Basic Usage​

Example 1: Register Plugin with Default Strategy​

Uses the built-in strategy that calculates min/max price from product variants.

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

const searchResultPricePlugin = VendureSearchResultCustomPricePlugin.init({
  enableFeatures: {},
})

Example 2: Register Plugin with priceOnProductsStrategy​

Uses the included strategy that queries Product.price and Product.priceWithTax union fields.

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

const searchResultPricePlugin = VendureSearchResultCustomPricePlugin.init({
  enableFeatures: {},
  settings: {
    priceStrategy: priceOnProductsStrategy,
  },
})

Advanced Usage​

Custom Price Strategy​

Provide your own async function to resolve prices from any source.

import { VendureSearchResultCustomPricePlugin } from '@haus-storefront-react/vendure-plugin-configs/search-result-custom-price'
import type { VendureSearchResultCustomPriceStrategy } from '@haus-storefront-react/vendure-plugin-configs/search-result-custom-price'

const myPriceStrategy = async (productIds, sdk): Promise<VendureSearchResultCustomPriceStrategy[]> => {
  const response = await sdk.createRequest(
    {
      operation: 'products',
      fields: [{ items: ['id', 'price', 'priceWithTax', 'listPrice', 'listPriceWithTax', 'currencyCode'] }],
      variables: { options: { type: 'ProductListOptions' } },
    },
    { options: { filter: { id: { in: productIds } } } },
    false,
  )

  return response.data.items?.map((item) => ({
    productId: item.id,
    price: item.price,
    priceWithTax: item.priceWithTax,
    listPrice: item.listPrice,
    listPriceWithTax: item.listPriceWithTax,
    currencyCode: item.currencyCode,
  })) ?? []
}

const searchResultPricePlugin = VendureSearchResultCustomPricePlugin.init({
  enableFeatures: {},
  settings: {
    priceStrategy: myPriceStrategy,
  },
})

Made with ❤️ by Haus Tech Team