Types: AppliedFilter to SortOption
The types of @poltura/theme-sdk/listing, AppliedFilter to SortOption.
Ezen az oldalon
import { … } from '@poltura/theme-sdk/listing';AppliedFilter
One applied filter, as a removable chip.
groupIdrequiredstringThe group the filter belongs to.
optionIdrequiredstringThe selected option.
labelrequiredstringThe chip text in the page language.
removerequired() => voidRemoves this filter.
FilterGroupKind
How a filter group is presented: a checklist, colour swatches, a price range or an on/off toggle.
type FilterGroupKind = 'list' | 'swatch' | 'price' | 'toggle'FilterGroupView
One filter of a product list, such as brand, colour or price.
idrequiredstringThe group's id.
labelrequiredstringThe group's title in the page language.
kindrequiredFilterGroupKindHow the group is presented.
optionsrequiredreadonly FilterOptionView[]The group's choices; empty for a price group.
openrequiredbooleanWhether the group starts expanded.
maxVisiblerequirednumberHow many choices show before "show more".
searchablerequiredbooleanWhether the group offers a search box over its choices.
rangerequired{ readonly min: number; readonly max: number; readonly currencyCode: CurrencyCode; } | nullThe bounds of a price group, or null for other kinds.
activeRangerequiredPriceRangeSelection | nullThe selected price range of a price group, or null.
priceDisplayrequiredFilterPriceDisplayHow a price group takes its range.
FilterOptionView
One choice inside a filter group.
idrequiredstringThe option's id inside its group.
labelrequiredstringThe option's text in the page language.
countrequirednumber | nullHow many products match it, or null when counts are hidden.
selectedrequiredbooleanWhether it is selected.
swatchrequiredSwatch | nullIts swatch in a swatch group, otherwise null.
iconrequiredIconValue | nullThe icon shown before the label in a list group, as `ContentIcon` draws it, or null.
childrenrequiredreadonly FilterOptionView[]Nested choices, such as subcategories.
FilterPriceDisplay
How a price group takes its range: a slider, two amount fields, or both.
type FilterPriceDisplay = 'slider' | 'inputs' | 'both'ListingFilterSelection
The filters a product list is narrowed by.
optionsrequiredReadonly<Record<string, readonly string[]>>Selected option ids per group id.
pricerequiredPriceRangeSelection | nullThe selected price range, or null.
ListingFiltersState
The filter panel's state and the actions that change the selection.
groupsrequiredreadonly FilterGroupView[]The filter groups, in the merchant's order.
selectionrequiredListingFilterSelectionThe current selection.
togglerequired(groupId: string, optionId: string) => voidSelects or clears one option.
setPriceRangerequired(range: PriceRangeSelection) => voidNarrows the list to a price range.
clearrequired(groupId?: string) => voidClears one group, or every filter.
appliedrequiredreadonly AppliedFilter[]The applied filters as removable chips.
selectedCountrequirednumberHow many options are selected.
isPendingrequiredbooleanWhether the list is reloading for the new selection.
ListingState
A collection, category or search results page with its products, sort and paging.
headerrequired{ readonly title: string; readonly description: RichTextValue | null; readonly countLabel: string | null; readonly searchQuery: string | null; }The page's heading.
productsrequiredreadonly ProductCard[]The products on the current page.
sortrequired{ readonly options: readonly SortOption[]; readonly selected: ProductSort; set(sort: ProductSort): void; }The sort menu and the current order.
paginationrequiredPaginationWhere the list is and how to reach its other pages.
goToPagerequired(page: number) => voidOpens another page of the list, keeping the filters and sort, and scrolls back to the top.
clearSearchrequired() => voidDrops the search terms of a results page, keeping the filters and sort.
layoutrequired{ readonly columns: { readonly desktop: number; readonly mobile: number; }; readonly imageAspectRatio: string; readonly show: ListingVisibility; }The merchant's grid and visibility choices.
isEmptyrequiredbooleanWhether nothing matches.
isPendingrequiredbooleanWhether a new page, sort or filter is loading.
ListingVisibility
Which parts of a product list the merchant has switched on.
filtersrequiredbooleanThe filter panel.
appliedFiltersrequiredbooleanThe applied-filter chips.
sortrequiredbooleanThe sort menu.
productCountrequiredbooleanThe product count.
addToCartrequiredbooleanThe add-to-cart button on cards.
cardPricerequiredbooleanThe price on cards.
cardCompareAtrequiredbooleanThe compare-at price on cards.
cardBadgerequiredbooleanThe badge on cards.
Pagination
Where a paged list is and how to reach its other pages.
pagerequirednumberThe current page, from 1.
pageCountrequirednumberHow many pages there are.
totalrequirednumberHow many items match over every page.
hrefrequired(page: number) => stringThe path of a page of the list.
PriceRangeSelection
A price range a shopper selected, in major units; a null bound leaves that side open.
minrequirednumber | nullThe lowest price, or null for no lower bound.
maxrequirednumber | nullThe highest price, or null for no upper bound.
SortOption
One choice of the sort menu.
valuerequiredProductSortThe sort order.
labelrequiredstringIts name in the page language.