Product Variant Specifications Plugin

Storefront plugin config for loading custom field specifications on product variants.

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 to expose key/value specification data from variant custom fields for product detail experiences.

Features

• Extends product variant queries with customFields.specifications
• Exposes VendureProductVariantSpecificationsPlugin for DataProvider pluginConfigs
• Exposes ProductVariantSpecification type

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

• VendureProductVariantSpecificationsPlugin
• ProductVariantSpecification type

Basic Usage

Example 1: Register Plugin in Data Provider

Use this to register the product-variant-specifications plugin in your provider pluginConfigs.

React

import { VendureProductVariantSpecificationsPlugin } from '@haus-storefront-react/vendure-plugin-configs/product-variant-specifications'

const specsPlugin = VendureProductVariantSpecificationsPlugin

React Native

import { Text } from 'react-native'
import { VendureProductVariantSpecificationsPlugin } from '@haus-storefront-react/vendure-plugin-configs/product-variant-specifications'

const specsPlugin = VendureProductVariantSpecificationsPlugin

Example 2: Consume Plugin Functionality

Use this in product detail UI after the plugin has been registered.

React

export function VariantSpecificationRow({ specification }) {
  return (
    <p>
      {specification.key}: {specification.value}
    </p>
  )
}

React Native

import { Text } from 'react-native'

export function VariantSpecificationRow({ specification }) {
  return (
    <Text>
      {specification.key}: {specification.value}
    </Text>
  )
}

---

Made with ❤️ by Haus Tech Team