CategoryLanding

The landing layout of a catalog page: tiles to the category's children, then a rail of its popular products with a link to all of them. Either part renders nothing when it has no entries. Prop-driven and server-renderable.

import { CategoryLanding } from "@evolve-storefront/feature-product/category-landing";

Renders inside ProductListingProvider.

Preview

Tiles And RailOpen in Storybook ↗

Usage

Tiles to the children, then the rail of the category's popular products.

<CategoryLanding
  category={{ name: category.name }}
  categories={children}
  products={popular}
  allProducts={{ href: allProductsHref(category), count: category.productCount }}
  renderItem={(variant, { index, list }) => (
    <ProductCard product={variant} href={productHref(variant)} />
  )}
  renderLink={({ children, ...link }) => <Link {...link}>{children}</Link>}
/>;

Props

Prop	Type	Description
category	{ name: string; }
categories	readonly CategoryLandingTile[]	The category's children, as tiles.
products	readonly ListingProduct[]	The category's popular products, for the rail.
renderItem	CategoryLandingItemRenderer<ListingProduct>
allProducts?	{ href: string; count?: number | null | undefined; }	The rail's link to every product of the category.
renderLink?	CategoryLandingLinkRenderer
renderImage?	CategoryLandingImageRenderer
headingLevel?	HeadingLevel	The rail's heading level; a landing page's own title is the level above.

Any other props go to the root element, like on a plain HTML element.

Change the layout

Pass children to CategoryLanding to arrange its parts yourself. Every part is exported from @evolve-storefront/feature-product/category-landing.

CategoryLandingRail"Popular in {category}": a titled rail of products, with a link to all of them where allProducts is given.

Prop	Type	Description
category	{ name: string; }	The category the products are popular in; its name is in the heading.
products	readonly ListingProduct[]
renderItem	CategoryLandingItemRenderer<ListingProduct>
allProducts?	{ href: string; count?: number | null | undefined; }	A link beside the heading to every product of the category, with their count where known.
renderLink?	CategoryLandingLinkRenderer
headingLevel?	HeadingLevel

Any other props go to the root element, like on a plain HTML element.

CategoryLandingTilesThe category's children as a grid of linked tiles: image, name and product count.

Prop	Type	Description
categories	readonly CategoryLandingTile[]	The category's children, in the order to show them.
renderLink?	CategoryLandingLinkRenderer
renderImage?	CategoryLandingImageRenderer

Any other props go to the root element, like on a plain HTML element.

Examples

Tiles OnlyNo popular products: the tiles alone, no empty rail.

<CategoryLandingTiles categories={children} />;

Open in Storybook ↗

No ChildrenA category without children: the rail alone, no empty tile grid.

<CategoryLandingRail
  category={{ name: category.name }}
  products={popular}
  renderItem={(variant) => <ProductCard product={variant} href={productHref(variant)} />}
/>;

Open in Storybook ↗