💎
Headless Docs
Version 0.2.0
Version 0.2.0
  • Overview
  • Change Log
  • Next.js Steps
    • Requirements
    • Determine Page Methods
      • Route Hashing Method
      • Cookies Method
    • Install Middleware
    • Add Intelligems Provider
    • Read User Context
      • Route Hashing Method
      • Cookies Method
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Gatsby Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Pack Digital Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Examples
    • Content Testing
  • Reference
    • Middleware Objects
      • IgMiddlewareConfig
      • IgMiddlewareHandler
    • Providers
      • Next.js
      • Gatsby
    • Components
      • Price Components
    • Hooks
      • Price Hooks
      • Track Hooks
      • Experiment Hooks
      • Test Group Hooks
      • Cart & Checkout Hooks
Powered by GitBook
On this page
  1. Reference
  2. Components

Price Components

PreviousComponentsNextHooks

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

<IgPrice/> and <IgCompareAtPrice/>

The and <IgCompareAtPrice/>components are recommended as they will color prices throughout your page while in .

The priceFormatter prop may be used to format the returned price for your site.

export interface IgPriceProps {
  className?: string | undefined;
  productId?: string;
  variantId?: string;
  originalPrice: number;
  originalCompareAtPrice?: number;
  currencyCode?: string;
  priceFormatter?: PriceFormatter;
}

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

docs
Integration Mode
<IgPrice/>