Admin: Displaying Full Order Details

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. In this video, we will create the page to display the full details of a specific order for the admin.

1. Create the `order_items` Function in `AdminController`

   Open your `AdminController` and create the `order_items` function. This function accepts the `$order_id`, retrieves the main `Order` record, fetches all associated `OrderItem` records, and retrieves the related `Transaction` record.

   public function order_items($order_id){
       $order = Order::find($order_id);
       $orderitems = OrderItem::where("order_id",$order_id)->orderBy("id")->paginate(12);
       // Assumes Transaction model has a one-to-one relationship with Order, which is queried here
       $transaction = Transaction::where("order_id",$order_id)->first(); 
       return view("admin.order-details",compact("order","orderitems","transaction"));
   }
   

2. Define the Route for Order Details

   Define the route for the order details page in `web.php`:

   Route::get("/admin/order/items/{order_id}",[AdminController::class,"order_items"])->name("admin.order.details");
   

   Note: The route name defined in `Part 40` (`admin.order.details`) will need to be updated to match the one used here (`admin.order.items`) or vice versa for consistency. We will use `admin.order.details` as it'smore descriptive in the context of `Part 40`'slink, and update the code block above to reflect this corrected route name in the view file.

3. Create the Order Details View (`order-details.blade.php`)

   Create a new view file named `order-details.blade.php` in the `resources/views/admin` directory and extend the admin layout. The view will be structured into three main sections: Order Items, Shipping Address, and Transaction Details.

   Displaying Order Items

   <div class="table-responsive m-b-30">
       <table class="table table-striped table-bordered">
           <thead>
               <!-- Table headers for Product, Price, Quantity, Subtotal, etc. -->
           </thead>
           <tbody>
               @foreach ($orderitems as $item)
               <tr>
                   <td>{{ $item->id }}</td>
                   <td>{{ $item->product->name }}</td>
                   <td>{{ $item->price }}</td>
                   <td>{{ $item->quantity }}</td>
                   <td>{{ $item->price * $item->quantity }}</td>
                   <td>{{ $item->rstatus }}</td>
               </tr>
               @endforeach
           </tbody>
       </table>
       {{ $orderitems->links("pagination::bootstrap-5") }}
   </div>
   

   Displaying Shipping Address

   The shipping details are stored directly in the `Order` model:

   <div class="card mb-3">
       <div class="card-body mt-5">
           <h5>Shipping Address</h5>
           <p>{{ $order->name }}</p>
           <p>{{ $order->address }}, {{ $order->locality }}, {{ $order->landmark }}</p>
           <p>{{ $order->city }}, {{ $order->state }}, {{ $order->zip }}</p>
           <p>Mobile : {{ $order->phone }}</p>
       </div>
   </div>
   

   Displaying Transaction and Financial Summary

   This section uses data from both the `Order` model (for totals) and the `Transaction` model (for payment mode and status):

   <div class="card mb-3">
       <div class="card-body mt-5">
           <h5>Transactions</h5>
           <table class="table table-striped table-bordered table-transaction">
           <tbody>
               <tr>
                   <th>Subtotal</th>
                   <td>{{ $order->subtotal }}</td>
                   <th>Tax</th>
                   <td>{{ $order->tax }}</td>
                   <th>Discount</th>
                   <td>{{ $order->discount }}</td>
               </tr>
               <tr>
                   <th>Total</th>
                   <td>{{ $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>
           </tbody>
           </table>
       </div>
   </div>
   

Verification and Testing 🔍

Go to the Admin Orders list (`/admin/orders`). Clicking the View icon for any order should now redirect you to the order details page, displaying the ordered products, the shipping address, and the financial transaction information.