Skip to main content

Interface: ProductSliderProps

Defined in: components/ProductSlider.tsx:19

Properties​

addToCartComponent?​

optional addToCartComponent?: ComponentType<AddToCartComponentProps>

Defined in: components/ProductSlider.tsx:143

addToCartLabels?​

optional addToCartLabels?: Record<string, string>

Defined in: components/ProductSlider.tsx:121

  • Label overrides forwarded to the embedded AddToCart component. * Keys: add, adding, addedToCart, outOfStock, noCartId, errorAdding, * modalTitle, quantity, continueShopping, proceedToCheckout

afterAddToCart?​

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

Defined in: components/ProductSlider.tsx:112

Called after every successful add-to-cart. Receives the updated cart and the added item.

Parameters​

cart​

Cart

item?​

CartMainItem

Returns​

void

afterItem?​

optional afterItem?: (item, index) => ReactNode

Defined in: components/ProductSlider.tsx:156

Parameters​

item​

Product | Cluster

index​

number

Returns​

ReactNode

badgesComponent?​

optional badgesComponent?: ComponentType<BadgesComponentProps>

Defined in: components/ProductSlider.tsx:145

beforeItem?​

optional beforeItem?: (item, index) => ReactNode

Defined in: components/ProductSlider.tsx:155

Parameters​

item​

Product | Cluster

index​

number

Returns​

ReactNode

cartId?​

optional cartId?: string

Defined in: components/ProductSlider.tsx:109

ID of an existing cart to add items to.

clusterCardComponent?​

optional clusterCardComponent?: ComponentType<ClusterCardProps>

Defined in: components/ProductSlider.tsx:151

clusterCardLabels?​

optional clusterCardLabels?: Record<string, string>

Defined in: components/ProductSlider.tsx:130

Translated labels forwarded to embedded <ClusterCard> instances.

clusterId?​

optional clusterId?: number

Defined in: components/ProductSlider.tsx:45

Source cluster ID for cross-upsell lookup. Required when crossUpsellTypes is set.

clusterIds?​

optional clusterIds?: number[]

Defined in: components/ProductSlider.tsx:32

Cluster IDs to fetch internally when products is not provided

companyId?​

optional companyId?: number

Defined in: components/ProductSlider.tsx:76

Active company ID from the company switcher. Overrides the user's default company for price calculation in cross-upsell fetches * and is forwarded to each embedded ProductCard / AddToCart. * Triggers a re-fetch when changed.

configuration?​

optional configuration?: any

Defined in: components/ProductSlider.tsx:132

Configuration object providing imageSearchFiltersGrid, imageVariantFiltersMedium, urls

containerClassName?​

optional containerClassName?: string

Defined in: components/ProductSlider.tsx:86

Additional CSS class for the outer container

createCart?​

optional createCart?: boolean

Defined in: components/ProductSlider.tsx:110

Auto-create a cart when none is available. Pair with onCartCreated.

crossUpsellTypes?​

optional crossUpsellTypes?: CrossupsellType[]

Defined in: components/ProductSlider.tsx:39

Cross-upsell types to fetch. When provided, fetches cross-upsells for the given productId/clusterId instead of fetching products by IDs. Values: 'ACCESSORIES' | 'ALTERNATIVES' | 'RELATED' | 'OPTIONS' | 'PARTS'

enableAddFavorite?​

optional enableAddFavorite?: boolean

Defined in: components/ProductSlider.tsx:96

Show a heart-icon favourite toggle on each card. Defaults to false.

favoriteComponent?​

optional favoriteComponent?: ComponentType&lt;FavoriteComponentProps>

Defined in: components/ProductSlider.tsx:146

graphqlClient?​

optional graphqlClient?: GraphQLClient

Defined in: components/ProductSlider.tsx:23

Propeller SDK GraphQL client. Resolved from PropellerProvider when omitted.

imageComponent?​

optional imageComponent?: ComponentType&lt;ImageComponentProps>

Defined in: components/ProductSlider.tsx:144

includeTax?​

optional includeTax?: boolean

Defined in: components/ProductSlider.tsx:59

When true, net price (incl. tax) is the leading price. Forwarded to each ProductCard / ClusterCard.

itemsPerView?​

optional itemsPerView?: object

Defined in: components/ProductSlider.tsx:77

Items visible per breakpoint

desktop?​

optional desktop?: number

Number of items visible on desktop viewports. Defaults to 4.

mobile?​

optional mobile?: number

Number of items visible on mobile viewports.

tablet?​

optional tablet?: number

Number of items visible on tablet viewports.

labels?​

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

Defined in: components/ProductSlider.tsx:133

  • Label overrides for the slider UI. * Available keys: scrollLeft, scrollRight, noProducts, viewCluster, * ACCESSORIES, ALTERNATIVES, RELATED, OPTIONS, PARTS

language?​

optional language?: string

Defined in: components/ProductSlider.tsx:50

Language code for API requests and localized content. Resolved from PropellerProvider when omitted.

onCartCreated?​

optional onCartCreated?: (cart) => void

Defined in: components/ProductSlider.tsx:111

Called after AddToCart creates a new cart internally.

Parameters​

cart​

Cart

Returns​

void

onClusterClick?​

optional onClusterClick?: (cluster) => void

Defined in: components/ProductSlider.tsx:104

Called when a cluster card is clicked — use for SPA-style routing.

Parameters​

cluster​

Cluster

Returns​

void

onProceedToCheckout?​

optional onProceedToCheckout?: () => void

Defined in: components/ProductSlider.tsx:117

Called when "Proceed to checkout" is clicked in the AddToCart modal.

Returns​

void

onProductClick?​

optional onProductClick?: (product) => void

Defined in: components/ProductSlider.tsx:101

Called when a product card is clicked — use for SPA-style routing.

Parameters​

product​

Product

Returns​

void

onRequestQuoteClick?​

optional onRequestQuoteClick?: (cart) => void

Defined in: components/ProductSlider.tsx:118

Called when "Request a Quote" is clicked in the AddToCart modal.

Parameters​

cart​

Cart

Returns​

void

onToggleFavorite?​

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

Defined in: components/ProductSlider.tsx:97

  • Called when a favourite is toggled on any card. * Receives the full Product or Cluster object and the new favourite state.

Parameters​

item​

Product | Cluster

isFavorite​

boolean

Returns​

void

portalMode?​

optional portalMode?: string

Defined in: components/ProductSlider.tsx:69

Controls portal visibility mode. 'open' — AddToCart is shown on product cards. 'semi-closed' — AddToCart is hidden (catalog-only view). Defaults to 'open'.

priceComponent?​

optional priceComponent?: ComponentType&lt;PriceComponentProps>

Defined in: components/ProductSlider.tsx:141

priceLabels?​

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

Defined in: components/ProductSlider.tsx:95

Translated labels forwarded to the embedded <ProductPrice> display inside each <ProductCard>. See ProductPriceProps.labels for slugs.

productCardComponent?​

optional productCardComponent?: ComponentType&lt;ProductCardProps>

Defined in: components/ProductSlider.tsx:150

productCardLabels?​

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

Defined in: components/ProductSlider.tsx:127

Translated labels forwarded to embedded <ProductCard> instances.

productId?​

optional productId?: number

Defined in: components/ProductSlider.tsx:42

Source product ID for cross-upsell lookup. Required when crossUpsellTypes is set.

productIds?​

optional productIds?: number[]

Defined in: components/ProductSlider.tsx:29

Product IDs to fetch internally when products is not provided

products?​

optional products?: (Product | Cluster)[]

Defined in: components/ProductSlider.tsx:26

Pre-loaded products or clusters to display. When provided, skips internal fetching.

showAvailability?​

optional showAvailability?: boolean

Defined in: components/ProductSlider.tsx:88

  • Show only the availability indicator (Available / Not available) inside the stock widget. * Forwarded to ProductCard.showAvailability. * Defaults to true.

showIncrDecr?​

optional showIncrDecr?: boolean

Defined in: components/ProductSlider.tsx:108

Show increment/decrement stepper buttons in AddToCart. Defaults to true.

showModal?​

optional showModal?: boolean

Defined in: components/ProductSlider.tsx:116

  • When true, AddToCart shows a success modal instead of a toast. * Defaults to false.

showStock?​

optional showStock?: boolean

Defined in: components/ProductSlider.tsx:87

  • Show the stock / availability widget on each product card. * Forwarded to ProductCard.showStock. * Defaults to false.

stockComponent?​

optional stockComponent?: ComponentType&lt;StockComponentProps>

Defined in: components/ProductSlider.tsx:142

stockLabels?​

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

Defined in: components/ProductSlider.tsx:89

  • Label overrides forwarded to the embedded ItemStock component inside each card. * Keys: inStock, outOfStock, lowStock, available, notAvailable, pieces

stockValidation?​

optional stockValidation?: boolean

Defined in: components/ProductSlider.tsx:107

Validate stock before adding to cart. Defaults to false.

taxZone​

taxZone: string

Defined in: components/ProductSlider.tsx:53

Tax zone for price calculations

title?​

optional title?: string

Defined in: components/ProductSlider.tsx:85

Slider title displayed above the track

user?​

optional user?: Contact | Customer | null

Defined in: components/ProductSlider.tsx:72

Authenticated user for cart operations