Developers
Start building
Themes/Theme SDK/Modules/listing/Parts: ProductCardBadge to ListingEmpty

Parts: ProductCardBadge to ListingEmpty

The parts of @poltura/theme-sdk/listing, ProductCardBadge to ListingEmpty.

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

ProductCardBadge

The merchant's card badge, the first specification the store shows on cards; nothing without one.

ProductCardBadge(props: ProductCardBadgeProps): ReactElement | null

Props: ProductCardBadgeProps

Example

import { ProductCardBadge, type ProductCard } from '@poltura/theme-sdk/listing';

export function CardFooter({ card }: { card: ProductCard }) {
  return <ProductCardBadge card={card} className="mt-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.

ProductCardSpecs(props: ProductCardSpecsProps): ReactElement | null

Props: ProductCardSpecsProps

Example

import { ProductCardSpecs, type ProductCard } from '@poltura/theme-sdk/listing';

export function CardPlatforms({ card }: { card: ProductCard }) {
  return <ProductCardSpecs card={card} max={3} className="mt-2" />;
}

See also: ProductCardBadge

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.

ProductList(props: ProductListProps): ReactElement

Props: ProductListProps

Example

import { useProducts } from '@poltura/theme-sdk/data';
import { ProductCard, ProductList } from '@poltura/theme-sdk/listing';

export function NewArrivals() {
  const { data } = useProducts({ sort: 'newest', limit: 4 }, { suspense: true });
  return (
    <ProductList cards={data.items}>
      <div className='grid grid-cols-2 gap-4'>
        {data.items.map((card) => (
          <ProductCard key={card.id} card={card} />
        ))}
      </div>
    </ProductList>
  );
}

ListingHeader

A listing's title, product count and description, with a "clear search" button on a results page.

ListingHeader(props: ListingHeaderProps): ReactElement

Props: ListingHeaderProps

Example

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

export function Heading() {
  const { header, sort } = useListing();
  return <ListingHeader header={header} sort={<SortSelect options={sort.options} selected={sort.selected} onChange={sort.set} />} />;
}

ListingEmpty

The block a listing shows when nothing matches: an icon, a heading and a line of text.

ListingEmpty(props: ListingEmptyProps): ReactElement

Props: ListingEmptyProps

Example

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

export function NoResults() {
  return <ListingEmpty heading="Nothing here yet" body="Try another filter." />;
}
Last updated