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 = {
  /**
   * Returns product object
   * {@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>
Returns product object{@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