Skip to content
On this page

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,
 regulationPrice 
} = useProductPrice(product);

Signature ​

ts
export function useProductPrice(
  product: Ref<Schemas["Product"]>,
): UseProductPriceReturn 

Parameters ​

NameTypeDescription
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>;
  /**
   * price for products with regulation price
   */
  regulationPrice: ComputedRef<number | undefined>;
};

Properties ​

NameTypeDescription
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
regulationPrice
ComputedRef<number | undefined>
price for products with regulation price

Usage ​

ts
const {
  price,
  unitPrice,
  displayFromVariants,
  displayFrom,
  tierPrices,
  isListPrice,
} = useProductPrice(product);
useProductPrice has loaded