Package Size Plugin

Storefront plugin config for querying and using packageSize across product and order flows.

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 quantity logic or merchandising UI needs package-size metadata on variants.

Features

• Extends product, brief product, and order-related queries with packageSize
• Exposes VendurePackageSizePlugin for DataProvider pluginConfigs
• Provides feature-flag contracts via PackageSizeFeatures

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

• VendurePackageSizePlugin
• PackageSizeFeatures type

Basic Usage

Example 1: Register Plugin in Data Provider

Use this to configure and register the package-size plugin in your provider pluginConfigs.

React

import { VendurePackageSizePlugin } from '@haus-storefront-react/vendure-plugin-configs/packagesize'

const packageSizePlugin = VendurePackageSizePlugin.init({
  enableFeatures: {
    showPackageSize: true,
    changeQuantityByPackageSize: true,
    showCostPerPackage: true,
  },
})

React Native

import { Text } from 'react-native'
import { VendurePackageSizePlugin } from '@haus-storefront-react/vendure-plugin-configs/packagesize'

const packageSizePlugin = VendurePackageSizePlugin.init({
  enableFeatures: {
    showPackageSize: true,
    changeQuantityByPackageSize: true,
    showCostPerPackage: true,
  },
})

Example 2: Consume Plugin Functionality

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

React

export function PackageSizeValue({ variant }) {
  return <span>{variant.packageSize}</span>
}

React Native

import { Text } from 'react-native'

export function PackageSizeValue({ variant }) {
  return <Text>{variant.packageSize}</Text>
}

---

Made with ❤️ by Haus Tech Team