Laravel 8 E-Commerce - User Show Orders and Order Details
In this video, we will learn about displaying orders and order details in the user panel.
Specifically, we will explore how to show all orders and their details in the user or customer panel.
First, let's create two new Livewire components: one for orders and another for order details.
Switch to the command prompt and run the following command:
php artisan make:livewire user/UserOrdersComponent
php artisan make:livewire user/UserOrderDetailsComponent
Now, let's run the application:
php artisan serve
Next, switch to the project and create a route.
Go to the routes directory and open the web.php file.
Inside the user middleware route group, create a new route:
Route::get('/user/orders',UserOrdersComponent::class)->name('user.orders');
Route::get('/user/orders/{order_id}',UserOrderDetailsComponent::class)->name('user.orderdetails');
Now, open the UserOrdersComponent.php class file and add 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');
}
}
Next, open the user-orders-component.blade.php view file and add 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</a></td>
</tr>
@endforeach
</tbody>
</table>
{{$orders->links()}}
</div>
</div>
</div>
</div>
</div>
</div>
Now, open the UserOrderDetailsComponent.php class file and add 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');
}
}
Next, open the user-order-details-component.blade.php view file and add 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>
Finally, let's add a link for Orders inside the user menu.
Go to the base.blade.php layout file and add the following code inside the user menu:
<li class="menu-item" >
<a title="My Orders" href="{{ route('user.orders') }}">My Orders</a>
</li>
Save the changes and let's test it out.
Switch to your browser and refresh the page.
Now, you can view the order details.
And that's how you can display orders and order details in the User Panel.
