Related Products Plugin

Storefront plugin config and data hook for related products.

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 PDP or recommendation flows need related product IDs in product data and a request helper for full related product objects.

Features

• Extends product queries with relatedProductIds
• Exposes VendureRelatedProductsPlugin for DataProvider pluginConfigs
• Exposes useRelatedProducts data hook
• Exposes RelatedProductsInput type contract

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

Hooks

useRelatedProducts

Fetches related products for a given product id through the SDK method registered by the plugin.

Exports

• VendureRelatedProductsPlugin
• useRelatedProducts
• RelatedProductsInput type

Basic Usage

Example 1: Register Plugin in Data Provider

Use this to register the related-products plugin in your provider pluginConfigs.

React

import { VendureRelatedProductsPlugin } from '@haus-storefront-react/vendure-plugin-configs/related-products'

// This plugin has no configurable feature/settings payload in init.
const relatedProductsPlugin = VendureRelatedProductsPlugin

React Native

import { VendureRelatedProductsPlugin } from '@haus-storefront-react/vendure-plugin-configs/related-products'

// This plugin has no configurable feature/settings payload in init.
const relatedProductsPlugin = VendureRelatedProductsPlugin

Example 2: Consume Plugin Functionality

Use this in recommendation/PDP UI after the plugin has been registered.

React

import { useRelatedProducts } from '@haus-storefront-react/vendure-plugin-configs/related-products'

function RelatedProducts({ productId }: { productId: string }) {
  const { data, isLoading } = useRelatedProducts({ id: productId, take: 8 })
  if (isLoading) return <div>Loading...</div>
  return <div>{Array.isArray(data) ? data.length : 0} products</div>
}

React Native

import { Text } from 'react-native'
import { useRelatedProducts } from '@haus-storefront-react/vendure-plugin-configs/related-products'

function RelatedProducts({ productId }: { productId: string }) {
  const { data, isLoading } = useRelatedProducts({ id: productId, take: 8 })
  if (isLoading) return <Text>Loading...</Text>
  return <Text>{Array.isArray(data) ? data.length : 0} products</Text>
}

---

Made with ❤️ by Haus Tech Team