Laravel 8 E-Commerce - Show Review & Rating on Product Details Page

In our previous video, we created a system for users to add reviews and ratings to products.

Now, let's explore how to display these reviews and ratings on the product details page.

As you can see, this is the product details page.

We want to display the rating, number of reviews, and all reviews and ratings of the product on this page.

Let's start by switching to the project.

First, open the OrderItem Model and create a function:

public function review()
{
	return $this->hasOne(Review::class,'order_item_id');
}

Next, open the Review Model and write the following code:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Review extends Model
{
    use HasFactory;

    protected $table = "reviews";    
    
    public function orerItem()
    {
        return $this->belongsTo(OrderItem::class);
    }
}

Now, go to the details-component.blade.php view file.

Here, we want to display the product rating, number of reviews, and all reviews of a particular product.

Make the following changes in this view file:

<div class="detail-info">
	<div class="product-rating">  
		<style>
			.color-gray{
				color:#e6e6e6 !important;
			}
		</style>

		@php
			$avgrating = 0;
		@endphp            
		@foreach($product->orderItems->where('rstatus',1) as $orderItem)               
			@php
				$avgrating =  $avgrating + $orderItem->review->rating;
			@endphp
		@endforeach
		@for($i=1;$i<=5;$i++)
			@if($i<=$avgrating)
				<i class="fa fa-star" aria-hidden="true"></i>
			@else
				<i class="fa fa-star color-gray" aria-hidden="true"></i>
			@endif
		@endfor                                                    
		<a href="#" class="count-review">({{$product->orderItems->where('rstatus',1)->count()}} review)</a>                           
	</div>
	<h2 class="product-name">{{$product->name}}</h2>
	<div class="short-desc">
		{!! $product->short_description !!}
	</div>
	<div class="wrap-social">
		<a class="link-socail" href="#"><img src="{{ asset('assets/images/social-list.png') }}" alt=""></a>
	</div>
	@if($product->sale_price > 0  && $sale->status == 1 && $sale->sale_date > Carbon\Carbon::now())
		<div class="wrap-price">
			<span class="product-price">${{$product->sale_price}}</span>
			<del><span class="product-price regprice">${{$product->regular_price}}</span></del>
		</div>
	@else
		<div class="wrap-price"><span class="product-price">${{$product->regular_price}}</span></div>
	@endif
	<div class="stock-info in-stock">
		<p class="availability">Availability: <b>{{$product->stock_status}}</b></p>
	</div>
	<div class="quantity">
		<span>Quantity:</span>
		<div class="quantity-input">
			<input type="text" name="product-quatity" value="1" data-max="120" pattern="[0-9]*" wire:model="qty" >                                
			<a class="btn btn-reduce" href="#" wire:click.prevent="decreseQuantity"></a>
			<a class="btn btn-increase" href="#" wire:click.prevent="increaseQuantity"></a>
		</div>
	</div>
	<div class="wrap-butons">
		@if($product->sale_price > 0  && $sale->status == 1 && $sale->sale_date > Carbon\Carbon::now())
			<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->sale_price}})">Add to Cart</a>
		@else
			<a href="#" class="btn add-to-cart" wire:click.prevent="store({{$product->id}},'{{$product->name}}',{{$product->regular_price}})">Add to Cart</a>
		@endif
		<div class="wrap-btn">
			<a href="#" class="btn btn-compare">Add Compare</a>
			<a href="#" class="btn btn-wishlist">Add Wishlist</a>
		</div>
	</div>
</div>

To display the reviews, write the following code in the review div:

<div class="tab-content-item " id="review">
                                
	<div class="wrap-review-form">
		<style>
			.width-0-percent{
				width:0%;
			}
			.width-20-percent{
				width:20%;
			}
			.width-40-percent{
				width:40%;
			}
			.width-60-percent{
				width:60%;
			}
			.width-80-percent{
				width:80%;
			}
			.width-100-percent{
				width:100%;
			}
		</style>

		
		<div id="comments">
			<h2 class="woocommerce-Reviews-title">{{$product->orderItems->where('rstatus',1)->count()}} review for <span>{{$product->name}}</span></h2>
			<ol class="commentlist">
				@foreach($product->orderItems->where('rstatus',1) as $orderItem)
				<li class="comment byuser comment-author-admin bypostauthor even thread-even depth-1" id="li-comment-20">
					<div id="comment-20" class="comment_container"> 
						<img alt="" src="{{ asset('assets/images/author-avata.jpg') }}" height="80" width="80">
						<div class="comment-text">
							<div class="star-rating">
								<span class="width-{{  $orderItem->review->rating * 20 }}-percent">Rated <strong class="rating">{{$orderItem->review->rating}}</strong> out of 5</span>
							</div>
							<p class="meta"> 
								<strong class="woocommerce-review__author">{{$orderItem->order->user->name}}</strong> 
								<span class="woocommerce-review__dash">–</span>
								<time class="woocommerce-review__published-date" datetime="2008-02-14 20:00" >{{Carbon\Carbon::parse($orderItem->review->created_at)->format('d F Y g:i A')}}</time>
							</p>
							<div class="description">
								<p>{{$orderItem->review->comment}}</p>
							</div>
						</div>
					</div>
				</li>
				@endforeach
			</ol>
		</div><!-- #comments -->                                    

	</div>
</div>

Now, let's test it out.

Switch to your browser and refresh the page.

Click on a product to view its details page.

Here, you can see the rating of this product is 4 and there is 1 review.

Let's check the review.

Scroll down the page and click on the review tab.

Here, you can see the review, including the product name, user name, comment, rating, and review date and time.

Let's check another product.

Go to the shop page and click on a different product.

This time, you can see that there are 0 reviews and the rating is not available.

And that's how you can display reviews and ratings on the product details page.