Developers
Start building
Themes/Theme SDK/Modules/listing/Types: ProductCard to ProductCardSpecsProps

Types: ProductCard to ProductCardSpecsProps

The types of @poltura/theme-sdk/listing, ProductCard to ProductCardSpecsProps.

On this page
import { … } from '@poltura/theme-sdk/listing';

ProductCard (type)

A product as a list, rail or search result shows it.

idrequiredstring

The product's id.

handlerequiredstring

The product's URL segment.

hrefrequiredstring

The product page's path.

titlerequiredstring

The product's title.

shortTitlerequiredstring | null

A shorter title for tight cards, or null to use `title`.

categoryLabelrequiredstring | null

The name of the product's main category, or null.

categoryPathrequiredreadonly string[]

The URL segments of the product's deepest category, root first.

collectionrequiredCollectionRef | null

The collection the product is in, or null.

skurequiredstring | null

The stock keeping unit of the variant the card shows, or null.

imagerequiredMediaImageRef | null

The card image, or null.

secondaryImagerequiredMediaImageRef | null

The image shown on hover, or null.

pricerequiredPriceView

The price of the variant the card shows.

priceRangerequiredPriceBounds | null

The lowest and highest variant prices, or null when every variant costs the same.

availabilityrequiredAvailability

Whether and how the shown variant can be bought.

defaultVariantIdrequiredstring | null

The variant a quick add puts in the cart, or null when the shopper must choose.

requiresVariantSelectionrequiredboolean

Whether the shopper must pick options on the product page before buying.

badgerequiredstring | null

The merchant's card badge, or null.

specsrequiredreadonly Spec[]

The attributes the store shows on cards, such as a game's platform; empty when none apply.

badgesrequiredreadonly ProductBadge[]

The badges the product shows, in the merchant's order; empty when none apply.

ratingrequiredRatingStats | null

The review score, or null.

fixedBundlerequiredBundleRef | null

The fixed bundle the card sells, or null.

FilterOptionProps

Props of FilterOption.

groupIdrequiredstring

The group the option belongs to; it keeps the checkbox ids unique.

optionrequiredFilterOptionView

The option to draw, with its nested choices.

onTogglerequired(optionId: string) => void

Called when the shopper ticks or unticks the option or one of its nested choices.

levelnumber

How deep the option is nested; 0 at the top.

classNamestring

Classes added to the option's row.

SwatchFilterProps

Props of SwatchFilter.

grouprequiredFilterGroupView

A swatch group.

onTogglerequired(optionId: string) => void

Called when the shopper picks or unpicks a swatch.

classNamestring

Classes added to the swatch list.

PriceRangeFilterProps

Props of PriceRangeFilter.

grouprequiredFilterGroupView

A price group; other kinds draw nothing.

onChangerequired(range: PriceRangeSelection) => void

Called a moment after the shopper stops moving the range; both bounds are null when it covers every price.

classNamestring

Classes added to the range control.

FilterGroupProps

Props of FilterGroup.

grouprequiredFilterGroupView

The group to draw.

onTogglerequired(optionId: string) => void

Called when the shopper picks or unpicks a choice of a list, swatch or toggle group.

onPriceChangerequired(range: PriceRangeSelection) => void

Called when the shopper changes a price group's range.

classNamestring

Classes added to the group.

AppliedFiltersClassKey

The parts of AppliedFilters its classes prop styles.

type AppliedFiltersClassKey = 'chip' | 'remove' | 'clear'

AppliedFiltersProps

Props of AppliedFilters.

filtersrequiredreadonly AppliedFilter[]

The applied filters, as {@link useListingFilters} lists them.

onClear() => void

Called by the "clear all" link; without it the link is not shown.

classNamestring

Classes added to the chip row.

classesPartial<Record<AppliedFiltersClassKey, string>>

Classes added to the chips, their remove buttons and the "clear all" link.

FilterPanelProps

Props of FilterPanel.

variant'card' | 'plain'

A card with a title, a scrolling group list and a selection note, or the bare group list for a sheet.

classNamestring

Classes added to the panel.

FilterSheetProps

Props of FilterSheet.

resultCountrequirednumber

How many products match, for the sheet's "show results" button.

labelstring

The button and sheet title; defaults to the store's "Filters" wording.

clearLabelstring

The "clear all" button's text; defaults to the store's wording.

classNamestring

Classes added to the button that opens the sheet.

SortSelectProps

Props of SortSelect.

optionsrequiredreadonly SortOption[]

The orders on offer.

selectedrequiredProductSort

The current order.

onChangerequired(sort: ProductSort) => void

Called with the order the shopper picked.

classNamestring

Classes added to the menu button's wrapper.

ListingPaginationProps

Props of ListingPagination.

paginationrequiredPagination

Where the list is.

onPageChangerequired(page: number) => void

Called with the page the shopper opened.

siblingsnumber

How many pages show on each side of the current one before the rest collapse; defaults to 1.

busyboolean

Dims and disables the buttons while a page loads.

classNamestring

Classes added to the navigation.

ProductCardLayout

Whether a card is a tile in a grid or a wide row in a list.

type ProductCardLayout = 'grid' | 'list'

ProductCardVisibility

Which parts of a product card are shown; every part is on unless switched off.

pricerequiredboolean

The price.

compareAtrequiredboolean

The struck-through price before a markdown.

badgerequiredboolean

The merchant's card badge.

addToCartrequiredboolean

The add-to-cart button.

ProductCardLabels

The button texts of a product card; each falls back to the store's own wording.

addToCartstring

The add-to-cart button.

addingstring

The button while the product is being added.

selectOptionsstring

The button of a product whose options are chosen on its page.

soldOutstring

The button of a product that cannot be bought.

ProductCardProps

Props of ProductCard.

cardrequiredProductCardView

The product to show.

layoutProductCardLayout

A grid tile or a list row; defaults to `grid`.

showPartial<ProductCardVisibility>

Parts to switch off.

imageAspectRatiostring

The image's CSS aspect ratio in a grid, such as `3 / 4`; defaults to `3 / 4`.

labelsProductCardLabels

Button texts.

onAddToCart(card: ProductCardView) => void

Replaces the built-in quick add.

busyboolean

Shows the button as adding; only read with `onAddToCart`.

errorstring | null

An error under the button; only read with `onAddToCart`.

classNamestring

Classes added to the card.

ProductCardSkeletonProps

Props of ProductCardSkeleton.

classNamestring

Classes added to the placeholder.

ProductCardBadgeProps

Props of ProductCardBadge.

cardrequiredProductCardView

The card whose badge to show.

classNamestring

Classes added to the badge.

ProductCardSpecsProps

Props of ProductCardSpecs.

cardrequiredProductCardView

The card whose attribute values to show.

maxnumber

How many values show before a "+N" chip; 2 when omitted.

classNamestring

Classes added to the row of chips.

Last updated