ProductReviews

A product's approved reviews: the summary, the sort, the page of reviews the URL asks for, filtered to a rating where it asks, and links to the pages around it. Renders nothing without reviews. Server-renderable; place it in the reviews section.

import { ProductReviews } from "@evolve-storefront/feature-product/product-reviews";

Renders inside ProductListingProvider.

Preview

DefaultOpen in Storybook ↗

Usage

The average and its spread beside the reviews; each rating links to the list filtered to it.

const params = readReviewParams(searchParams);
<ProductDetailSection id="reviews">
  <ProductReviews
    summary={await readProductReviewSummary(client, { slug })}
    page={await readProductReviews(client, { slug, params })}
    params={params}
    search={searchParams}
    pathname={pathname}
    renderLink={({ href, children, ...props }) => <Link href={href} {...props}>{children}</Link>}
  />
</ProductDetailSection>;

Props

Prop	Type	Description
summary	ProductReviewSummary | null	readProductReviewSummary's result; renders nothing without it.
page	ProductReviewPage | null	readProductReviews' page for the URL's readReviewParams.
params	ReviewParams
search	string | URLSearchParams
pathname?	string
renderLink?	ProductReviewsLinkRenderer
renderItem?	ProductReviewRenderer	Renders each review; ProductReviewItem by default.
headingLevel?	HeadingLevel	The level of each review's title; the section around it is the site's.

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

Change the layout

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

ProductReviewItemOne approved review: its rating, title and text, who wrote it and when, what they bought and how it fit.

Prop	Type	Description
review	ProductReview
headingLevel?	HeadingLevel

ProductReviewsFitHow the size fits by the reviews: the fit most buyers report and their share, such as "72% say it is true to size".

Prop	Type	Description
fitDistribution	{ fit: ProductReviewFit; count: number; }[]	The summary's fitDistribution, from Product.reviewFitDistribution.

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

ProductReviewsRatingThe average rating, how many reviews it comes from and the share who recommend it, as one link to the reviews, for the buy box.

Prop	Type	Description
summary	ProductReviewSummary | null	readProductReviewSummary's result; renders nothing without reviews.
href?	string	Where the rating links to: the page's reviews section by default.
recommendShare?	((summary: ProductReviewSummary) => number | null)	The share of shoppers who recommend the product; null leaves it out.
renderLink?	ProductReviewsLinkRenderer

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

ProductReviewsSortThe orders the reviews can be listed in, newest, highest or lowest rated, each a link that keeps the rating filter and goes back to the first page.

Prop	Type	Description
sort	ProductReviewSort	The order the list is in, from readReviewParams.
search	string | URLSearchParams	The URL's parameters, so the links keep the chosen variant and rating.
pathname?	string
renderLink?	ProductReviewsLinkRenderer

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

ProductReviewsSummaryThe average rating and how many reviews it comes from, the spread over 5 down to 1 stars, each a link filtering the list to it, and how the size fits where buyers were asked.

Prop	Type	Description
summary	ProductReviewSummary
search	string | URLSearchParams	The URL's parameters, so the rating links keep the chosen variant.
rating?	number	The rating the list is filtered by, marked in the spread.
pathname?	string
renderLink?	ProductReviewsLinkRenderer

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

Examples

Filtered By RatingFiltered to a rating: that rating is marked, and its link shows every review again.

<ProductReviews {...props} params={readReviewParams(searchParams)} />;

Open in Storybook ↗

Sorted Lowest FirstSorted lowest rated first: the sort marks it, and its links keep the chosen variant.

<ProductReviews {...props} params={readReviewParams(searchParams)} />;

Open in Storybook ↗

Custom ReviewThe site's own row for each review, in the shipped layout: the summary, sort and pager stay.

<ProductReviews
  {...props}
  renderItem={(review) => <SiteReview review={review} />}
/>;

Open in Storybook ↗