User: order history

PODCAST

• On the Order history page, a user can view all the orders the user has ever placed

REMARKS

• The history is a static view with no interaction, so we can use a simple Blade view for this page or a Livewire component
• We will use a Livewire component for this page, so we can easily add more functionality later on if we want to

Preparation

Create a Histories component

• Create a new Livewire component with the terminal command php artisan livewire:make User/History
  • app/Livewire/User/History.php (the component class)
  • resources/views/livewire/user/history.blade.php (the component view)
• Open the component class and change the layout to layouts.vinylshop

class History extends Component
<?php

namespace App\Livewire\User;

use Livewire\Attributes\Layout;     
use Livewire\Component;

class History extends Component
{
    #[Layout('layouts.vinylshop', ['title' => 'Your order history', 'description' => 'Your order history'])] 
    public function render()
    {
        return view('livewire.user.history');
    }
}

Add a new route

• Add a new get-route for the History to the routes/web.php file
• Update the navigation menu in resources/views/components/layouts/nav-bar.blade.php

• Add the route in the new user group
• Protected the group with the auth and active middleware, so only logged-in, active users can access this routes
  • The URL is user/history (prefix is already set to user)
  • The view is user/history
  • The route name is user.history (the group name is already set to user.)

Route::view('/', 'home')->name('home');
Route::get('shop', Shop::class)->name('shop');
Route::view('contact', 'contact')->name('contact');
Route::get('basket', Basket::class)->name('basket');
Route::view('playground', 'playground')->name('playground');
Route::view('under-construction', 'under-construction')->name('under-construction');
Route::get('itunes', Itunes::class)->name('itunes');

Route::middleware(['auth', ActiveUser::class])->prefix('user')->name('user.')->group(function () {   
    Route::redirect('/', '/user/history');
    Route::get('history', History::class)->name('history');
});

...

Basic scaffolding for view

• Open resources/views/livewire/user/history.blade.php and replace the content with the following code:

• Add some classes to the outer div tag
• Add a basic layout for one order

<div class="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-8 items-start">

    <div class="flex flex-col bg-white border border-gray-300 shadow-md rounded-lg overflow-hidden">
        <div class="p-2 bg-gray-100 border-b border-b-gray-300">
            <p class="font-bold">Order date: <span class="font-normal">...</span></p>
        </div>

        <div class="p-2 flex-1 flex gap-4">
            <img src="{{ asset('storage/covers/no-cover.png') }}" alt="" class="size-28 object-cover">
            <div class="flex-1 flex flex-col">
                <p class="font-medium">Artist</p>
                <p class="italic">Title</p>
                <p class="font-sm text-gray-400">Quantity: ...</p>
                <p class="font-sm text-gray-400">Price: € ...</p>
            </div>
        </div>

        <div class="p-2 bg-gray-100 border-t border-t-gray-300">
            <p class="font-bold">Total price: <span class="font-normal"> € ...</span></p>
        </div>
    </div>

</div>

Orders overview

• The only thing we need to do is get all the orders with the orderlines and send them to the view

• Line 6: get all the orders for the current user
• Line 7: include the orderlines for each order
• Line 8: order the orders by the date (the newest first)
• Line 10: compact the orders and send them to the view

class History extends Component
{
    #[Layout('layouts.vinylshop', ['title' => 'Your order history', 'description' => 'Your order history'])]
    public function render()
    {
        $orders = Order::where('user_id', auth()->id())   
            ->with('orderlines')
            ->orderByDesc('created_at')
            ->get();
        return view('livewire.user.history', compact('orders'));  
    }
}

Get the cover image

• We don't have the cover image yet, so we need to get it from the mb_id of the orderline
• Open the app/Models/Orderline.php model and make a new attribute cover and add it to the $appends array

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Casts\Attribute;   
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Storage;        

class Orderline extends Model
{
    use HasFactory;

    protected $guarded = ['id', 'created_at', 'updated_at'];

    // Relationship between models
    public function order() { ... }

    protected function cover(): Attribute
    {
        return Attribute::make(
            get: function ($value, $attributes) {
                return Storage::disk('public')->exists('covers/' . $attributes['mb_id'] . '.jpg')
                    ? Storage::url('covers/' . $attributes['mb_id'] . '.jpg')
                    : Storage::url('covers/no-cover.png');
            },
        );
    }

    protected $appends = ['cover'];     
}

• Replace the img tag in the resources/views/livewire/user/history.blade.php view with the $orderline->cover attribute:
  • Replace de src attribute from asset('storage/covers/no-cover.png') to $orderline->cover

<img src="{{ $orderline->cover }}" alt="" class="size-28 object-cover">