Laravel 8 E-Commerce - Admin Show Order Details
In this video, we will learn about showing order details in the admin panel.
Specifically, we will explore how to display order items, billing, shipping, and transaction details for each order.
First, let's create a new Livewire component for order details.
Switch to the command prompt and create a new Livewire component by running the following command:
Php artisan make:livewire admin/AdminOrderDetailsComponent
Now that the component has been created, run the application:
php artisan serve
Next, switch to the project and create a route for the new component.
Open the web.php file and add a new route inside the admin middleware route group:
Route::get('/admin/orders/{order_id}',AdminOrderDetailsComponent::class)->name('admin.orderdetails');
Now, open the AdminOrderDetailsComponent.php class file and add the following code:
<?php
namespace App\Http\Livewire\Admin;
use App\Models\Order;
use Livewire\Component;
class AdminOrderDetailsComponent extends Component
{
public $order_id;
public function mount($order_id)
{
$this->$order_id = $order_id;
}
public function render()
{
$order = Order::find($this->order_id);
return view('livewire.admin.admin-order-details-component',['order'=>$order])->layout('layouts.base');
}
}
Next, open the admin-show-order-details.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">
<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('admin.orders')}}" class="btn btn-success pull-right">All Orders</a>
</div>
</div>
</div>
<div class="panel-body">
<table class="table">
<tr>
<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>Cancellation Date</th>
<td>{{$order->canceled_date}}</td>
@endif
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<div class="col-md-6">
Ordered Items
</div>
<div class="col-md-6">
</div>
</div>
</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>
</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, open the AdminOrderComponent.blade.php view file and add a link for details inside the table:
<td><a href="{{route('admin.orderdetails',['order_id'=>$order->id])}}" class="btn btn-info btn-sm">Details</a></td>
Let's test it out.
Switch to your browser and refresh the page.
You should now see a "Details" link.
Click on the link, and you will see a panel with order details, order items, billing, shipping, and transaction information.
And that's how you can show order details for each order in the admin panel.
