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<Schemas["Product"]>,
): UseProductPriceReturn
Parameters ​
Name | Type | Description |
---|---|---|
product | Ref<> |
Return type ​
See UseProductPriceReturn
ts
export type UseProductPriceReturn = {
/**
* Whole calculated price object
*/
price: ComputedRef<Schemas["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<
Schemas["CalculatedPrice"]["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< | 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< | 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);