Basket

PODCAST

Preparation

Create a Basket component

• Create a new Livewire Basket component with the terminal command php artisan livewire:make Basket
  • app/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

<?php

namespace App\Livewire;

use App\Helpers\Cart;     
use Livewire\Attributes\Layout;
use Livewire\Component;

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

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/components/layout/nav.blade.php

• Add a get-route to the routes/web.php file
  • The basket route, with the name shop will be handled by the Basket::class component
  • Don't forget to import the Basket component class at the top of the file (use App\Http\Basket;)

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', 'active', 'admin'])->prefix('admin')->name('admin.')->group(function () {
    ...
});
...

Create a log component

• Create a new basket-log component inside the components folder: resources/views/components/tmk/basket-log.blade.php
• Paste the following code inside the component:

basket-log.blade.php code

• Line 10 - 41: this (debug) code is only visible when the APP_DEBUG environment variable is set to true (not in production) and can be removed later

@php
    use App\Helpers\Cart;
@endphp

@props([
    'record' => 15      // default value is 15
])

{{-- show this (debug) code only in development APP_ENV=local  --}}
@env('local')
    <x-tmk.section x-data="{ show: true }" @dblclick="show = !show" class="bg-yellow-50 mt-8 cursor-pointer">
        <p class="font-bold">What's inside my basket?</p>
        <div x-show="show" x-cloak>
            @php
                $detailedCartData = [
                    'Cart::getCart()' => Cart::getCart(),
                    'Cart::getRecords()' => Cart::getRecords(),
                    'Cart::getOneRecord(' . $record . ')' => Cart::getOneRecord((int)$record),
                ];
                $inlineCartData = [
                    'Cart::getKeys()' => Cart::getKeys(),
                    'Cart::getTotalPrice()' => Cart::getTotalPrice(),
                    'Cart::getTotalQty()' => Cart::getTotalQty(),
                ];
            @endphp

            @foreach ($detailedCartData as $label => $data)
                <hr class="my-4">
                <p class="text-rose-800 font-bold">{{ $label }}:</p>
                <pre class="text-sm">@json($data, JSON_PRETTY_PRINT)</pre>
            @endforeach

            <hr class="my-4">
            @foreach ($inlineCartData as $label => $data)
                <p>
                    <span class="text-rose-800 font-bold pr-2">{{ $label }}:</span>
                    @json($data, JSON_PRETTY_PRINT)
                </p>
            @endforeach
        </div>
    </x-tmk.section>
@endenv

Basic scaffolding for view

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

• The actual content of the view will be added later

<div>
    <x-tmk.basket-log/>
</div>

Add a record to the basket

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

• Line 3: add the wire:click directive to the Add to basket button
• Line 4: remove <br><span class='text-red-300'>NOT IMPLEMENTED YET</span> from the data-tippy-content attribute

@if($record->stock > 0)
    <button class="w-6 hover:text-red-900"
            wire:click="addToBasket({{ $record->id }})"
            data-tippy-content="Add to basket">
        <x-phosphor-shopping-bag-light class="outline-0"/>
    </button>
@else
    <p class="font-extrabold text-red-700">SOLD OUT</p>
@endif

Update the navigation bar

• Every time the basket is updated, the navigation bar should be updated immediately as well
• To do this, we'll create a new Livewire partial component for the navigation bar:
  php artisan livewire:component Partials/MiniBasket
• 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/Livewire/Partials/MiniBasket.php and resources/views/livewire/partials/mini-basket.blade.php

• Replace the <x-nav-link> component with the Livewire component @livewire('partials.basket')

@endguest
@livewire('partials.basket')        
{{-- <x-nav-link href="{{ route('basket') }}" :active="request()->routeIs('basket')">
    <x-fas-shopping-basket class="w-4 h-4"/>
</x-nav-link> --}}

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 a message if the cart is empty

• First, make sure that the cart when the page is loaded
  • Line 2: empty the basket when the view is rendered
    IMPORTANT: delete this line immediately after you've tested the functionality
• Line 6 - 8: show a message if the cart is empty

<div>
    {{ \App\Helpers\Cart::empty() }}   

    @if($totalQty === 0)    
        {{-- Cart is empty --}}
        <x-tmk.alert type="info" class="w-full">
            Your basket is empty
        </x-tmk.alert>
    @else
        {{-- Cart is not empty --}}
    @endif

    <x-tmk.basket-log />
</div>

Show all items in the basket

• Add a few records to the basket and check the result in the browser
• Also test the +1, -1 and Empty basket buttons

• Line 3 - 7: empty the basket and emit the basket-updated event
• Line 9 - 13: decrease the quantity of the record by one and emit the basket-updated event
• Line 15 - 19: increase the quantity of the record by one and emit the basket-updated event
• Line 21: refresh the page when the basket-updated event is emitted
• Line 27 - 28: send also the total price and all the record information to the view

class Basket extends Component
{
    public function emptyBasket()     
    {
        Cart::empty();
        $this->dispatch('basket-updated');
    }

    public function decreaseQty(Record $record)     
    {
        Cart::delete($record);
        $this->dispatch('basket-updated');
    }

    public function increaseQty(Record $record)     
    {
        Cart::add($record);
        $this->dispatch('basket-updated');
    }

    #[On('basket-updated')]      
    #[Layout('layouts.vinylshop', ['title' => 'Your shopping basket', 'description' => 'Your shopping basket',])]
    public function render()
    {
        return view('livewire.basket', [
            'totalQty' =>Cart::getTotalQty(),
            'totalPrice' => Cart::getTotalPrice(),      
            'records' => Cart::getRecords(),
        ]);
    }
}

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

• Line 3: add a $backorder property and set it to an empty array
• Line 11 - 22: the updateBackorder() method checks if the quantity of the record is higher than the stock
  • Line 13: reset the $backorder property
  • Line 15 - 21: loop through all record keys in the cart
    • Line 16: get the quantity of the selected record
    • Line 17: fetch the selected record from the database
    • Line 18: check if the ordered quantity is higher than the stock
    • Line 19 - 20: if the quantity is higher than the stock, add the record to the $backorder property
• Line 28: call the updateBackorder() method in the render() method, so it's called every time something changes in the component

class Basket extends Component
{
    public $backorder = [];   

    public function emptyBasket() { ... }

    public function decreaseQty(Record $record) { ... }

    public function increaseQty(Record $record) { ... }

    public function updateBackorder()   
    {
        $this->backorder = [];
        // loop over records in basket and check if qty > in stock
        foreach (Cart::getKeys() as $id) {
            $qty = Cart::getOneRecord($id)['qty'];
            $record = Record::findOrFail($id);
            $shortage = $qty - $record->stock;
            if ($shortage > 0)
                $this->backorder[] = $shortage . ' x ' . $record->artist . ' - ' . $record->title;
        }
    }

    #[On('basket-updated')]
    #[Layout('layouts.vinylshop', ['title' => 'Your shopping basket', 'description' => 'Your shopping basket',])]
    public function render()
    {
        $this->updateBackorder();   
        return view('livewire.basket', [
            'totalQty' => Cart::getTotalQty(),
            'totalPrice' => Cart::getTotalPrice(),
            'records' => Cart::getRecords(),
        ]);
    }
}

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

Create a new Form object for the shipping address

• Create a form object class with the command php artisan livewire:form ShippingForm
• This will create a new class file ShippingForm.php in the folder App\Livewire\Forms
• Open the file and replace the content with the following code:

<?php

namespace App\Livewire\Forms;

use Livewire\Attributes\Validate;
use Livewire\Form;

class ShippingForm extends Form
{
    #[Validate('required')]
    public $address = null;
    #[Validate('required')]
    public $city = null;
    #[Validate('required|numeric')]
    public $zip = null;
    #[Validate('required')]
    public $country = null;
    public $notes = null;
}

Modal for shipping address

• Line 6: add a $showModal property for the modal
• Line 7: link the $form property to the ShippingForm class
• Line 9 - 14: the checkoutForm() method:
  • reset all the fields in the ShippingForm class and reset the error bag
  • sets the $showModal property to true to show the modal
• Line 16 - 38: the checkout process is called when the PLACE ORDER button in the modal is clicked.
  The code is straight forward:
  • validate the form (= shipping address)
  • close the modal
  • check for backorders (maybe another user ordered the same record in the meantime)
  • add the order to the database, update the stock and send the confirmation email
    (these features are implemented in the next steps)
  • reset the ShippingForm, the $backorder property and the error bag
  • empty the basket and refresh the component
  • show a success message

class Basket extends Component
{
    use SweetAlertTrait;    
    
    public $backorder = [];
    public $showModal = false;      
    public ShippingForm $form;

    public function checkoutForm()      
    {
        $this->form->reset();
        $this->resetErrorBag();
        $this->showModal = true;
    }

    public function checkout()          
    {
        // validate the form
        $this->form->validate();
        // hide the modal
        $this->showModal = false;
        // check if there are records in backorder
        $this->updateBackorder();
        
        // add the order to the database
        // update the stock
        // send confirmation email to the user and to the administrators
        
        // reset the form, backorder array and error bag
        $this->form->reset();
        $this->reset('backorder');
        $this->resetErrorBag();
        // empty the cart
        Cart::empty();
        $this->dispatch('basket-updated');
        // show a confirmation message
        $this->swalToast("Thank you for your order.<br>The records will be shipped as soon as possible.");
    }
    
    ...
}

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 ShippingForm property through the checkoutForm() method, so you don't have to fill in the form over and over again to test the rest of the code

public function checkoutForm()
    {
        $this->form->reset();
        $this->resetErrorBag();
        $this->showModal = true;
        // for debugging only
        $this->form->address = 'Kleinhoestraat 4';
        $this->form->city = 'Geel';
        $this->form->zip = '2440';
        $this->form->country = 'Belgium';
        $this->form->notes = "Please leave the package at the back door.\nThank you.";
    }

• 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 doesn't 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)
  

• Line 6 - 9: create a new order and add save it to the $order property, so we can easily get the order_id later
• Line 11 - 19: loop over all the records in the cart and add a new row to the orderlines table
  • Line 13: $order->id is the order_id from the just inserted row in the orders table
  • Line 14 - 18: the other columns are retrieved from the cart session
• Line 21 - 23: update the stock of the record
  • Line 21: get the record from the database
  • Line 22: update the stock value:
    • If the quantity in the cart is lower than the stock, subtract the quantity from the stock
    • If the quantity in the cart is higher or equal than the stock, set the stock to 0
  • Line 23: save the record to the database

public function checkout()
{
    ...
    
    // add the order to the database![img.png](img.png)
    $order = Order::create([
        'user_id' => auth()->user()->id,
        'total_price' => Cart::getTotalPrice(),
    ]);
    // loop over the records in the basket and add them to the orderlines table
    foreach (Cart::getRecords() as $record) {
        Orderline::create([
            'order_id' => $order->id,
            'artist' => $record['artist'],
            'title' => $record['title'],
            'mb_id' => $record['mb_id'],
            'total_price' => $record['price'],
            'quantity' => $record['qty'],
        ]);
        // update the stock
        $updateQty = Record::findOrFail($record['id']);
        $updateQty->stock > $record['qty'] ? $updateQty->stock -= $record['qty'] : $updateQty->stock = 0;
        $updateQty->save();
    }
    
    // send confirmation email to the user and to the administrators

    ...
}

Email confirmation email

• Create a new OrderConfirmation mail class with the command php artisan make:mail OrderConfirmation --markdown=emails.order-confirmation
• Add a sendEmail() method to the ShippingForm class

• Line 8: send the backorder information to the sendEmail() method in the ShippingForm class

public function checkout()
{
    ...

    // add the order to the database
    // update the stock
    // send confirmation email to the user and to the administrators
    $this->form->sendEmail($this->backorder);     
    // reset the form, backorder array and error bag
    ...
}