Hooks
The hooks of @poltura/theme-sdk/listing.
On this page
import { … } from '@poltura/theme-sdk/listing';useListingFilters
The filters of the product list the component sits in: its groups, the shopper's selection and the actions that change it.
useListingFilters(): ListingFiltersStateThe selection lives in the page address, so a filtered list renders on the server and can be shared. Changing it returns to the first page.
Returns: The filter state; outside a product list it has no groups and its actions do nothing.
Example
import { FilterGroup, useListingFilters } from '@poltura/theme-sdk/listing';
export function ThemeFilters() {
const filters = useListingFilters();
return (
<aside>
{filters.groups.map((group) => (
<FilterGroup
key={group.id}
group={group}
onToggle={(optionId) => filters.toggle(group.id, optionId)}
onPriceChange={filters.setPriceRange}
/>
))}
</aside>
);
}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.
useListing(): ListingStateSort and page live in the page address, so a listing renders on the server and can be shared.
Returns: The listing; outside a collection, category or search page it has no products and its actions do nothing.
Example
import { ListingEmpty, ListingHeader, ProductGrid, useListing } from '@poltura/theme-sdk/listing';
export function ThemeListing() {
const listing = useListing();
return (
<>
<ListingHeader header={listing.header} />
{listing.isEmpty ? <ListingEmpty /> : <ProductGrid cards={listing.products} columns={listing.layout.columns} />}
</>
);
}