Laravel 8 E-Commerce - Admin Show Orders

In this video, we are going to learn about showing orders in the Admin Panel.

So, let's see how we can display orders in the admin panel.

First, let's create a component for Orders.

Switch to the command prompt and create a new Livewire component by running the following command:

php artisan make:livewire admin/AdminOrderComponent

Next, run the application:

php artisan serve

Now, switch to the project and create a route for this component.

Go to the routes directory and open the web.php file.

Inside the admin middleware group route, add the following code:

Route::get('/admin/orders',AdminOrderComponent::class)->name('admin.orders');

Now, open the AdminOrderComponent.php class file and write the following code:

<?php

namespace App\Http\Livewire\Admin;

use App\Models\Order;
use Livewire\Component;

class AdminOrderComponent extends Component
{    
    public function render()
    {
        $orders = Order::orderBy('created_at','DESC')->paginate(12);
        return view('livewire.admin.admin-order-component',['orders'=>$orders])->layout('layouts.base');
    }
}

Next, open the admin-order-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">   
                        @if(Session::has('order_message'))
                            <div class="alert alert-success" role="alert">{{Session::get('order_message')}}</div>
                        @endif                     
                        <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 colspan="2" class="text-center">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('admin.orderdetails',['order_id'=>$order->id])}}" class="btn btn-info btn-sm">Details</a></td>                                        
                                        <td></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{$orders->links()}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Now, open the base.blade.php layout file and add a link for orders inside the admin menu:

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

That's it! Let's test it out.

Switch to the browser and refresh the page.

Go to the admin menu and you will see the "All Orders" link.

Click on this link and you will see all orders.

And that's how you can show orders in the admin panel.