Skip to content
On this page

useProduct

Definition

Composable for product management.

Basic usage

ts
const { 
 product,
 configurator,
 changeVariant 
} = useProduct(product, configurator);

Signature

ts
export function useProduct(
  product?: Ref<Product> | Product,
  configurator?: Ref<PropertyGroup[]> | PropertyGroup[],
): UseProductReturn 

Parameters

NameTypeDescription
product
Ref<Product> | Product
configurator
Ref<Array<PropertyGroup>> | Array<PropertyGroup>

Return type

See UseProductReturn
ts
export type UseProductReturn = {
  /**
   * {@link Product} object
   */
  product: ComputedRef<Product>;
  /**
   * {@link PropertyGroup} array that defines the product possible configurations
   */
  configurator: ComputedRef<PropertyGroup[]>;
  /**
   * Merges the current product with the new variant data
   * @param variant - {@link Product} object with the new variant data
   */
  changeVariant(variant: Partial<Product>): void;
};

Properties

NameTypeDescription
product
ComputedRef<Product>
{@link Product} object
configurator
ComputedRef<Array<PropertyGroup>>
{@link PropertyGroup} array that defines the product possible configurations

Methods

NameTypeDescription
changeVariant
void
Merges the current product with the new variant data
useProduct has loaded