# listing (/themes/sdk/reference/listing)

```ts
import { … } from '@poltura/theme-sdk/listing';
```

## [Hooks](/themes/sdk/reference/listing/hooks) [#hooks]

| Name | What it is |
| --- | --- |
| [`useListingFilters`](/themes/sdk/reference/listing/hooks#uselistingfilters) | The filters of the product list the component sits in: its groups, the shopper's selection and the actions that change it. |
| [`useListing`](/themes/sdk/reference/listing/hooks#uselisting) | The product list the component sits in: its heading, the cards of the current page, the sort, the paging and the merchant's grid choices. |

## [Parts](/themes/sdk/reference/listing/parts-1) [#parts]

| Name | What it is |
| --- | --- |
| [`FilterOption`](/themes/sdk/reference/listing/parts-1#filteroption) | One checkbox choice with its match count, and a disclosure for its nested choices such as subcategories. |
| [`SwatchFilter`](/themes/sdk/reference/listing/parts-1#swatchfilter) | A swatch group's choices as colour or picture dots with their names, with search and "show more" for long lists. |
| [`PriceRangeFilter`](/themes/sdk/reference/listing/parts-1#pricerangefilter) | A price group's range as a slider, two amount fields or both, as the merchant chose, with a reset. |
| [`FilterGroup`](/themes/sdk/reference/listing/parts-1#filtergroup) | One filter group as a collapsible section: its title and selection count, then its checklist, swatches, price range or toggle. |
| [`AppliedFilters`](/themes/sdk/reference/listing/parts-1#appliedfilters) | The applied filters as removable chips, with a "clear all" link; nothing while no filter is applied. |
| [`FilterSheet`](/themes/sdk/reference/listing/parts-1#filtersheet) | The narrow-screen filters: a button with the selected count that opens [`FilterPanel`](/themes/sdk/reference/listing/defaults-1#filterpanel) in a sheet with "clear all" and "show results". |
| [`SortSelect`](/themes/sdk/reference/listing/parts-1#sortselect) | The sort menu: a button naming the current order that opens the list of orders. |
| [`ListingPagination`](/themes/sdk/reference/listing/parts-1#listingpagination) | Previous and next buttons around the first, last and nearby page numbers; nothing for a single page. |
| [`ProductCardSkeleton`](/themes/sdk/reference/listing/parts-1#productcardskeleton) | A grey placeholder in the shape of a product card, for lists that are still loading. |
| [`ProductCardBadge`](/themes/sdk/reference/listing/parts-2#productcardbadge) | The merchant's card badge, the first specification the store shows on cards; nothing without one. |
| [`ProductCardSpecs`](/themes/sdk/reference/listing/parts-2#productcardspecs) | The attribute values the store shows on cards, such as a game's platform, as small chips with their icons and "+N" for the rest; nothing without any. |
| [`ProductList`](/themes/sdk/reference/listing/parts-2#productlist) | Reports the cards inside as one product list to the store's analytics: the list once it shows, and the card a shopper opens. |
| [`ListingHeader`](/themes/sdk/reference/listing/parts-2#listingheader) | A listing's title, product count and description, with a "clear search" button on a results page. |
| [`ListingEmpty`](/themes/sdk/reference/listing/parts-2#listingempty) | The block a listing shows when nothing matches: an icon, a heading and a line of text. |

## [Defaults](/themes/sdk/reference/listing/defaults-1) [#defaults]

| Name | What it is |
| --- | --- |
| [`FilterPanel`](/themes/sdk/reference/listing/defaults-1#filterpanel) | The complete filter panel of the product list it sits in: every group of [`useListingFilters`](/themes/sdk/reference/listing/hooks#uselistingfilters) with a "clear all". |
| [`ProductCard`](/themes/sdk/reference/listing/defaults-2#productcard) | A complete product card: image, discount, title, badges, price and an add-to-cart button that opens the product page when options must be chosen. |
| [`ProductGrid`](/themes/sdk/reference/listing/defaults-2#productgrid) | A responsive grid of product cards, with placeholders while loading and [`ListingEmpty`](/themes/sdk/reference/listing/parts-2#listingempty) when there are none. |
| [`ProductRail`](/themes/sdk/reference/listing/defaults-3#productrail) | A titled row of product cards with a "view all" link, as a grid or a scrolling row with arrows; nothing without cards. |

## [Constants](/themes/sdk/reference/listing/constants) [#constants]

| Name | What it is |
| --- | --- |
| [`collectionRegions`](/themes/sdk/reference/listing/constants#collectionregions) | The collection template's regions, where merchants place the listing's blocks. |

## [Types](/themes/sdk/reference/listing/types-1) [#types]

| Name | What it is |
| --- | --- |
| [`AppliedFilter`](/themes/sdk/reference/listing/types-1#appliedfilter) | One applied filter, as a removable chip. |
| [`FilterGroupKind`](/themes/sdk/reference/listing/types-1#filtergroupkind) | How a filter group is presented: a checklist, colour swatches, a price range or an on/off toggle. |
| [`FilterGroupView`](/themes/sdk/reference/listing/types-1#filtergroupview) | One filter of a product list, such as brand, colour or price. |
| [`FilterOptionView`](/themes/sdk/reference/listing/types-1#filteroptionview) | One choice inside a filter group. |
| [`FilterPriceDisplay`](/themes/sdk/reference/listing/types-1#filterpricedisplay) | How a price group takes its range: a slider, two amount fields, or both. |
| [`ListingFilterSelection`](/themes/sdk/reference/listing/types-1#listingfilterselection) | The filters a product list is narrowed by. |
| [`ListingFiltersState`](/themes/sdk/reference/listing/types-1#listingfiltersstate) | The filter panel's state and the actions that change the selection. |
| [`ListingState`](/themes/sdk/reference/listing/types-1#listingstate) | A collection, category or search results page with its products, sort and paging. |
| [`ListingVisibility`](/themes/sdk/reference/listing/types-1#listingvisibility) | Which parts of a product list the merchant has switched on. |
| [`Pagination`](/themes/sdk/reference/listing/types-1#pagination) | Where a paged list is and how to reach its other pages. |
| [`PriceRangeSelection`](/themes/sdk/reference/listing/types-1#pricerangeselection) | A price range a shopper selected, in major units; a null bound leaves that side open. |
| [`SortOption`](/themes/sdk/reference/listing/types-1#sortoption) | One choice of the sort menu. |
| [`ProductCard`](/themes/sdk/reference/listing/types-2#productcard) | A product as a list, rail or search result shows it. |
| [`FilterOptionProps`](/themes/sdk/reference/listing/types-2#filteroptionprops) | Props of [`FilterOption`](/themes/sdk/reference/listing/parts-1#filteroption). |
| [`SwatchFilterProps`](/themes/sdk/reference/listing/types-2#swatchfilterprops) | Props of [`SwatchFilter`](/themes/sdk/reference/listing/parts-1#swatchfilter). |
| [`PriceRangeFilterProps`](/themes/sdk/reference/listing/types-2#pricerangefilterprops) | Props of [`PriceRangeFilter`](/themes/sdk/reference/listing/parts-1#pricerangefilter). |
| [`FilterGroupProps`](/themes/sdk/reference/listing/types-2#filtergroupprops) | Props of [`FilterGroup`](/themes/sdk/reference/listing/parts-1#filtergroup). |
| [`AppliedFiltersClassKey`](/themes/sdk/reference/listing/types-2#appliedfiltersclasskey) | The parts of [`AppliedFilters`](/themes/sdk/reference/listing/parts-1#appliedfilters) its `classes` prop styles. |
| [`AppliedFiltersProps`](/themes/sdk/reference/listing/types-2#appliedfiltersprops) | Props of [`AppliedFilters`](/themes/sdk/reference/listing/parts-1#appliedfilters). |
| [`FilterPanelProps`](/themes/sdk/reference/listing/types-2#filterpanelprops) | Props of [`FilterPanel`](/themes/sdk/reference/listing/defaults-1#filterpanel). |
| [`FilterSheetProps`](/themes/sdk/reference/listing/types-2#filtersheetprops) | Props of [`FilterSheet`](/themes/sdk/reference/listing/parts-1#filtersheet). |
| [`SortSelectProps`](/themes/sdk/reference/listing/types-2#sortselectprops) | Props of [`SortSelect`](/themes/sdk/reference/listing/parts-1#sortselect). |
| [`ListingPaginationProps`](/themes/sdk/reference/listing/types-2#listingpaginationprops) | Props of [`ListingPagination`](/themes/sdk/reference/listing/parts-1#listingpagination). |
| [`ProductCardLayout`](/themes/sdk/reference/listing/types-2#productcardlayout) | Whether a card is a tile in a grid or a wide row in a list. |
| [`ProductCardVisibility`](/themes/sdk/reference/listing/types-2#productcardvisibility) | Which parts of a product card are shown; every part is on unless switched off. |
| [`ProductCardLabels`](/themes/sdk/reference/listing/types-2#productcardlabels) | The button texts of a product card; each falls back to the store's own wording. |
| [`ProductCardProps`](/themes/sdk/reference/listing/types-2#productcardprops) | Props of [`ProductCard`](/themes/sdk/reference/listing/defaults-2#productcard). |
| [`ProductCardSkeletonProps`](/themes/sdk/reference/listing/types-2#productcardskeletonprops) | Props of [`ProductCardSkeleton`](/themes/sdk/reference/listing/parts-1#productcardskeleton). |
| [`ProductCardBadgeProps`](/themes/sdk/reference/listing/types-2#productcardbadgeprops) | Props of [`ProductCardBadge`](/themes/sdk/reference/listing/parts-2#productcardbadge). |
| [`ProductCardSpecsProps`](/themes/sdk/reference/listing/types-2#productcardspecsprops) | Props of [`ProductCardSpecs`](/themes/sdk/reference/listing/parts-2#productcardspecs). |
| [`ProductGridProps`](/themes/sdk/reference/listing/types-3#productgridprops) | Props of [`ProductGrid`](/themes/sdk/reference/listing/defaults-2#productgrid). |
| [`ProductListProps`](/themes/sdk/reference/listing/types-3#productlistprops) | Props of [`ProductList`](/themes/sdk/reference/listing/parts-2#productlist). |
| [`ProductRailClassKey`](/themes/sdk/reference/listing/types-3#productrailclasskey) | The parts of [`ProductRail`](/themes/sdk/reference/listing/defaults-3#productrail) its `classes` prop styles. |
| [`ProductRailProps`](/themes/sdk/reference/listing/types-3#productrailprops) | Props of [`ProductRail`](/themes/sdk/reference/listing/defaults-3#productrail). |
| [`ListingHeaderProps`](/themes/sdk/reference/listing/types-3#listingheaderprops) | Props of [`ListingHeader`](/themes/sdk/reference/listing/parts-2#listingheader). |
| [`ListingEmptyProps`](/themes/sdk/reference/listing/types-3#listingemptyprops) | Props of [`ListingEmpty`](/themes/sdk/reference/listing/parts-2#listingempty). |

<AnchorRedirect to={{"hooks":"/themes/sdk/reference/listing/hooks","uselistingfilters":"/themes/sdk/reference/listing/hooks","uselisting":"/themes/sdk/reference/listing/hooks","parts":"/themes/sdk/reference/listing/parts-1","filteroption":"/themes/sdk/reference/listing/parts-1","swatchfilter":"/themes/sdk/reference/listing/parts-1","pricerangefilter":"/themes/sdk/reference/listing/parts-1","filtergroup":"/themes/sdk/reference/listing/parts-1","appliedfilters":"/themes/sdk/reference/listing/parts-1","filtersheet":"/themes/sdk/reference/listing/parts-1","sortselect":"/themes/sdk/reference/listing/parts-1","listingpagination":"/themes/sdk/reference/listing/parts-1","productcardskeleton":"/themes/sdk/reference/listing/parts-1","productcardbadge":"/themes/sdk/reference/listing/parts-2","productcardspecs":"/themes/sdk/reference/listing/parts-2","productlist":"/themes/sdk/reference/listing/parts-2","listingheader":"/themes/sdk/reference/listing/parts-2","listingempty":"/themes/sdk/reference/listing/parts-2","defaults":"/themes/sdk/reference/listing/defaults-1","filterpanel":"/themes/sdk/reference/listing/defaults-1","productcard":"/themes/sdk/reference/listing/defaults-2","productgrid":"/themes/sdk/reference/listing/defaults-2","productrail":"/themes/sdk/reference/listing/defaults-3","constants":"/themes/sdk/reference/listing/constants","collectionregions":"/themes/sdk/reference/listing/constants","types":"/themes/sdk/reference/listing/types-1","appliedfilter":"/themes/sdk/reference/listing/types-1","filtergroupkind":"/themes/sdk/reference/listing/types-1","filtergroupview":"/themes/sdk/reference/listing/types-1","filteroptionview":"/themes/sdk/reference/listing/types-1","filterpricedisplay":"/themes/sdk/reference/listing/types-1","listingfilterselection":"/themes/sdk/reference/listing/types-1","listingfiltersstate":"/themes/sdk/reference/listing/types-1","listingstate":"/themes/sdk/reference/listing/types-1","listingvisibility":"/themes/sdk/reference/listing/types-1","pagination":"/themes/sdk/reference/listing/types-1","pricerangeselection":"/themes/sdk/reference/listing/types-1","sortoption":"/themes/sdk/reference/listing/types-1","filteroptionprops":"/themes/sdk/reference/listing/types-2","swatchfilterprops":"/themes/sdk/reference/listing/types-2","pricerangefilterprops":"/themes/sdk/reference/listing/types-2","filtergroupprops":"/themes/sdk/reference/listing/types-2","appliedfiltersclasskey":"/themes/sdk/reference/listing/types-2","appliedfiltersprops":"/themes/sdk/reference/listing/types-2","filterpanelprops":"/themes/sdk/reference/listing/types-2","filtersheetprops":"/themes/sdk/reference/listing/types-2","sortselectprops":"/themes/sdk/reference/listing/types-2","listingpaginationprops":"/themes/sdk/reference/listing/types-2","productcardlayout":"/themes/sdk/reference/listing/types-2","productcardvisibility":"/themes/sdk/reference/listing/types-2","productcardlabels":"/themes/sdk/reference/listing/types-2","productcardprops":"/themes/sdk/reference/listing/types-2","productcardskeletonprops":"/themes/sdk/reference/listing/types-2","productcardbadgeprops":"/themes/sdk/reference/listing/types-2","productcardspecsprops":"/themes/sdk/reference/listing/types-2","productgridprops":"/themes/sdk/reference/listing/types-3","productlistprops":"/themes/sdk/reference/listing/types-3","productrailclasskey":"/themes/sdk/reference/listing/types-3","productrailprops":"/themes/sdk/reference/listing/types-3","listingheaderprops":"/themes/sdk/reference/listing/types-3","listingemptyprops":"/themes/sdk/reference/listing/types-3"}} />