Laravel 11 E-Commerce - Admin Show Order Details
Welcome back to the Laravel E-Commerce Project Tutorial. In this tutorial, we are going to learn about creating the order details page.
Step 1: Create a Function in AdminController
First, let's go to the AdminController and create a new function:
public function order_items($order_id){
$order = Order::find($order_id);
$orderitems = OrderItem::where('order_id',$order_id)->orderBy('id')->paginate(12);
$transaction = Transaction::where('order_id',$order_id)->first();
return view("admin.order-details",compact('order','orderitems','transaction'));
}
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:
Route::get('/admin/order/items/{order_id}',[AdminController::class,'order_items'])->name('admin.order.items');
Step 3: Create the Order Details View
Next, let's create the view. Go to the resources directory and create a new file inside the admin folder, named order-details.blade.php.
Now, extend the layout by writing:
@extends('layouts.admin')
@section('content')
@endsection
Step 4: Design the Order Details Page
Now, let's open the order-details.html file in a text editor and copy the div with the class "main-content". Paste it inside the order-details.blade.php Content section.
Add a dashboard link here and display the order items, shipping address, and transaction details as follows:
@extends('layouts.admin')
@section('content')
<style>
.table-transaction>tbody>tr:nth-of-type(odd) {
--bs-table-accent-bg: #fff !important;
}
</style>
<div class="main-content-inner">
<div class="main-content-wrap">
<div class="flex items-center flex-wrap justify-between gap20 mb-27">
<h3>Order Details</h3>
<ul class="breadcrumbs flex items-center flex-wrap justify-start gap10">
<li>
<a href="{{route('admin.index')}}">
<div class="text-tiny">Dashboard</div>
</a>
</li>
<li>
<i class="icon-chevron-right"></i>
</li>
<li>
<div class="text-tiny">Order Items</div>
</li>
</ul>
</div>
<div class="wg-box mt-5 mb-5">
<div class="flex items-center justify-between gap10 flex-wrap">
<div class="wg-filter flex-grow">
<h5>Ordered Details</h5>
</div>
<a class="tf-button style-1 w208" href="{{route('admin.orders')}}">Back</a>
</div>
<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 class="wg-box mt-5">
<div class="flex items-center justify-between gap10 flex-wrap">
<div class="wg-filter flex-grow">
<h5>Ordered Items</h5>
</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="icon-eye"></i>
</div>
</div>
</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="divider"></div>
<div class="flex items-center justify-between flex-wrap gap10 wgp-pagination">
{{$orderitems->links('pagination::bootstrap-5')}}
</div>
</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>
<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>
@endsection
Step 5: Add a Link to the Orders Page
Now, go to the orders.blade.php view file and add a link for order details:
<td class="text-center">
<a href="{{route('admin.order.items',['order_id'=>$order->id])}}">
<div class="list-icon-function view-icon">
<div class="item eye">
<i class="icon-eye"></i>
</div>
</div>
</a>
</td>
Testing the Order Details Page
Now it's done! Let's check. Refresh the orders page, click on the eye icon, and you can see the order details.
In this way, you can create an order details page.
That's all about creating the order details page.
