Skip to main content

Interface: ProductCardProps

Defined in: components/ProductCard.tsx:54

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:257

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

addToCartLabels?​

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

Defined in: components/ProductCard.tsx:241

Label overrides forwarded to the embedded AddToCart component.

afterAddToCart?​

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

Defined in: components/ProductCard.tsx:225

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:116

Show the AddToCart component. Defaults to true.

allowIncrDecr?​

optional allowIncrDecr?: boolean

Defined in: components/ProductCard.tsx:229

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

badgesComponent?​

optional badgesComponent?: ComponentType&lt;BadgesComponentProps>

Defined in: components/ProductCard.tsx:261

Replaces the default product badges block. Receives BadgesComponentProps.

belowName?​

optional belowName?: (product) => ReactNode

Defined in: components/ProductCard.tsx:272

Render arbitrary content directly below the product name (and above the short description / price), in both the grid and row layouts. Receives the product so hosts can surface extra info — e.g. package descriptions, custom badges — without forking the card. Return null/undefined to render nothing for a given product.

Parameters​

product​

Product

Returns​

ReactNode

cartId?​

optional cartId?: string

Defined in: components/ProductCard.tsx:199

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

childItems?​

optional childItems?: number[]

Defined in: components/ProductCard.tsx:205

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

children?​

optional children?: ReactNode

Defined in: components/ProductCard.tsx:73

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:170

Extra CSS class applied to the root element.

clusterId?​

optional clusterId?: number

Defined in: components/ProductCard.tsx:203

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

columns?​

optional columns?: number

Defined in: components/ProductCard.tsx:167

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

companyId?​

optional companyId?: number

Defined in: components/ProductCard.tsx:235

Active company ID from the company switcher.

configuration?​

optional configuration?: any

Defined in: components/ProductCard.tsx:201

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

createCart?​

optional createCart?: boolean

Defined in: components/ProductCard.tsx:211

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

currency?​

optional currency?: string

Defined in: components/ProductCard.tsx:251

Currency symbol used when formatting the price. Falls back to PropellerInfra.currency, then '€'.

enableAddFavorite?​

optional enableAddFavorite?: boolean

Defined in: components/ProductCard.tsx:146

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

enableStockValidation?​

optional enableStockValidation?: boolean

Defined in: components/ProductCard.tsx:231

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

favoriteComponent?​

optional favoriteComponent?: ComponentType&lt;FavoriteComponentProps>

Defined in: components/ProductCard.tsx:263

Replaces the default favorite-toggle. Receives FavoriteComponentProps.

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/ProductCard.tsx:183

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

imageComponent?​

optional imageComponent?: ComponentType&lt;ImageComponentProps>

Defined in: components/ProductCard.tsx:259

Replaces the default product image block. Receives ImageComponentProps.

imageLabels?​

optional imageLabels?: string[]

Defined in: components/ProductCard.tsx:130

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:162

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:141

Override any UI string. Keys: addToFavorites, removeFromFavorites

language?​

optional language?: string

Defined in: components/ProductCard.tsx:233

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

notes?​

optional notes?: string

Defined in: components/ProductCard.tsx:207

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:215

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:213

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

Parameters​

cart​

Cart

Returns​

void

onLoginClick?​

optional onLoginClick?: () => void

Defined in: components/ProductCard.tsx:197

Invoked when an anonymous visitor clicks the log-in action that replaces add-to-cart in a semi-closed portal. The host owns navigation.

Returns​

void

onProceedToCheckout?​

optional onProceedToCheckout?: () => void

Defined in: components/ProductCard.tsx:237

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

Returns​

void

onProductClick?​

optional onProductClick?: (product) => void

Defined in: components/ProductCard.tsx:157

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:239

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:149

Called whenever the favourite state is toggled.

Parameters​

product​

Product

isFavorite​

boolean

Returns​

void

portalMode?​

optional portalMode?: string

Defined in: components/ProductCard.tsx:192

Portal access mode — 'open' / 'semi-closed' / 'closed'. Resolved from PropellerProvider when omitted. In 'semi-closed' the card hides price and stock from anonymous visitors and offers a log-in action in place of add-to-cart; signed-in users are unaffected.

price?​

optional price?: number

Defined in: components/ProductCard.tsx:209

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

priceComponent?​

optional priceComponent?: ComponentType&lt;PriceComponentProps>

Defined in: components/ProductCard.tsx:253

priceLabels?​

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

Defined in: components/ProductCard.tsx:244

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

product​

product: Product

Defined in: components/ProductCard.tsx:58

The product object to display

showAvailability?​

optional showAvailability?: boolean

Defined in: components/ProductCard.tsx:104

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:81

Show the product image. Defaults to true.

showManufacturer?​

optional showManufacturer?: boolean

Defined in: components/ProductCard.tsx:90

Show the product manufacturer. Defaults to false.

showModal?​

optional showModal?: boolean

Defined in: components/ProductCard.tsx:227

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

showName?​

optional showName?: boolean

Defined in: components/ProductCard.tsx:78

Show the product name. Defaults to true.

showPrice?​

optional showPrice?: boolean

Defined in: components/ProductCard.tsx:110

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

showShortDescription?​

optional showShortDescription?: boolean

Defined in: components/ProductCard.tsx:84

Show the product short description. Defaults to false.

showSku?​

optional showSku?: boolean

Defined in: components/ProductCard.tsx:87

Show the product SKU. Defaults to true.

showStock?​

optional showStock?: boolean

Defined in: components/ProductCard.tsx:97

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:255

Replaces the default stock/availability block. Receives StockComponentProps.

stockLabels?​

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

Defined in: components/ProductCard.tsx:122

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

textLabels?​

optional textLabels?: string[]

Defined in: components/ProductCard.tsx:136

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:177

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:185

Authenticated user. Resolved from PropellerProvider when omitted.