Laravel E-Commerce Application Development – Order Management

This is part 25 of the Laravel E-Commerce Application Development series. In this part, we will add the order management section to our admin area.

I assume you should have the e-commerce application project on your machine or you can grab it from Laravel E-Commerce Application repository, we will start from where we left it in the last part.

Adding Admin Route

In the last post, we processed the orders by taking payments through PayPal, in this post will be adding an Order Management section to our admin area from where you can control the orders.

Let open the routes/admin.php file and add the below group of routes to it.

Route::group(['prefix' => 'orders'], function () {
   Route::get('/', 'Admin\[email protected]')->name('admin.orders.index');
   Route::get('/{order}/show', 'Admin\Order[email protected]')->name('admin.orders.show');
});

As you can see we have created two routes in the above code example which are pointing to a new controller called OrderController.

Adding Order Link to Menu

Before proceeding let’s add the order link to our admin menu. Open the resources/views/admin/partials/sidebar.blade.php file and add the below markup right after the Dashboard link.

<li>
    <a class="app-menu__item {{ Route::currentRouteName() == 'admin.orders.index' ? 'active' : '' }}" href="{{ route('admin.orders.index') }}">
        <i class="app-menu__icon fa fa-bar-chart"></i>
        <span class="app-menu__label">Orders</span>
    </a>
</li>

Creating Order Controller Class

Open your command line terminal and run the below command to generate the OrderController class.

php artisan make:controller Admin\OrderController

Now open the newly generated controller and update with the below one.

namespace App\Http\Controllers\Admin;

use App\Contracts\OrderContract;
use App\Http\Controllers\BaseController;
class OrderController extends BaseController
{
    protected $orderRepository;

    public function __construct(OrderContract $orderRepository)
    {
        $this->orderRepository = $orderRepository;
    }
}

In the above code I simply injected the OrderContract so we can utilize the OrderRepository class.

Updating Order Contract and Order Repository

Now we will need two new methods in our repository for list all orders and showing an order. So open the OrderContract interface and add the below signatures in it.

public function listOrders(string $order = 'id', string $sort = 'desc', array $columns = ['*']);

public function findOrderByNumber($orderNumber);

Now we will need to implement these two methods in our OrderRepository class. Open the order repository class and add the below two methods in it.

public function listOrders(string $order = 'id', string $sort = 'desc', array $columns = ['*'])
{
    return $this->all($columns, $order, $sort);
}

public function findOrderByNumber($orderNumber)
{
    return Order::where('order_number', $orderNumber)->first();
}

In the first method, we simply listing all orders while in the second method we are loading an order by it’s order number.

Updating Order Controller

Now we will add the methods to OrderController for our two routes defined earlier. Open the OrderController class and add the below two methods.

public function index()
{
    $orders = $this->orderRepository->listOrders();
    $this->setPageTitle('Orders', 'List of all orders');
    return view('admin.orders.index', compact('orders'));
}

public function show($orderNumber)
{
    $order = $this->orderRepository->findOrderByNumber($orderNumber);

    $this->setPageTitle('Order Details', $orderNumber);
    return view('admin.orders.show', compact('order'));
}

The first method is calling our repository to load all orders and then returning a view named index.blade.php. The second method is loading order by order number and returning a view named show.blade.php.

Creating Orders List Page

Create a new folder in resources/views/admin folder and name it orders. Inside this folder create a new file and name it index.blade.php.

Add the below markup in this view file.

@extends('admin.app')
@section('title') {{ $pageTitle }} @endsection
@section('content')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-bar-chart"></i> {{ $pageTitle }}</h1>
            <p>{{ $subTitle }}</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <div class="tile-body">
                    <table class="table table-hover table-bordered" id="sampleTable">
                        <thead>
                        <tr>
                            <th> Order Number </th>
                            <th> Placed By </th>
                            <th class="text-center"> Total Amount </th>
                            <th class="text-center"> Items Qty </th>
                            <th class="text-center"> Payment Status </th>
                            <th class="text-center"> Status </th>
                            <th style="width:100px; min-width:100px;" class="text-center text-danger"><i class="fa fa-bolt"> </i></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($orders as $order)
                            <tr>
                                <td>{{ $order->order_number }}</td>
                                <td>{{ $order->user->fullName }}</td>
                                <td class="text-center">{{ config('settings.currency_symbol') }}{{ $order->grand_total }}</td>
                                <td class="text-center">{{ $order->item_count }}</td>
                                <td class="text-center">
                                    @if ($order->payment_status == 1)
                                        <span class="badge badge-success">Completed</span>
                                    @else
                                        <span class="badge badge-danger">Not Completed</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-success">{{ $order->status }}</span>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" role="group" aria-label="Second group">
                                        <a href="{{ route('admin.orders.show', $order->order_number) }}" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i></a>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="text/javascript" src="{{ asset('backend/js/plugins/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('backend/js/plugins/dataTables.bootstrap.min.js') }}"></script>
    <script type="text/javascript">$('#sampleTable').DataTable();</script>
@endpush

Now if you visit /admin/orders route you will be presented with all order like below.

Creating Orders View Page

Next, we will create a new file within the orders folder and name it show.blade.php. Add the below markup in this file.

@extends('admin.app')
@section('title') {{ $pageTitle }} @endsection
@section('content')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-bar-chart"></i> {{ $pageTitle }}</h1>
            <p>{{ $subTitle }}</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tile">
                <section class="invoice">
                    <div class="row mb-4">
                        <div class="col-6">
                            <h2 class="page-header"><i class="fa fa-globe"></i> {{ $order->order_number }}</h2>
                        </div>
                        <div class="col-6">
                            <h5 class="text-right">Date: {{ $order->created_at->toFormattedDateString() }}</h5>
                        </div>
                    </div>
                    <div class="row invoice-info">
                        <div class="col-4">Placed By
                            <address><strong>{{ $order->user->fullName }}</strong><br>Email: {{ $order->user->email }}</address>
                        </div>
                        <div class="col-4">Ship To
                            <address><strong>{{ $order->first_name }} {{ $order->last_name }}</strong><br>{{ $order->address }}<br>{{ $order->city }}, {{ $order->country }} {{ $order->post_code }}<br>{{ $order->phone_number }}<br></address>
                        </div>
                        <div class="col-4">
                            <b>Order ID:</b> {{ $order->order_number }}<br>
                            <b>Amount:</b> {{ config('settings.currency_symbol') }}{{ round($order->grand_total, 2) }}<br>
                            <b>Payment Method:</b> {{ $order->payment_method }}<br>
                            <b>Payment Status:</b> {{ $order->payment_status == 1 ? 'Completed' : 'Not Completed' }}<br>
                            <b>Order Status:</b> {{ $order->status }}<br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 table-responsive">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>Qty</th>
                                    <th>Product</th>
                                    <th>SKU #</th>
                                    <th>Qty</th>
                                    <th>Subtotal</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @foreach($order->items as $item)
                                        <tr>
                                            <td>{{ $item->id }}</td>
                                            <td>{{ $item->product->name }}</td>
                                            <td>{{ $item->product->sku }}</td>
                                            <td>{{ $item->quantity }}</td>
                                            <td>{{ config('settings.currency_symbol') }}{{ round($item->price, 2) }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection

In this view file, we are displaying the order details along with the order items. Now if you view an order from the orders table you will be presented with an order details view like below.

What’s Next

This is all from me for this Laravel Ecommerce Series, in the final post I will wrap up this series and will share with you some features which were not covered in this series and I will leave it to you.

If you have any question about this post, please leave a comment in the comment box below.