Adding a review section to your Spree Commerce store not only enhances user engagement but also builds trust with potential customers. In this blog, I’ll walk you through the steps we followed to integrate a review section into a Spree Commerce store, including a custom implementation for allowing users to leave a review directly from their order details page.
 

1. Understanding the Requirements

Before starting the implementation, it's important to outline the goals:

• Enable customers to leave reviews on products they’ve purchased.
• Display these reviews on the respective product pages.
• Allow customers to initiate reviews from their order history after the product has been shipped.
• Provide an admin interface for managing and moderating reviews.

2. Setting Up Spree Reviews Extension

To get started, we used the spree_reviews extension, which provides a robust foundation for adding reviews to your Spree store.

Steps to Install:

1. Add the Gem: Add the spree_reviews gem to your `Gemfile`:

 

gem 'spree_reviews', github: 'spree-contrib/spree_reviews'     

2. Install the Gem: Install the gem by running:

 

bundle install

     3. Run Migrations: Run the necessary migrations to set up the database tables for reviews:

rails g spree_reviews:install
rails db:migrate

3. Customizing the Review Form

The default review form is functional but might need adjustments to fit your store’s style.

Steps to Customize:

• Locate or create the review form partial.
• Modify the form fields and layout as per your requirements.

Example of a customized form:
 

<%= form_with(model: [@product, Spree::Review.new], local: true) do |f| %>
  <div>
    <%= f.label :rating, 'Rate this product' %>
    <%= f.select :rating, options_for_select(1..5), {} %>
  </div>
  <div>
    <%= f.label :title, 'Review Title' %>
    <%= f.text_field :title, required: true %>
  </div>
  <div>
    <%= f.label :review, 'Your Review' %>
    <%= f.text_area :review, rows: 5, required: true %>
  </div>
  <%= f.submit 'Submit Review' %>
<% end %>

4. Displaying Reviews on Product Pages

Once the review form is set up, you’ll want to display these reviews on the product pages.

Steps to Display:

• Open the product show view (`spree/products/show.html.erb`).
• Render the reviews:

 

<div id="product-reviews">
  <h3>Customer Reviews</h3>
  <%= render partial: 'spree/reviews/review', collection: @product.reviews.approved, as: :review %>
</div>

5. Allowing Reviews from the Order Details Page

We added a custom feature that lets customers leave reviews directly from their order details page, but only after the product has been shipped. This is done by overriding the show.html.erb file for orders.

Steps to Implement:

• Override the `show.html.erb` file located at app/views/spree/orders/show.html.erb and add the following code:

<h1>Order Details</h1>
<% @order.shipments.each do |shipment| %>
  <div>
    <p>Shipment Number: <%= shipment.number %></p>
    <p>Status: <%= shipment.state.capitalize %></p>
    
    <% if shipment.state == 'shipped' %>
      <%= button_to 'Leave a review', new_product_review_path(product_id: shipment.line_items.first.variant.product_id), method: :get, style: 'background-color: black; color: white; border: none; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; border-radius: 4px;' %>
    <% else %>
      <p>You can leave a review once the product is delivered.</p>
    <% end %>
  </div>
<% end %>

• This code loops through each shipment in the order and checks its state. If the shipment is marked as “shipped,” a button is displayed that allows the customer to leave a review for the product.

 

6. Admin Moderation and Review Management

The spree_reviews extension provides an admin interface for moderating and managing reviews.

Steps for Moderation:

• Access reviews in the admin panel under Products > Reviews.
• Approve, reject, or edit reviews.
• Set up notifications for new reviews.

7. Testing the Review System

Thoroughly test the entire review system before going live. Test cases should include:

• Form validation.
• Display and pagination of reviews.
• Functionality of the “Leave a Review” button from the order details page.
• Admin moderation features.

8. Enhancing the Review Experience

Consider adding additional features to enhance the review experience:

• Review Summaries: Show average ratings and the number of reviews.
• Review Filters: Allow users to filter reviews by rating or recency.
• User Photos: Let users upload photos with their reviews.
• Verified Buyer Tags: Highlight reviews from verified purchasers.

9. Going Live

After successful testing, deploy your changes to the live environment. Keep an eye on the system post-launch to ensure everything runs smoothly.

Conclusion

Adding a review section in Spree Commerce, especially with the custom feature of leaving a review directly from the order details page, provides a seamless and engaging user experience. By following the steps in this guide, you can implement a robust review system that builds trust and enhances the shopping experience on your Spree store.

Feel free to customize and extend the functionality further to suit your specific needs. Happy coding!