# User: order history

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 make:livewire User/History
- app/Http/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
{
    public function render()
    {
        return view('livewire.user.history')
            ->layout('layouts.vinylshop', [
                'description' => 'Your order history',
                'title' => 'Your order history',
            ]);
    }
}

1
2
3
4
5
6
7
8
9
10
11

# 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

# Basic scaffolding for view

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

# Orders overview

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

# 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

class Orderline extends Model
{
    use HasFactory;
    
    ...
    
    /** Add additional attributes ... */
    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'];
    
    ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Replace the img tag in the resources/views/livewire/user/history.blade.php view with the $orderline->cover attribute:
- Replace de src attribute with $orderline->cover

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

Orderline with cover