How to theme the product review?

Product reviews allow customers to write their feedback and provide ratings about their orders in a separate block.

<aside> ℹ️ Usually, styling this element takes from-to: 5-7h

</aside>

What are the dependencies?

Rating display. How to theme rating display?
Popup. How to theme a popup?

Where this element can be seen?

Product gallery can be found on the following elements:

Product page

How should this element be designed?

The product review should be displayed accounting for the following:

There could be multiple ratings (by default: price, quality, value)

The following states must be displayed:

Hovered star
Selected star
Error (no stars specified)

Design example #1

New review form

Review list

How to develop styles for this element?

Reviews can be managed by the 3rd party extension however for output should be used default methods, therefore, theming for reviews can be implemented by the FE team.

How to theme a review list?

Theme the ProductReviews component.

ProductReviewList is responsible for rendering the reviews.

Each review is displayed in ProductReviewItem.

How to theme a review form?

Theme the ProductReviewForm component. It can be found in the ProductPage route in renderReviewPopup method.

Often a "jump link” for a fast scroll down to the reviews section is asked to be added. Functionality can be handle by Link component, by passing to prop with value of needed block id (example - to='#ProductReviews'. However, there is bug in the Link.conteiner.js which removes # from the beginning of to value, therefore container should be extended and this fix applied (SPWA 5.1.1.)

Fix for Link