Appearance
useProductPrice
Definition
The purpose of the useProductPrice function is to abstract the logic to expose most useful helpers for price displaying.
Basic usage
ts
const {
price,
totalPrice,
unitPrice,
referencePrice,
displayFrom,
displayFromVariants,
tierPrices,
isListPrice
} = useProductPrice(product);
Signature
ts
export function useProductPrice(product: Ref<Product>): UseProductPriceReturn
Parameters
| Name | Type | Description |
|---|---|---|
| product | Ref<Product> |
Return type
See UseProductPriceReturn
ts
export type UseProductPriceReturn = {
/**
* Whole calculated price object
*/
price: ComputedRef<CalculatedPrice | undefined>;
/**
* Calculated price value for one selling unit
*/
totalPrice: ComputedRef<number | undefined>;
/**
* Current unit price value
*/
unitPrice: ComputedRef<number | undefined>;
/**
* Can be used if isListPrice is set to true
*/
referencePrice: ComputedRef<ReferencePrice | undefined>;
/**
* determines if `price` contains the minimum tier price
*/
displayFrom: ComputedRef<boolean>;
/**
* cheapest price value for a variant if exists
*/
displayFromVariants: ComputedRef<number | false | undefined>;
/**
* array of TierPrice object
*/
tierPrices: ComputedRef<TierPrice[]>;
/**
* determines whether a discount price is set
*/
isListPrice: ComputedRef<boolean>;
};
Properties
| Name | Type | Description |
|---|---|---|
| price | ComputedRef<CalculatedPrice | undefined> | Whole calculated price object |
| totalPrice | ComputedRef<number | undefined> | Calculated price value for one selling unit |
| unitPrice | ComputedRef<number | undefined> | Current unit price value |
| referencePrice | ComputedRef<ReferencePrice | undefined> | Can be used if isListPrice is set to true |
| displayFrom | ComputedRef<boolean> | determines if `price` contains the minimum tier price |
| displayFromVariants | ComputedRef<number | | undefined> | cheapest price value for a variant if exists |
| tierPrices | ComputedRef<Array<TierPrice>> | array of TierPrice object |
| isListPrice | ComputedRef<boolean> | determines whether a discount price is set |
Usage
ts
const {
price,
unitPrice,
displayFromVariants,
displayFrom,
tierPrices,
isListPrice,
} = useProductPrice(product);