Product List Prices Plugin

Storefront plugin config for loading product-list prices in a separate bulk request.

Disclaimer: This module depends on compatible backend behavior in Vendure. Your backend products query must expose price, priceWithTax, and currencyCode on product items.

Purpose

Use this plugin when price computation is expensive and you want product lists to render quickly from search data first, then merge prices asynchronously.

Features

• Adds SDK request productListPrices(productIds: string[])
• Exposes productListPricesStrategy for productListOptions.productListPriceStrategy
• Separates price fetching from the main search query for product lists

Installation

npm

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

Yarn

yarn add @haus-storefront-react/vendure-plugin-configs

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

API Reference

Exports

• VendureProductListPricesPlugin
• productListPricesStrategy
• useProductListPrices
• ProductListPricesPluginRequests (type)

Basic Usage

Example 1: Register plugin + global product list price strategy

React

import { DataProvider } from '@haus-storefront-react/core'
import { VendureProviderPreset } from '@haus-storefront-react/providers/vendure'
import {
  VendureProductListPricesPlugin,
  productListPricesStrategy,
} from '@haus-storefront-react/vendure-plugin-configs/product-list-prices'

const preset = VendureProviderPreset.init({
  apiUrl: 'https://your-vendure-instance.com/shop-api',
  pluginConfigs: [VendureProductListPricesPlugin.init({})],
  productListOptions: {
    productListPriceStrategy: productListPricesStrategy,
  },
}).toPreset()

export function App({ children }) {
  return (
    <DataProvider sdk={preset.sdk} options={preset.options}>
      {children}
    </DataProvider>
  )
}

React Native

import { Text } from 'react-native'
import {
  VendureProductListPricesPlugin,
  productListPricesStrategy,
} from '@haus-storefront-react/vendure-plugin-configs/product-list-prices'

const pluginConfig = VendureProductListPricesPlugin.init({})
const strategy = productListPricesStrategy

export function StrategyStatus() {
  return (
    <Text>
      {pluginConfig ? 'Plugin ready' : 'Plugin missing'} / {strategy ? 'Strategy ready' : 'No strategy'}
    </Text>
  )
}

Example 2: Use the hook directly

Useful in custom components when you need raw productId -> price mapping.

React

import { useProductListPrices } from '@haus-storefront-react/vendure-plugin-configs/product-list-prices'

export function PriceDebug({ ids }: { ids: string[] }) {
  const { data, isPending } = useProductListPrices(ids, { enabled: ids.length > 0 })
  if (isPending) return <div>Loading prices...</div>
  return <pre>{JSON.stringify(Array.from(data?.entries() ?? []), null, 2)}</pre>
}

React Native

import { Text } from 'react-native'
import { useProductListPrices } from '@haus-storefront-react/vendure-plugin-configs/product-list-prices'

export function PriceCount({ ids }: { ids: string[] }) {
  const { data, isPending } = useProductListPrices(ids, { enabled: ids.length > 0 })
  if (isPending) return <Text>Loading prices...</Text>
  return <Text>Loaded prices: {data?.size ?? 0}</Text>
}

---

Made with ❤️ by Haus Tech Team