Skip to main content

Interface: ProductCardProps

Defined in: components/ProductCard.tsx:47

Props for the root <ProductCard> (and the back-compat monolithic variant). Most fields are display toggles preserved for back-compat; in the new compound API, consumers control rendering by composition instead — see the Subcomponents section below.

Properties​

addToCartComponent?​

optional addToCartComponent?: ComponentType&lt;AddToCartComponentProps>

Defined in: components/ProductCard.tsx:235

Replaces the default add-to-cart control. Receives AddToCartComponentProps.

addToCartLabels?​

optional addToCartLabels?: Record&lt;string, string>

Defined in: components/ProductCard.tsx:222

Label overrides forwarded to the embedded AddToCart component.

afterAddToCart?​

optional afterAddToCart?: (cart, item?) => void

Defined in: components/ProductCard.tsx:206

Fires after an item has been added to the cart.

Parameters​

cart​

Cart

item?​

CartMainItem

Returns​

void

allowAddToCart?​

optional allowAddToCart?: boolean

Defined in: components/ProductCard.tsx:109

Show the AddToCart component. Defaults to true.

allowIncrDecr?​

optional allowIncrDecr?: boolean

Defined in: components/ProductCard.tsx:210

When true, the AddToCart shows quantity increment/decrement controls.

badgesComponent?​

optional badgesComponent?: ComponentType&lt;BadgesComponentProps>

Defined in: components/ProductCard.tsx:239

Replaces the default product badges block. Receives BadgesComponentProps.

cartId?​

optional cartId?: string

Defined in: components/ProductCard.tsx:180

ID of the cart that add-to-cart targets.

childItems?​

optional childItems?: number[]

Defined in: components/ProductCard.tsx:186

Pre-selected child item product IDs added alongside the product.

children?​

optional children?: ReactNode

Defined in: components/ProductCard.tsx:66

Compound API: provide subcomponents as children. When omitted, the monolithic legacy layout renders based on the show

className?​

optional className?: string

Defined in: components/ProductCard.tsx:163

Extra CSS class applied to the root element.

clusterId?​

optional clusterId?: number

Defined in: components/ProductCard.tsx:184

Cluster ID when this card represents a variant of a product cluster.

columns?​

optional columns?: number

Defined in: components/ProductCard.tsx:160

Number of grid columns — when 1 the card renders as a compact horizontal row.

companyId?​

optional companyId?: number

Defined in: components/ProductCard.tsx:216

Active company ID from the company switcher.

configuration?​

optional configuration?: any

Defined in: components/ProductCard.tsx:182

Configuration object (URL builders, image filters, etc.).

createCart?​

optional createCart?: boolean

Defined in: components/ProductCard.tsx:192

When true, a new cart is created if no cartId is set.

enableAddFavorite?​

optional enableAddFavorite?: boolean

Defined in: components/ProductCard.tsx:139

Renders a heart-icon toggle button on the product image. Defaults to false.

enableStockValidation?​

optional enableStockValidation?: boolean

Defined in: components/ProductCard.tsx:212

When true, stock availability is validated before adding to cart.

favoriteComponent?​

optional favoriteComponent?: ComponentType&lt;FavoriteComponentProps>

Defined in: components/ProductCard.tsx:241

Replaces the default favorite-toggle. Receives FavoriteComponentProps.

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/ProductCard.tsx:176

GraphQL client for the embedded AddToCart. Resolved from PropellerProvider when omitted.

imageComponent?​

optional imageComponent?: ComponentType&lt;ImageComponentProps>

Defined in: components/ProductCard.tsx:237

Replaces the default product image block. Receives ImageComponentProps.

imageLabels?​

optional imageLabels?: string[]

Defined in: components/ProductCard.tsx:123

Attribute codes/names to look up and display as badge overlays on the product image. Example: ['new', 'sale']

includeTax?​

optional includeTax?: boolean

Defined in: components/ProductCard.tsx:155

When true, tax-inclusive (net) price is the leading price. Defaults to false.

labels?​

optional labels?: Record&lt;string, string>

Defined in: components/ProductCard.tsx:134

Override any UI string. Keys: addToFavorites, removeFromFavorites

language?​

optional language?: string

Defined in: components/ProductCard.tsx:214

Language code for localised content. Resolved from PropellerProvider when omitted.

notes?​

optional notes?: string

Defined in: components/ProductCard.tsx:188

Order-line notes forwarded with the add-to-cart request.

onAddToCart?​

optional onAddToCart?: (product, clusterId?, quantity?, childItems?, notes?, price?, showModal?) => Cart

Defined in: components/ProductCard.tsx:196

Delegation handler — when provided, the parent performs the add-to-cart itself.

Parameters​

product​

Product

clusterId?​

number

quantity?​

number

childItems?​

CartChildItemInput[]

notes?​

string

price?​

number

showModal?​

boolean

Returns​

Cart

onCartCreated?​

optional onCartCreated?: (cart) => void

Defined in: components/ProductCard.tsx:194

Fires when add-to-cart creates a new cart.

Parameters​

cart​

Cart

Returns​

void

onProceedToCheckout?​

optional onProceedToCheckout?: () => void

Defined in: components/ProductCard.tsx:218

Fires when the "Proceed to checkout" modal button is clicked.

Returns​

void

onProductClick?​

optional onProductClick?: (product) => void

Defined in: components/ProductCard.tsx:150

Called when the product name or image is clicked. When provided, the default <a> navigation is prevented.

Parameters​

product​

Product

Returns​

void

onRequestQuoteClick?​

optional onRequestQuoteClick?: (cart) => void

Defined in: components/ProductCard.tsx:220

Fires when the user requests a quote from the AddToCart modal.

Parameters​

cart​

Cart

Returns​

void

onToggleFavorite?​

optional onToggleFavorite?: (product, isFavorite) => void

Defined in: components/ProductCard.tsx:142

Called whenever the favourite state is toggled.

Parameters​

product​

Product

isFavorite​

boolean

Returns​

void

price?​

optional price?: number

Defined in: components/ProductCard.tsx:190

Custom price override forwarded with the add-to-cart request.

priceComponent?​

optional priceComponent?: ComponentType&lt;PriceComponentProps>

Defined in: components/ProductCard.tsx:231

Replaces the default price block. Receives PriceComponentProps.

priceLabels?​

optional priceLabels?: Record&lt;string, string>

Defined in: components/ProductCard.tsx:225

Translated labels forwarded to the embedded <ProductPrice> display. See ProductPriceProps.labels for slugs (inclTax, exclTax, loginToSeePrices).

product​

product: Product

Defined in: components/ProductCard.tsx:51

The product object to display

showAvailability?​

optional showAvailability?: boolean

Defined in: components/ProductCard.tsx:97

Show only the availability indicator (Available / Not available) inside ItemStock. Only relevant when showStock is true. Defaults to true.

showImage?​

optional showImage?: boolean

Defined in: components/ProductCard.tsx:74

Show the product image. Defaults to true.

showManufacturer?​

optional showManufacturer?: boolean

Defined in: components/ProductCard.tsx:83

Show the product manufacturer. Defaults to false.

showModal?​

optional showModal?: boolean

Defined in: components/ProductCard.tsx:208

When true, show a confirmation modal after add-to-cart instead of a toast.

showName?​

optional showName?: boolean

Defined in: components/ProductCard.tsx:71

Show the product name. Defaults to true.

showPrice?​

optional showPrice?: boolean

Defined in: components/ProductCard.tsx:103

Show the price below the product name. Defaults to true.

showShortDescription?​

optional showShortDescription?: boolean

Defined in: components/ProductCard.tsx:77

Show the product short description. Defaults to false.

showSku?​

optional showSku?: boolean

Defined in: components/ProductCard.tsx:80

Show the product SKU. Defaults to true.

showStock?​

optional showStock?: boolean

Defined in: components/ProductCard.tsx:90

Show the stock / availability widget below the product name. Uses the embedded ItemStock component driven by product.inventory. Defaults to false.

stockComponent?​

optional stockComponent?: ComponentType&lt;StockComponentProps>

Defined in: components/ProductCard.tsx:233

Replaces the default stock/availability block. Receives StockComponentProps.

stockLabels?​

optional stockLabels?: Record&lt;string, string>

Defined in: components/ProductCard.tsx:115

Label overrides forwarded to the embedded ItemStock component. Keys: inStock, outOfStock, lowStock, available, notAvailable, pieces

textLabels?​

optional textLabels?: string[]

Defined in: components/ProductCard.tsx:129

Attribute codes/names to look up and display as extra text rows below the product name. Example: ['brand', 'color']

urlPattern?​

optional urlPattern?: string

Defined in: components/ProductCard.tsx:170

URL pattern controlling which segments appear in product links. Tokens: page → 'product', id → productId, slug → slug value. Defaults to 'page/id/slug'.

user?​

optional user?: Contact | Customer | null

Defined in: components/ProductCard.tsx:178

Authenticated user. Resolved from PropellerProvider when omitted.