In this video we are going to learn about Show Orders and Order Details in User Panel.
So let see how can we show all orders and their details in user or customer panel.
So first of all lets create two new livewire component
One for orders and another for order details
So switch to the command prompt and run the command.


php artisan make:livewire user/UserOrdersComponent

php artisan make:livewire user/UserOrderDetailsComponent



Alright now lets run the application


php artisan serve


Now switch to project and lets create route
So go inside the routes directory then open web.php file
Inside the user middleware route group create new route


Route::get('/user/orders',UserOrdersComponent::class)->name(‘user.orders');
Route::get('/user/orders/{order_id}',UserOrderDetailsComponent::class)->name(‘user.orderdetails');



Now lets open the UserOrdersComponent.php class file and lets write the following code.

<?php

namespace App\\Http\\Livewire\\User;

use App\\Models\\Order;
use Illuminate\\Support\\Facades\\Auth;
use Livewire\\Component;

class UserOrdersComponent extends Component
{
public function render()
{
$orders = Order::where('user_id',Auth::user()->id)->orderBy('created_at','DESC')->paginate(12);
return view('livewire.user.user-orders-component',['orders'=>$orders])->layout('layouts.base');
}
}


Now lets open the user-orders-component.blade.php view file and write the following code.

<div>
<style>
nav svg{
height: 20px;
}
nav .hidden{
display: block !important;
}
</style>

<div class=\"container\" style=\"padding: 30px 0;\">
<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
All Orders
</div>
<div class=\"panel-body\">
<table class=\"table table-striped\">
<thead>
<tr>
<th>OrderId</th>
<th>Subtotal</th>
<th>Discount</th>
<th>Tax</th>
<th>Total</th>
<th>First Name</th>
<th>Last Name</th>
<th>Mobile</th>
<th>Email</th>
<th>Zipcode</th>
<th>Status</th>
<th>Order Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach ($orders as $order)
<tr>
<td>{{$order->id}}</td>
<td>${{$order->subtotal}}</td>
<td>${{$order->discount}}</td>
<td>${{$order->tax}}</td>
<td>${{$order->total}}</td>
<td>{{$order->firstname}}</td>
<td>{{$order->lastname}}</td>
<td>{{$order->mobile}}</td>
<td>{{$order->email}}</td>
<td>{{$order->zipcode}}</td>
<td>{{$order->status}}</td>
<td>{{$order->created_at}}</td>
<td><a href=\"{{route('user.orderdetails',['order_id'=>$order->id])}}\" class=\"btn btn-info btn-sm\">Details</td>
</tr>
@endforeach
</tbody>
</table>
{{$orders->links()}}
</div>
</div>
</div>
</div>
</div>
</div>


Now open the UserOrderDetialsComponent.php class file and write the following code.

<?php

namespace App\\Http\\Livewire\\User;

use App\\Models\\Order;
use Livewire\\Component;
use Illuminate\\Support\\Facades\\Auth;

class UserOrderDetailsComponent extends Component
{
public $order_id;

public function mount($order_id)
{
$this->order_id = $order_id;
}

public function render()
{
$order = Order::where('user_id',Auth::user()->id)->where('id',$this->order_id)->first();
return view('livewire.user.user-order-details-component',['order'=>$order])->layout('layouts.base');
}
}



Now lets open the user-order-detials-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\">
@if(Session::has('order_message'))
<div class=\"alert alert-success\" role=\"alert\">{{Session::get('order_message')}}</div>
@endif
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
<div class=\"row\">
<div class=\"col-md-6\">
Order Details
</div>
<div class=\"col-md-6\">
<a href=\"{{route('user.orders')}}\" class=\"btn btn-success pull-right\">My Orders</a>
</div>
</div>
</div>
<div class=\"panel-body\">
<table class=\"table\">
<th>Order ID</th>
<td>{{$order->id}}</td>
<th>Order Date</th>
<td>{{$order->created_at}}</td>
<th>Status</th>
<td>{{$order->status}}</td>
@if($order->status == 'delivered')
<th>Delivery Date</th>
<td>{{$order->delivered_date}}</td>
@elseif($order->status == 'canceled')
<th>Canceled Date</th>
<td>{{$order->canceled_date}}</td>
@endif
</table>
</div>
</div>
</div>
</div>
<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
Ordered Items
</div>
<div class=\"panel-body\">
<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>
<div class=\"summary\">
<div class=\"order-summary\">
<h4 class=\"title-box\">Order Summary</h4>
<p class=\"summary-info\"><span class=\"title\">Subtotal</span><b class=\"index\">${{$order->subtotal}}</b></p>
<p class=\"summary-info\"><span class=\"title\">Tax</span><b class=\"index\">${{$order->tax}}</b></p>
<p class=\"summary-info\"><span class=\"title\">Shipping</span><b class=\"index\">Free Shipping</b></p>
<p class=\"summary-info\"><span class=\"title\">Total</span><b class=\"index\">${{$order->total}}</b></p>
</div>
</div>
</div>
</div>
</div>
</div>

<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
Billing Details
</div>
<div class=\"panel-body\">
<table class=\"table\">
<tr>
<th>First Name</th>
<td>{{$order->firstname}}</td>
<th>Last Name</th>
<td>{{$order->lastname}}</td>
</tr>
<tr>
<th>Phone</th>
<td>{{$order->mobile}}</td>
<th>Email</th>
<td>{{$order->email}}</td>
</tr>
<tr>
<th>Line1</th>
<td>{{$order->line1}}</td>
<th>Line2</th>
<td>{{$order->line2}}</td>
</tr>
<tr>
<th>City</th>
<td>{{$order->city}}</td>
<th>Province</th>
<td>{{$order->province}}</td>
</tr>
<tr>
<th>Country</th>
<td>{{$order->country}}</td>
<th>Zipcode</th>
<td>{{$order->zipcode}}</td>
</tr>
</table>

</div>
</div>
</div>
</div>

@if($order->is_shipping_different)
<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
Shipping Details
</div>
<div class=\"panel-body\">
<table class=\"table\">
<tr>
<th>First Name</th>
<td>{{$order->shipping->firstname}}</td>
<th>Last Name</th>
<td>{{$order->shipping->lastname}}</td>
</tr>
<tr>
<th>Phone</th>
<td>{{$order->shipping->mobile}}</td>
<th>Email</th>
<td>{{$order->shipping->email}}</td>
</tr>
<tr>
<th>Line1</th>
<td>{{$order->shipping->line1}}</td>
<th>Line2</th>
<td>{{$order->shipping->line2}}</td>
</tr>
<tr>
<th>City</th>
<td>{{$order->shipping->city}}</td>
<th>Province</th>
<td>{{$order->shipping->province}}</td>
</tr>
<tr>
<th>Country</th>
<td>{{$order->shipping->country}}</td>
<th>Zipcode</th>
<td>{{$order->shipping->zipcode}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
@endif

<div class=\"row\">
<div class=\"col-md-12\">
<div class=\"panel panel-default\">
<div class=\"panel-heading\">
Transaction
</div>
<div class=\"panel-body\">
<table class=\"table\">
<tr>
<th>Transaction Mode</th>
<td>{{$order->transaction->mode}}</td>
</tr>
<tr>
<th>Status</th>
<td>{{$order->transaction->status}}</td>
</tr>
<tr>
<th>Transaction Date</th>
<td>{{$order->transaction->created_at}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>


Now lets add the link for Orders inside the user menu.
So go to the base.blade.php layout file and inside the user menu add the following code.


<li class=\"menu-item\" >
<a title=\"My Orders\" href=\"{{ route('user.orders') }}\">My Orders</a>
</li>


Now save this and lets check this.
So switch to the browser and refresh the page.
Now lets view this order details.
So in this way your show orders and order details in User Panel.