In this video we are going to learn about User Review & Rating on Product.
So let see how can user add review and rating on product.
First of all lets create model and migration for review.
So switch to command prompt and lets run the command.
Now switch to project and lets open the create_reviews_table migration and add the following code.
Now lets add a column inside the OrderItems table.
For that switch to command prompt.
And create a migration for adding new column inside the orderitems table.
Now switch to the project and lets open this new migration and add the following code.
Alright now lets migrate the migration.
So go to the command prompt and run the command.
Now lets run the application
Now switch to the project.
And lets open the user-order-details.blade.php component view file and lets modifiy the code as following in ordered items panel.
Now lets create a new livewire component.
So switch to the command prompt and run the following command.
Now run the application
Now switch to the project and lets create route for this new component
Go to the web.php file and inside the user middleware route group lets create new route
Now lets open the UserReviewComponent.php class file and lets write the following code.
Now go to the user-review-component.blade.php view file write the following code.
Now its done so lets check it so switch to the browser and refresh the page.
Now lets click on details link and here write review link is not showing.
Because this order has been canceled.
Now lets check another order So lets check this order which status is delivered.
Now here you can see the write review link.
From here you set the rating by click on this star icon.
And in this textarea you can add the review or comment here.
So write here the review.
Now click on submit Review has been added.
Now here you can see the write review link is removed from here.
In same way you can write review for another product.
So in this way you can create add Review & Rating on Product.
So let see how can user add review and rating on product.
First of all lets create model and migration for review.
So switch to command prompt and lets run the command.
php artisan make:model Review –m
Now switch to project and lets open the create_reviews_table migration and add the following code.
<?php
use Illuminate\\Database\\Migrations\\Migration;
use Illuminate\\Database\\Schema\\Blueprint;
use Illuminate\\Support\\Facades\\Schema;
class CreateReviewsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('reviews', function (Blueprint $table) {
$table->id();
$table->integer('rating');
$table->text('comment');
$table->bigInteger('order_item_id')->unsigned();
$table->timestamps();
$table->foreign('order_item_id')->references('id')->on('order_items')->onDelete('cascade');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('reviews');
}
}
Now lets add a column inside the OrderItems table.
For that switch to command prompt.
And create a migration for adding new column inside the orderitems table.
php artisan make:migration add_rstatus_to_order_items_table --table= order_items
Now switch to the project and lets open this new migration and add the following code.
<?php
use Illuminate\\Database\\Migrations\\Migration;
use Illuminate\\Database\\Schema\\Blueprint;
use Illuminate\\Support\\Facades\\Schema;
class AddRstatusToOrderItemsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('order_items', function (Blueprint $table) {
$table->boolean('rstatus')->default(false);
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('order_items', function (Blueprint $table) {
$table->dropColumn('rstatus');
});
}
}
Alright now lets migrate the migration.
So go to the command prompt and run the command.
php artisan migrate
Now lets run the application
php artisan serve
Now switch to the project.
And lets open the user-order-details.blade.php component view file and lets modifiy the code as following in ordered items panel.
<div class=\"wrap-iten-in-cart\">
<h3 class=\"box-title\">Products Name</h3>
<ul class=\"products-cart\">
@foreach ($order->orderItems as $item)
<li class=\"pr-cart-item\">
<div class=\"product-image\">
<figure><img src=\"{{ asset('assets/images/products') }}/{{$item->product->image}}\" alt=\"{{$item->product->name}}\"></figure>
</div>
<div class=\"product-name\">
<a class=\"link-to-product\" href=\"{{route('product.details',['slug'=>$item->product->slug])}}\">{{$item->product->name}}</a>
</div>
<div class=\"price-field produtc-price\"><p class=\"price\">${{$item->price}}</p></div>
<div class=\"quantity\">
<h5>{{$item->quantity}}</h5>
</div>
<div class=\"price-field sub-total\"><p class=\"price\">${{$item->price * $item->quantity}}</p></div>
@if($order->status == 'delivered' && $item->rstatus == false)
<div class=\"price-field sub-total\"><p class=\"price\"><a href=\"{{route('user.review',['order_item_id'=>$item->id])}}\">Write Review</a></p></div>
@endif
</li>
@endforeach
</ul>
</div>
Now lets create a new livewire component.
So switch to the command prompt and run the following command.
php artisan make:livewire user/UserReviewComponent
Now run the application
php artisan serve
Now switch to the project and lets create route for this new component
Go to the web.php file and inside the user middleware route group lets create new route
Route::get('/user/review/{order_item_id}',UserReviewComponent::class)->name('user.review');
Now lets open the UserReviewComponent.php class file and lets write the following code.
<?php
namespace App\\Http\\Livewire\\User;
use App\\Models\\OrderItem;
use App\\Models\\Review;
use Livewire\\Component;
class UserReviewComponent extends Component
{
public $order_item_id;
public $rating;
public $comment;
public function mount($order_item_id)
{
$this->order_item_id = $order_item_id;
}
public function updated($fields)
{
$this->validateOnly($fields,[
'rating' => 'required',
'comment' => 'required'
]);
}
public function addReview()
{
$this->validate([
'rating' => 'required',
'comment' => 'required'
]);
$review = new Review();
$review->rating = $this->rating;
$review->comment = $this->comment;
$review->order_item_id= $this->order_item_id;
$review->save();
$orderItem = OrderItem::find($this->order_item_id);
$orderItem->rstatus = true;
$orderItem->save();
session()->flash('message','Your review has been added successfully!');
}
public function render()
{
$orderItem = OrderItem::find($this->order_item_id);
return view('livewire.user.user-review-component',['orderItem'=>$orderItem])->layout('layouts.base');
}
}
Now go to the user-review-component.blade.php view file write the following code.
<div>
<div class=\"container\" style=\"padding: 30px 0;\">
<div class=\"row\">
<div class=\"col-md-12\">
<div id=\"review_form_wrapper\">
<div id=\"comments\">
<h2 class=\"woocommerce-Reviews-title\">Add review for</h2>
<ol class=\"commentlist\">
<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/products') }}/{{$orderItem->product->image}}\" height=\"80\" width=\"80\">
<div class=\"comment-text\">
<p class=\"meta\">
<strong class=\"woocommerce-review__author\">{{$orderItem->product->name}}</strong>
</p>
</div>
</div>
</li>
</ol>
</div><!-- #comments -->
<div id=\"review_form\">
@if(Session::has('message'))
<p class=\"alert alert-success\" role=\"alert\">{{Session::get('message')}}</p>
@endif
<div id=\"respond\" class=\"comment-respond\">
<form wire:submit.prevent=\"addReview\" id=\"commentform\" class=\"comment-form\">
<div class=\"comment-form-rating\">
<span>Your rating</span>
<p class=\"stars\">
<label for=\"rated-1\"></label>
<input type=\"radio\" id=\"rated-1\" name=\"rating\" value=\"1\" wire:model=\"rating\">
<label for=\"rated-2\"></label>
<input type=\"radio\" id=\"rated-2\" name=\"rating\" value=\"2\" wire:model=\"rating\">
<label for=\"rated-3\"></label>
<input type=\"radio\" id=\"rated-3\" name=\"rating\" value=\"3\" wire:model=\"rating\">
<label for=\"rated-4\"></label>
<input type=\"radio\" id=\"rated-4\" name=\"rating\" value=\"4\" wire:model=\"rating\">
<label for=\"rated-5\"></label>
<input type=\"radio\" id=\"rated-5\" name=\"rating\" value=\"5\" checked=\"checked\" wire:model=\"rating\">
@error('rating') <span class=\"text-danger\">{{$message}}</span> @enderror
</p>
</div>
<p class=\"comment-form-comment\">
<label for=\"comment\">Your review <span class=\"required\">*</span>
</label>
<textarea id=\"comment\" name=\"comment\" cols=\"45\" rows=\"8\" wire:model=\"comment\"></textarea>
@error('comment') <span class=\"text-danger\">{{$message}}</span> @enderror
</p>
<p class=\"form-submit\">
<input name=\"submit\" type=\"submit\" id=\"submit\" class=\"submit\" value=\"Submit\">
</p>
</form>
</div><!-- .comment-respond-->
</div><!-- #review_form -->
</div><!-- #review_form_wrapper -->
</div>
</div>
</div>
</div>
Now its done so lets check it so switch to the browser and refresh the page.
Now lets click on details link and here write review link is not showing.
Because this order has been canceled.
Now lets check another order So lets check this order which status is delivered.
Now here you can see the write review link.
From here you set the rating by click on this star icon.
And in this textarea you can add the review or comment here.
So write here the review.
Now click on submit Review has been added.
Now here you can see the write review link is removed from here.
In same way you can write review for another product.
So in this way you can create add Review & Rating on Product.
