Laravel 12 E-Commerce Project

Laravel 12 E-Commerce Project - User Show Order and Order Details


Laravel 12 E-Commerce Project Tutorial

User: Displaying Order History and Details

Hi everyone, welcome back to the Laravel E-Commerce Project Tutorial. In this video, we will implement the functionality for the user to view their Order History and the details of a specific order from their account dashboard.

  1. Create the `account_orders` Function in `UserController`

    Open your `UserController` and create the `account_orders` function. This function retrieves only the orders belonging to the currently authenticated user (`Auth::user()->id`), orders them by the most recent date, and paginates the results.

    public function account_orders()
    {
        // Retrieve orders for the logged-in user only
        $orders = Order::where("user_id",Auth::user()->id)
                        ->orderBy("created_at","DESC")
                        ->paginate(10);
        return view("user.orders",compact("orders"));
    }
    
  2. Define the Route for User Orders

    Define the route for the user'sorder history page in `web.php` (or your user route file):

    Route::get("/user/orders",[UserController::class,"account_orders"])->name("user.orders");
    
  3. Create the Orders View (`orders.blade.php`)

    Create a new view file named `orders.blade.php` in the `resources/views/user` directory. This view will list the user'sorders.

    <x-app-layout>
        <!-- Include the main content structure for the user'sdashboard area -->
        <!-- ... HTML structure for orders list ... -->
        <table class="table table-striped table-bordered">
            <!-- Table Header (Thead) goes here -->
            <tbody>
                @foreach ($orders as $order)
                <tr>
                    <td>{{ $order->id }}</td>
                    <td>{{ $order->total }}</td>
                    <td>{{ $order->created_at }}</td>
                    <td>
                        @if($order->status == "delivered")
                            <span class="badge bg-success">Delivered</span>
                        @elseif($order->status == "canceled")
                            <span class="badge bg-danger">Canceled</span>
                        @else
                            <span class="badge bg-warning">Ordered</span>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route("user.order.details", ["order_id" => $order->id]) }}" class="btn btn-sm btn-info">View Details</a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        
        {{$orders->links("pagination::bootstrap-5")}}
    </x-app-layout>
    
  4. Create the `order_details` Function in `UserController`

    Add a function to display the detailed view of a single order. This is similar to the Admin'sview, but with an added security check to ensure the order belongs to the user.

    public function order_details($order_id)
    {
        $order = Order::where("user_id",Auth::user()->id)->where("id",$order_id)->firstOrFail();
        $orderitems = OrderItem::where("order_id",$order_id)->orderBy("id")->paginate(12);
        $transaction = Transaction::where("order_id",$order_id)->first(); 
        return view("user.order-details",compact("order","orderitems","transaction"));
    }
    
  5. Define the Route for User Order Details

    Route::get("/user/order/details/{order_id}",[UserController::class,"order_details"])->name("user.order.details");
    
  6. Create the Order Details View (`order-details.blade.php`)

    Create `order-details.blade.php` in `resources/views/user`. This view will display the Order Items, Shipping Address, and Transaction Details (similar to the admin'sorder details view).

    Note: The content structure is not fully provided in the text, but it is expected to mirror the data display logic used in `Part 41` (Admin Show Order Details), ensuring the use of the `$order`, `$orderitems`, and `$transaction` variables.

Verification and Next Steps 👤

Log into a user account and navigate to the My Orders page. You should see a list of all orders placed by this user, with a link to view the full details of each order.

Thanks for watching this video. Don'tforget to subscribe to my channel!

Written by Surfside Media

Senior Full Stack Developer specializing in Web Technologies.