Price Components

These components use useIgPrices() internally. See docs for details on price-return logic.

<IgPrice/> and <IgCompareAtPrice/>

The <IgPrice/> and <IgCompareAtPrice/> components are recommended when you want a drop-in replacement for storefront prices. They automatically pick the active test group pricing (when available) and apply Integration Mode styling.

The priceFormatter prop may be used to format the returned price for your site (for example, to add localized currency formatting).

export type PriceFormatter = (value: number, currencyCode?: string) => string;

export interface IgBasePriceProps {
  className?: string;
  productId?: string;
  variantId?: string;
  currencyCode?: string;
  priceFormatter?: PriceFormatter;
}

export interface IgPriceProps extends IgBasePriceProps {
  originalPrice: number | string;
}

export interface IgCompareAtPriceProps extends IgBasePriceProps {
  originalCompareAtPrice?: number | string;
}

<IgBasePrice/>

Lower-level component that renders from an existing useIgPrices() return value. This powers <IgPrice/> and <IgCompareAtPrice/>.

import type { PriceFormatter, UseIgPricesReturn } from "@intelligems/headless";

type IgBasePriceProps = {
  className?: string;
  igPrices: UseIgPricesReturn;
  isCompareAtPrice: boolean;
  priceFormatter?: PriceFormatter;
};

<Price/>

Lowest-level price renderer used by <IgBasePrice/>.

import type {
  IgPriceReturn,
  PriceFormat,
  PriceFormatter,
} from "@intelligems/headless";

export interface PriceProps {
  isIgPrice: boolean;
  igPrice?: IgPriceReturn;
  priceFormat: PriceFormat;
  priceFormatter?: PriceFormatter;
  integration?: boolean;
  className?: string;
  isCompareAtPrice: boolean;
}