Packages
react
components
ProductPrice

ProductPrice Component

The ProductPrice component renders a Money component with the price information of a product.

Usage

import React from "react";
import { ProductPrice } from "@airsoko/react";
 
const MyComponent = () => {
  const productData = {
    // Product data here
  };
 
  return <ProductPrice data={productData} />;
};
 
export default MyComponent;

Props

NameTypeDefaultDescription
dataProductA partial Storefront API Product object.
priceType'regular' | 'compareAt''regular'The type of price to display. Valid values are 'regular' (default) or 'compareAt'.
valueType'max' | 'min' | 'unit''min'The type of value to display. Valid values are 'max', 'min' (default), or 'unit'.
variantIdstringThe ID of the product variant.

Notes

  • Ensure that the ProductPrice component receives a valid data prop, which should be a partial Product object.
  • The ProductPrice component internally determines the price to display based on the provided props and the type of price ('regular' or 'compareAt').
  • The valueType prop determines whether to display the maximum, minimum, or unit price.
  • The variantId prop can be used to specify a particular variant of the product, if necessary.