ShopwareEA

Appearance

Return to top
On this page

useProductConfigurator ​

Definition ​

Composable to change product variant.

Basic usage ​

ts
const { 
 isLoadingOptions,
 getSelectedOptions,
 getOptionGroups,
 handleChange,
 findVariantForSelectedOptions 
} = useProductConfigurator();

Signature ​

ts
export function useProductConfigurator(): UseProductConfiguratorReturn

Return type ​

See UseProductConfiguratorReturn
ts
export type UseProductConfiguratorReturn = {
  /**
   * Handler for action when the selected option is changed
   */
  handleChange(
    attribute: string,
    option: string,
    onChangeHandled: () => void,
  ): Promise<void>;

  findVariantForSelectedOptions(options?: {
    [key: string]: string;
  }): Promise<Product | undefined>;

  /**
   * Indicates if the options are being (re)loaded
   */
  isLoadingOptions: Ref<boolean>;
  /**
   * Object of currently selected options
   */
  getSelectedOptions: ComputedRef<{
    [key: string]: string;
  }>;
  /**
   * All assigned properties which the variant can be made of
   */
  getOptionGroups: ComputedRef<PropertyGroup[]>;
};

Properties ​

NameTypeDescription
isLoadingOptions
Ref<boolean>
Indicates if the options are being (re)loaded
getSelectedOptions
ComputedRef<{
    [key: string]: string;
  }>
Object of currently selected options
getOptionGroups
ComputedRef<Array<PropertyGroup>>
All assigned properties which the variant can be made of

Methods ​

NameTypeDescription
handleChange
Promise<void>
Handler for action when the selected option is changed
findVariantForSelectedOptions
Promise<Product | undefined>