Laravel 11 E-Commerce - User Show Order and Order Details
Welcome back to the Laravel E-Commerce Project Tutorial. In this video, we will learn about showing orders and order details for users.
Step 1: Create a New Function in UserController
First, let's create a new function in the UserController to show orders and order details for users:
public function account_orders()
{
$orders = Order::where('user_id',Auth::user()->id)->orderBy('created_at','DESC')->paginate(10);
return view('user.orders',compact('orders'));
}
Step 2: Create a Route for the Function
Now, let's create a route for this function. Go to the web.php file and create a new route inside the user middleware group:
Route::get('/account-orders',[UserController::class,'account_orders'])->name('user.account.orders');
Step 3: Create the Orders View
Next, let's create the orders view inside the user directory. Go to the resources/views/user directory and create a new file called orders.blade.php:
Now, open this file and extend the layout as follows:
@extends('layouts.app')
@section('content')
@endsection
Step 4: Design the Orders Page
Now, go to the template directory and open the orders.html file in a text editor. Copy the main content and paste it inside the orders.blade.php file as follows:
After that, make changes as follows:
@extends('layouts.app')
@section('content')
<style>
.table > :not(caption) > tr > th {
padding: 0.625rem 1.5rem .625rem !important;
background-color: #6a6e51 !important;
}
.table > tr > td {
padding: 0.625rem 1.5rem .625rem !important;
}
.table-bordered > :not(caption) > tr > th, .table-bordered > :not(caption) > tr > td {
border-width: 1px 1px;
border-color: #6a6e51;
}
.table > :not(caption) > tr > td {
padding: .8rem 1rem !important;
}
</style>
<main class="pt-90">
<div class="mb-4 pb-4"></div>
<section class="my-account container">
<h2 class="page-title">Orders</h2>
<div class="row">
<div class="col-lg-2">
@include('user.account-nav')
</div>
<div class="col-lg-10">
<div class="wg-table table-all-user">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 80px">OrderNo</th>
<th>Name</th>
<th class="text-center">Phone</th>
<th class="text-center">Subtotal</th>
<th class="text-center">Tax</th>
<th class="text-center">Total</th>
<th class="text-center">Status</th>
<th class="text-center">Order Date</th>
<th class="text-center">Items</th>
<th class="text-center">Delivered On</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach ($orders as $order)
<tr>
<td class="text-center">{{"1" . str_pad($order->id,4,"0",STR_PAD_LEFT)}}</td>
<td class="text-center">{{$order->name}}</td>
<td class="text-center">{{$order->phone}}</td>
<td class="text-center">${{$order->subtotal}}</td>
<td class="text-center">${{$order->tax}}</td>
<td class="text-center">${{$order->total}}</td>
<td class="text-center">
@if($order->status=='delivered')
<span class="badge bg-success">Delivered</span>
@elseif($order->status=='canceled')
<span class="badge bg-danger">Canceled</span>
@else
<span class="badge bg-warning">Ordered</span>
@endif
</td>
<td class="text-center">{{$order->created_at}}</td>
<td class="text-center">{{$order->orderItems->count()}}</td>
<td>{{$order->delivered_date}}</td>
<td class="text-center">
<div class="list-icon-function view-icon">
<div class="item eye">
<i class="fa fa-eye"></i>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="divider"></div>
<div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">
{{$orders->links('pagination::bootstrap-5')}}
</div>
</div>
</div>
</section>
</main>
@endsection
Step 5: Create a Function for Order Details
Now, let's create a new function in the UserController to display order details:
public function account_order_details($order_id)
{
$order = Order::where('user_id',Auth::user()->id)->find($order_id);
$orderItems = OrderItem::where('order_id',$order_id)->orderBy('id')->paginate(12);
$transaction = Transaction::where('order_id',$order_id)->first();
return view('user.order-details',compact('order','orderItems','transaction'));
}
Step 6: Create a Route for Order Details
Now, let's create a route for this function. Go to the web.php file and create a new route in the user middleware group:
Route::get('/account-order-detials/{order_id}',[UserController::class,'account_order_details'])->name('user.acccount.order.details');
Step 7: Create the Order Details View
Next, let's create the order-details view. Go to the resources/views/user folder and create a new view called order-details.blade.php:
Now, extend the layout:
@extends('layouts.app')
@section('content')
@endsection
Step 8: Design the Order Details Page
Now, go to the template directory and open the order-details.html file in a text editor. Copy the main content and paste it inside the order-details.blade.php file as follows:
After that, make changes as follows:
@extends('layouts.app')
@section('content')
<style>
.table-transaction>tbody>tr:nth-of-type(odd) {
--bs-table-accent-bg: #fff !important;
}
.table-transaction th, .table-transaction td {
padding: 0.625rem 1.5rem .25rem; !important;
color:#000 !important;
}
.table > :not(caption) > tr > th {
padding: 0.625rem 1.5rem .25rem !important;
background-color: #6a6e51 !important;
}
.table-bordered>:not(caption)>*>*{border-width:inherit;line-height:32px;font-size:14px;border:1px solid #e1e1e1;vertical-align:middle;}
.table-striped .image{display:flex;align-items:center;justify-content:center;width:50px;height:50px;flex-shrink:0;border-radius:10px;overflow:hidden;}
.table-striped td:nth-child(1){min-width:250px;padding-bottom:7px;}
.pname{display:flex;gap:13px;}
.table-bordered > :not(caption) > tr > th, .table-bordered > :not(caption) > tr > td {
border-width: 1px 1px;
border-color: #6a6e51;
}
</style>
<main class="pt-90">
<div class="mb-4 pb-4"></div>
<section class="my-account container">
<h2 class="page-title">Order's Details</h2>
<div class="row">
<div class="col-lg-2">
@include('user.account-nav')
</div>
<div class="col-lg-10">
@if(Session::has('status'))
<p class="alert alert-success">{{Session::get('status')}}</p>
@endif
<div class="wg-box mt-5 mb-5">
<div class="row">
<div class="col-6">
<h5>Ordered Details</h5>
</div>
<div class="col-6 text-right">
<a class="btn btn-sm btn-danger" href="{{route('user.account.orders')}}">Back</a>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-transaction">
<tr>
<th>Order No</th>
<td>{{"1" . str_pad($transaction->order->id,4,"0",STR_PAD_LEFT)}}</td>
<th>Mobile</th>
<td>{{$transaction->order->phone}}</td>
<th>Pin/Zip Code</th>
<td>{{$transaction->order->zip}}</td>
</tr>
<tr>
<th>Order Date</th>
<td>{{$transaction->order->created_at}}</td>
<th>Delivered Date</th>
<td>{{$transaction->order->delivered_date}}</td>
<th>Canceled Date</th>
<td>{{$transaction->order->canceled_date}}</td>
</tr>
<tr>
<th>Order Status</th>
<td colspan="5">
@if($transaction->order->status=='delivered')
<span class="badge bg-success">Delivered</span>
@elseif($transaction->order->status=='canceled')
<span class="badge bg-danger">Canceled</span>
@else
<span class="badge bg-warning">Ordered</span>
@endif
</td>
</tr>
</table>
</div>
</div>
<div class="wg-box wg-table table-all-user">
<div class="row">
<div class="col-6">
<h5>Ordered Items</h5>
</div>
<div class="col-6 text-right">
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Price</th>
<th class="text-center">Quantity</th>
<th class="text-center">SKU</th>
<th class="text-center">Category</th>
<th class="text-center">Brand</th>
<th class="text-center">Options</th>
<th class="text-center">Return Status</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
@foreach ($orderItems as $orderitem)
<tr>
<td class="pname">
<div class="image">
<img src="{{asset('uploads/products/thumbnails')}}/{{$orderitem->product->image}}" alt="" class="image">
</div>
<div class="name">
<a href="{{route('shop.product.details',["product_slug"=>$orderitem->product->slug])}}" target="_blank" class="body-title-2">{{$orderitem->product->name}}</a>
</div>
</td>
<td class="text-center">${{$orderitem->price}}</td>
<td class="text-center">{{$orderitem->quantity}}</td>
<td class="text-center">{{$orderitem->product->SKU}}</td>
<td class="text-center">{{$orderitem->product->category->name}}</td>
<td class="text-center">{{$orderitem->product->brand->name}}</td>
<td class="text-center">{{$orderitem->options}}</td>
<td class="text-center">{{$orderitem->rstatus == 0 ? "No":"Yes"}}</td>
<td class="text-center">
<a href="{{route('shop.product.details',["product_slug"=>$orderitem->product->slug])}}" target="_blank">
<div class="list-icon-function view-icon">
<div class="item eye">
<i class="fa fa-eye"></i>
</div>
</div>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div class="divider"></div>
<div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">
{{$orderItems->links('pagination::bootstrap-5')}}
</div>
<div class="wg-box mt-5">
<h5>Shipping Address</h5>
<div class="my-account__address-item col-md-6">
<div class="my-account__address-item__detail">
<p>{{$transaction->order->name}}</p>
<p>{{$transaction->order->address}}</p>
<p>{{$transaction->order->locality}}</p>
<p>{{$transaction->order->city}}, {{$transaction->order->country}}</p>
<p>{{$transaction->order->landmark}}</p>
<p>{{$transaction->order->zip}}</p>
<br />
<p>Mobile : {{$transaction->order->phone}}</p>
</div>
</div>
</div>
<div class="wg-box mt-5">
<h5>Transactions</h5>
<div class="table-responsive">
<table class="table table-striped table-bordered table-transaction">
<tr>
<th>Subtotal</th>
<td>${{$transaction->order->subtotal}}</td>
<th>Tax</th>
<td>${{$transaction->order->tax}}</td>
<th>Discount</th>
<td>${{$transaction->order->discount}}</td>
</tr>
<tr>
<th>Total</th>
<td>${{$transaction->order->total}}</td>
<th>Payment Mode</th>
<td>{{$transaction->mode}}</td>
<th>Status</th>
<td>
@if($transaction->status=='approved')
<span class="badge bg-success">Approved</span>
@elseif($transaction->status=='declined')
<span class="badge bg-danger">Declined</span>
@elseif($transaction->status=='refunded')
<span class="badge bg-secondary">Refunded</span>
@else
<span class="badge bg-warning">Pending</span>
@endif
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
</main>
@endsection
Step 9: Add the Order Details Link
Now, go to the orders.blade.php file in the user directory and add the order details link:
<td class="text-center">
<a href="{{route('user.acccount.order.details',['order_id'=>$order->id])}}">
<div class="list-icon-function view-icon">
<div class="item eye">
<i class="fa fa-eye"></i>
</div>
</div>
</a>
</td>
Step 10: Add the Orders Link
Now, go to the account-nav.blade.php view file and add the link for the orders:
<li><a href="{{route('user.account.orders')}}" class="menu-link menu-link_us-s {{Route::is('user.account.orders') ? 'menu-link_active':''}}">Orders</a></li>
Testing the Orders and Order Details Page
Now it's done! Let's check. Go to the user dashboard page, click on orders, and you can see the orders page. Now, for viewing the order details, just click on the eye icon, and you will see the order details.
In this way, you can show orders and order details to the user.
That's all about showing orders and order details to the user.
