In last video we have created add User Review & Rating on Product.
Now lets see how can we show the Review & Rating on Product Details Page.
You can see here this the product details page and.
On this product details page lets show here the rating, number of review here.
And inside this review tab lets display all review and rating of the product.
alright So switch to the project.
And first of all lets open the OrderItem Model.
And lets create a function.

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

Now 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 detials-component.blade.php view file.
Here lets show the product rating, no of reivews and here show the all review of particular product.
Lets mkae 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>

And for Showing the reviews write the following code in 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>

Alright, now all done so lets check this.
So switch to the browser and refresh the page.
Now lets check the review and rating.
So click on product and see the details page.
And here you can see the rating of this product is 4 and 1 review.
Now lets check the review.
So lets scroll the page.
And here now click on review tab and here you see the review.
Here is no of review product name.
User name comment, rating and here you can see the review date time.
Now lets check the another product so go to the shop page.
Now lets click on this product this time here you can see here the 0 review and rating is not available.
So in this way you can Show Review & Rating on Product Details Page.