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
| Name | Type | Description |
|---|---|---|
| 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
| Name | Type | Description |
|---|---|---|
| handleChange | Promise<void> | Handler for action when the selected option is changed |
| findVariantForSelectedOptions | Promise<Product | undefined> |