ProductComparison

This product beside its alternatives, one row per specification on which they differ. Scrolls sideways when narrow, with the labels kept in view. Renders nothing with fewer than two products or nothing to tell them apart.

import { ProductComparison } from "@evolve-storefront/feature-product/product-comparison";

Renders inside ProductListingProvider.

Preview

DefaultOpen in Storybook ↗

Usage

<ProductDetailSection id="comparison">
  <ProductComparison
    products={[product, ...alternatives]}
    renderProduct={(product) => <ProductCard product={product} href={productHref(product)} />}
    locale={locale}
  />
</ProductDetailSection>;

Props

Prop	Type	Description
products	readonly ComparisonProduct[]	This page's product first, then its alternatives; three of them, as a rule.
locale	string
renderProduct?	ComparisonProductRenderer<ComparisonProduct>	The column header; the product's name by default.
showIdentical?	boolean	Keeps the rows where every product says the same.

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

Examples

Show IdenticalWith showIdentical the rows every product shares stay too.

<ProductComparison products={products} locale={locale} showIdentical />;

Open in Storybook ↗

Custom HeaderrenderProduct draws the column headers; the current product is told apart.

<ProductComparison products={products} locale={locale} renderProduct={(product, { isCurrent }) => <CompactCard product={product} isCurrent={isCurrent} />} />;

Open in Storybook ↗