# Basket

# Preparation

# Create a Basket component

Create a new Livewire Basket component with the terminal command php artisan make:livewire Basket
- app/Http/Livewire/Basket.php (the component class)
- resources/views/livewire/basket.blade.php (the component view)
Open the component class and change the layout to layouts.vinylshop

class Basket extends Component
{
    public function render()
    {
        return view('livewire.basket')
            ->layout('layouts.vinylshop', [
                'description' => 'Your shopping basket',
                'title' => 'Your shopping basket'
            ]);
    }
}

1
2
3
4
5
6
7
8
9
10
11

# Add a new route

Add a new get-route for the Basket to the routes/web.php file
Update the navigation menu in resources/views/livewire/layout/nav-bar.blade.php

# Basic scaffolding for view

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

# Add a record to the basket

Open app/Http/Livewire/Shop.php and resources/views/livewire/shop.blade.php
Add the "add to basket" logic the component class and the view

Every time the basket is updated, the navigation bar should be updated as well
The total number of records in the basket should be shown as a badge on the basket-icon in the navigation bar and should be updated automatically
Open app/Http/Livewire/Layout/NavBar.php

# Update the basket component

Now we'll make this a 'real' basket where we can:
- Add/remove items from the basket
- Empty our basket
- Place an order and add all items (in the basket) to the database
The logic inside the basket view is as follows:
- If the cart is empty: show a message (that the cart is empty)
- If the cart is not empty:
  - Show all the items in a responsive table
  - Provide a link for each item to increase/decrease the number of items
  - Show the total price of all items in your basket
  - If the user is logged in, show a button to actually place the order
  - If the user is not logged in, show a message that he must login/register first

# Show message if cart is empty

# Show all items in the basket

Add a few records to the basket and check the result in the browser

# Check for backorders

If a user tries to add more records to the basket than there are in stock, the user should be notified about the backorder

# Checkout

The checkout is done in three steps:

The shipping address is entered by the user
Add the order to the database and update the stock
Send a confirmation email to the user and to the administrators with the order details, and empty the basket

# Add the order to the database

Speedup tips

Temporary comment out the Cart::empty() line in the checkout() method, so you don't have to add records over and over again to test the rest of the code
Temporary set fixed values for the $shipping property, e.g:

public $shipping = [
    'address' => 'Kleinhoefstraat 4',
    'city' => 'Geel',
    'zip' => '2440',
    'country' => 'Belgium',
    'notes' => "Please leave the package at the front door.\nThank you.",
];

1
2
3
4
5
6
7

Take a look at the database and at the cart:
- First you have to insert the user_id and the total_price from the cart session into a new row in the orders table.
- Next, retrieve the order_id from the just inserted row
- Finally, loop over all the records inside the cart and add a new row (with the order_id and the necessary columns) to the orderlines table

Why not use the Records table?

As you can see in the Orderlines table, some attributes (artist, title, mb_id) are duplicated from the Records table. Why we do this?
Later in this course, we'll add a page where the user can see all his orders and if we rely on the Records table, we can have some problems:

The price of the record can change, but the price of the record in the order should stay the same
The record can be deleted from the Records table, but we still want to show the order

That's the reason why we duplicate the data from the Records table to the Orderlines table.

In the example below: one order contains 3 different records (= 3 orderlines)

# Email confirmation email

Create a new OrderConfirmation mail class with the command php artisan make:mail OrderConfirmation --markdown=emails.order-confirmation