Types: ProductCard to ProductCardSpecsProps
The types of @poltura/theme-sdk/listing, ProductCard to ProductCardSpecsProps.
Ezen az oldalon
import { … } from '@poltura/theme-sdk/listing';ProductCard (type)
A product as a list, rail or search result shows it.
idrequiredstringThe product's id.
handlerequiredstringThe product's URL segment.
hrefrequiredstringThe product page's path.
titlerequiredstringThe product's title.
shortTitlerequiredstring | nullA shorter title for tight cards, or null to use `title`.
categoryLabelrequiredstring | nullThe name of the product's main category, or null.
categoryPathrequiredreadonly string[]The URL segments of the product's deepest category, root first.
collectionrequiredCollectionRef | nullThe collection the product is in, or null.
skurequiredstring | nullThe stock keeping unit of the variant the card shows, or null.
imagerequiredMediaImageRef | nullThe card image, or null.
secondaryImagerequiredMediaImageRef | nullThe image shown on hover, or null.
pricerequiredPriceViewThe price of the variant the card shows.
priceRangerequiredPriceBounds | nullThe lowest and highest variant prices, or null when every variant costs the same.
availabilityrequiredAvailabilityWhether and how the shown variant can be bought.
defaultVariantIdrequiredstring | nullThe variant a quick add puts in the cart, or null when the shopper must choose.
requiresVariantSelectionrequiredbooleanWhether the shopper must pick options on the product page before buying.
badgerequiredstring | nullThe 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 | nullThe review score, or null.
fixedBundlerequiredBundleRef | nullThe fixed bundle the card sells, or null.
FilterOptionProps
Props of FilterOption.
groupIdrequiredstringThe group the option belongs to; it keeps the checkbox ids unique.
optionrequiredFilterOptionViewThe option to draw, with its nested choices.
onTogglerequired(optionId: string) => voidCalled when the shopper ticks or unticks the option or one of its nested choices.
levelnumberHow deep the option is nested; 0 at the top.
classNamestringClasses added to the option's row.
SwatchFilterProps
Props of SwatchFilter.
grouprequiredFilterGroupViewA swatch group.
onTogglerequired(optionId: string) => voidCalled when the shopper picks or unpicks a swatch.
classNamestringClasses added to the swatch list.
PriceRangeFilterProps
Props of PriceRangeFilter.
grouprequiredFilterGroupViewA price group; other kinds draw nothing.
onChangerequired(range: PriceRangeSelection) => voidCalled a moment after the shopper stops moving the range; both bounds are null when it covers every price.
classNamestringClasses added to the range control.
FilterGroupProps
Props of FilterGroup.
grouprequiredFilterGroupViewThe group to draw.
onTogglerequired(optionId: string) => voidCalled when the shopper picks or unpicks a choice of a list, swatch or toggle group.
onPriceChangerequired(range: PriceRangeSelection) => voidCalled when the shopper changes a price group's range.
classNamestringClasses 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() => voidCalled by the "clear all" link; without it the link is not shown.
classNamestringClasses 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.
classNamestringClasses added to the panel.
FilterSheetProps
Props of FilterSheet.
resultCountrequirednumberHow many products match, for the sheet's "show results" button.
labelstringThe button and sheet title; defaults to the store's "Filters" wording.
clearLabelstringThe "clear all" button's text; defaults to the store's wording.
classNamestringClasses added to the button that opens the sheet.
SortSelectProps
Props of SortSelect.
optionsrequiredreadonly SortOption[]The orders on offer.
selectedrequiredProductSortThe current order.
onChangerequired(sort: ProductSort) => voidCalled with the order the shopper picked.
classNamestringClasses added to the menu button's wrapper.
ListingPaginationProps
Props of ListingPagination.
paginationrequiredPaginationWhere the list is.
onPageChangerequired(page: number) => voidCalled with the page the shopper opened.
siblingsnumberHow many pages show on each side of the current one before the rest collapse; defaults to 1.
busybooleanDims and disables the buttons while a page loads.
classNamestringClasses 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.
pricerequiredbooleanThe price.
compareAtrequiredbooleanThe struck-through price before a markdown.
badgerequiredbooleanThe merchant's card badge.
addToCartrequiredbooleanThe add-to-cart button.
ProductCardLabels
The button texts of a product card; each falls back to the store's own wording.
addToCartstringThe add-to-cart button.
addingstringThe button while the product is being added.
selectOptionsstringThe button of a product whose options are chosen on its page.
soldOutstringThe button of a product that cannot be bought.
ProductCardProps
Props of ProductCard.
cardrequiredProductCardViewThe product to show.
layoutProductCardLayoutA grid tile or a list row; defaults to `grid`.
showPartial<ProductCardVisibility>Parts to switch off.
imageAspectRatiostringThe image's CSS aspect ratio in a grid, such as `3 / 4`; defaults to `3 / 4`.
labelsProductCardLabelsButton texts.
onAddToCart(card: ProductCardView) => voidReplaces the built-in quick add.
busybooleanShows the button as adding; only read with `onAddToCart`.
errorstring | nullAn error under the button; only read with `onAddToCart`.
classNamestringClasses added to the card.
ProductCardSkeletonProps
Props of ProductCardSkeleton.
classNamestringClasses added to the placeholder.
ProductCardBadgeProps
Props of ProductCardBadge.
cardrequiredProductCardViewThe card whose badge to show.
classNamestringClasses added to the badge.
ProductCardSpecsProps
Props of ProductCardSpecs.
cardrequiredProductCardViewThe card whose attribute values to show.
maxnumberHow many values show before a "+N" chip; 2 when omitted.
classNamestringClasses added to the row of chips.