Defaults: ProductCard to ProductGrid

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

ProductCardCopy Anchor Link

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.

ProductCard(props: ProductCardProps): ReactElement

The button adds the card's variant, or its fixed bundle, to the cart and shows the store's error under it when that fails. Prices follow the visitor's price access.

Props: ProductCardProps

Example

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

export function FirstProduct() {
  const [first] = useListing().products;
  return first ? <ProductCard card={first} show={{ addToCart: false }} /> : null;
}

See also: ProductGrid, ProductCardBadge, ProductCardSpecs

ProductGridCopy Anchor Link

A responsive grid of product cards, with placeholders while loading and ListingEmpty when there are none.

ProductGrid(props: ProductGridProps): ReactElement

Props: ProductGridProps

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

export function ListingGrid() {
  const { products, layout, isPending } = useListing();
  return <ProductGrid cards={products} columns={layout.columns} imageAspectRatio={layout.imageAspectRatio} loading={isPending} />;
}

See also: ProductCard, ProductList, useListing