Developers
Start building
Themes/Theme SDK/Modules/listing/Parts: FilterOption to ProductCardSkeleton

Parts: FilterOption to ProductCardSkeleton

The parts of @poltura/theme-sdk/listing, FilterOption to ProductCardSkeleton.

On this page
import { … } from '@poltura/theme-sdk/listing';

FilterOption

One checkbox choice with its match count, and a disclosure for its nested choices such as subcategories.

FilterOption(props: FilterOptionProps): ReactElement

Props: FilterOptionProps

Example

import { FilterOption, useListingFilters } from '@poltura/theme-sdk/listing';

export function BrandChoices() {
  const filters = useListingFilters();
  const brand = filters.groups.find((group) => group.id === 'brand');
  if (!brand) return null;
  return brand.options.map((option) => (
    <FilterOption key={option.id} groupId={brand.id} option={option} onToggle={(id) => filters.toggle(brand.id, id)} />
  ));
}

SwatchFilter

A swatch group's choices as colour or picture dots with their names, with search and "show more" for long lists.

SwatchFilter(props: SwatchFilterProps): ReactElement

Props: SwatchFilterProps

Example

import { SwatchFilter, useListingFilters } from '@poltura/theme-sdk/listing';

export function ColourFilter() {
  const filters = useListingFilters();
  const colour = filters.groups.find((group) => group.kind === 'swatch');
  return colour ? <SwatchFilter group={colour} onToggle={(id) => filters.toggle(colour.id, id)} /> : null;
}

PriceRangeFilter

A price group's range as a slider, two amount fields or both, as the merchant chose, with a reset.

PriceRangeFilter(props: PriceRangeFilterProps): ReactElement | null

Props: PriceRangeFilterProps

Example

import { PriceRangeFilter, useListingFilters } from '@poltura/theme-sdk/listing';

export function PriceFilter() {
  const filters = useListingFilters();
  const price = filters.groups.find((group) => group.kind === 'price');
  return price ? <PriceRangeFilter group={price} onChange={filters.setPriceRange} /> : null;
}

FilterGroup

One filter group as a collapsible section: its title and selection count, then its checklist, swatches, price range or toggle.

FilterGroup(props: FilterGroupProps): ReactElement

Props: FilterGroupProps

Example

import { FilterGroup, useListingFilters } from '@poltura/theme-sdk/listing';

export function FilterList() {
  const filters = useListingFilters();
  return filters.groups.map((group) => (
    <FilterGroup
      key={group.id}
      group={group}
      onToggle={(optionId) => filters.toggle(group.id, optionId)}
      onPriceChange={filters.setPriceRange}
    />
  ));
}

AppliedFilters

The applied filters as removable chips, with a "clear all" link; nothing while no filter is applied.

AppliedFilters(props: AppliedFiltersProps): ReactElement | null

Props: AppliedFiltersProps

Example

import { AppliedFilters, useListingFilters } from '@poltura/theme-sdk/listing';

export function FilterChips() {
  const filters = useListingFilters();
  return <AppliedFilters filters={filters.applied} onClear={() => filters.clear()} />;
}

FilterSheet

The narrow-screen filters: a button with the selected count that opens FilterPanel in a sheet with "clear all" and "show results".

FilterSheet(props: FilterSheetProps): ReactElement

Props: FilterSheetProps

Example

import { FilterSheet, useListing } from '@poltura/theme-sdk/listing';

export function MobileFilters() {
  const { pagination } = useListing();
  return <FilterSheet resultCount={pagination.total} className="xl:hidden" />;
}

See also: FilterPanel, useListingFilters

SortSelect

The sort menu: a button naming the current order that opens the list of orders.

SortSelect(props: SortSelectProps): ReactElement | null

Props: SortSelectProps

Example

import { SortSelect, type SortOption } from '@poltura/theme-sdk/listing';
import { useState } from 'react';

const orders: SortOption[] = [
  { value: 'popularity', label: 'Most popular' },
  { value: 'priceAsc', label: 'Price, low to high' },
];

export function ListingSort() {
  const [sort, setSort] = useState(orders[0].value);
  return <SortSelect options={orders} selected={sort} onChange={setSort} />;
}

ListingPagination

Previous and next buttons around the first, last and nearby page numbers; nothing for a single page.

ListingPagination(props: ListingPaginationProps): ReactElement | null

Props: ListingPaginationProps

Example

import { ListingPagination, type Pagination } from '@poltura/theme-sdk/listing';

export function Pages({ pagination, open }: { pagination: Pagination; open(page: number): void }) {
  return <ListingPagination pagination={pagination} onPageChange={open} />;
}

ProductCardSkeleton

A grey placeholder in the shape of a product card, for lists that are still loading.

ProductCardSkeleton(props: ProductCardSkeletonProps): ReactElement

Props: ProductCardSkeletonProps

Example

import { ProductCardSkeleton } from '@poltura/theme-sdk/listing';

export function LoadingRow() {
  return (
    <div className="grid grid-cols-4 gap-4">
      {[0, 1, 2, 3].map((index) => <ProductCardSkeleton key={index} />)}
    </div>
  );
}
Last updated