Review Summary

<x-wirekit::review-summary> shows the reviews of a product at a glance: the average as stars, how many reviews there are, and how the stars are distributed from five down to one. A row of the distribution can lead to the reviews with that many stars.

The reviews themselves are reviews.

Usage

Give the summary the average and the distribution, the number of reviews for each step:

<x-wirekit::review-summary :average="4.6" :distribution="[5 => 82, 4 => 30, 3 => 9, 2 => 4, 1 => 3]" />

The count is the sum of the distribution. Pass count when it is larger, because reviews without stars count as well. Each bar shows its step's share of the reviews with stars.

The share reaches each bar as an inline style. A style-src policy that allows no style attributes drops it, and the bars then stay empty while the numbers beside them still say how many.

Filtering the Reviews by Stars

Give filters an address for each step. A row with one is a link to the reviews with that many stars, and current marks the step the list shows now:

<x-wirekit::review-summary
    :average="4.6"
    :distribution="[5 => 82, 4 => 30, 3 => 9, 2 => 4, 1 => 3]"
    :filters="[5 => '?stars=5', 4 => '?stars=4', 3 => '?stars=3', 2 => '?stars=2', 1 => '?stars=1']"
    :current="4"
/>

A link keeps the filter in the address, so it works without a script and survives a reload. A Livewire page reads the parameter, #[Url] public ?int $stars = null;, and passes it back as current.

How Reviews Are Checked

In the EU, a shop that shows customer reviews has to say whether and how it makes sure they come from customers who actually used or bought the product: Directive (EU) 2019/2161, in Germany § 5b (3) UWG. The notice slot puts that statement under the distribution, where it is read with the reviews. What it says depends on what the shop does, so WireKit does not write it:

<x-wirekit::review-summary :average="4.2" :distribution="[5 => 12, 4 => 8, 3 => 2, 2 => 1, 1 => 1]">
    <x-slot:notice>Reviews marked as a verified purchase come from customers who bought the product in this shop. Other reviews are not checked.</x-slot:notice>
    <x-slot:actions>
        <x-wirekit::button size="sm" intent="neutral" surface="outline">Write a review</x-wirekit::button>
    </x-slot:actions>
</x-wirekit::review-summary>

No Reviews Yet

Without reviews the summary says so, instead of an average of nothing:

<x-wirekit::review-summary :distribution="[]" />

Props

Slots

Accessibility

• The score is read once, with its scale. The stars are an image named "4.6 out of 5 stars", followed by the count as text; the large number repeats the stars and is hidden from assistive technology.
• The distribution is a list of sentences. Each row reads "5 stars: 82 reviews", and its bar, its number and its star, which only repeat that, are hidden from assistive technology.
• A filter row is a link named by its sentence, and the current one is announced as current and drawn with an outline as well as its fill, so it does not rest on color.
• On a touch surface every filter row is at least 44px tall.

Keyboard Interaction

Design Tokens