Types: ProductGridProps to ListingEmptyProps
The types of @poltura/theme-sdk/listing, ProductGridProps to ListingEmptyProps.
Ezen az oldalon
import { … } from '@poltura/theme-sdk/listing';ProductGridProps
Props of ProductGrid.
cardsrequiredreadonly ProductCardView[]The cards to show, in order.
layoutProductCardLayoutGrid tiles or list rows; defaults to `grid`.
columns{ readonly desktop: number; readonly mobile: number; }Cards per row on wide and narrow screens; defaults to four and two.
showPartial<ProductCardVisibility>Card parts to switch off.
imageAspectRatiostringThe card image's CSS aspect ratio.
labelsProductCardLabelsThe cards' button texts.
empty{ readonly heading?: string; readonly body?: string; }The heading and text shown when there are no cards.
loadingbooleanShows a page of placeholders instead of the cards.
classNamestringClasses added to the grid.
listNamestringThe list's name in the store's analytics, such as a rail's heading; unset keeps the enclosing list's.
ProductListProps
Props of ProductList.
cardsrequiredreadonly ProductCardView[]The cards inside, in the order they show.
childrenReactNodeThe cards in your own layout.
namestringThe list's name in the store's analytics, such as a rail's heading; unset keeps the enclosing list's, or the search results.
ProductRailClassKey
The parts of ProductRail its classes prop styles.
type ProductRailClassKey = 'header' | 'grid'ProductRailProps
Props of ProductRail.
cardsrequiredreadonly ProductCardView[]The cards to show, in order.
titlestringThe rail's heading.
subtitlestringA line under the heading.
viewAllHrefstringWhere "view all" leads; defaults to the catalogue.
layout'grid' | 'carousel'A grid, or one scrolling row; defaults to `grid`.
perViewnumberCards visible at once in a scrolling row, 3 to 6; defaults to 5.
mobileArrowsbooleanShows the row's arrows on narrow screens too when it holds more than two cards.
arrowPlacement'edges' | 'topRight'Arrows over the row's sides, or together above its right end; defaults to `edges`.
mobileViewAllbooleanShows a full-width "view all" button under the cards on narrow screens; defaults to true.
classNamestringClasses added to the section.
classesPartial<Record<ProductRailClassKey, string>>Classes added to the heading row and the grid.
iconReactNodeDrawn before the heading; a star when unset.
ListingHeaderProps
Props of ListingHeader.
headerrequiredListingState['header']The heading, as {@link useListing} hands it.
sortReactNodeA control shown beside the heading on wide screens, such as {@link SortSelect}.
onClearSearch() => voidCalled by the "clear search" button of a results page; without it the button is not shown.
clearSearchLabelstringThe "clear search" button's text; defaults to the store's wording.
busybooleanDisables the button while the list reloads.
classNamestringClasses added to the heading row.
ListingEmptyProps
Props of ListingEmpty.
headingstringThe heading; defaults to the store's "no products" wording.
bodystringThe text under it.
classNamestringClasses added to the block.