Il checkout del nostro e-commerce

Route GET e view Blade

Il primo step da eseguire per implementare la pagina di checkout del nostro e-commerce è definire una route GET che la gestisca.

public function checkout(Request $request)
    {
        $sessionCart = $request->session()->get('cart');
        if(!$sessionCart || count($sessionCart['items']) === 0) {
            return redirect()->route('cart');
        }
        return view('checkout',[
            'title' => 'Checkout | PHP E-commerce'
        ]);
    }

Per accedere alla pagina di checkout l'utente deve aver già inserito dei prodotti nel carrello. Se ciò non è avvenuto, l'utente viene reindirizzato alla pagina del carrello.

La route così definita viene aggiunta alle route già presenti nell'applicazione (file /routes/web.php).

Route::get('/checkout', 'ShopController@checkout')->name('checkout');

A questo punto possiamo definire la view Blade che conterrà essenzialmente il form di checkout con i campi per l'indirizzo di fatturazione e spedizione e il riepilogo dell'ordine.

Riepilogo dell'ordine

Il riepilogo dell'ordine è tecnicamente la parte più interessante perché ci permette di usare delle funzioni helper globali di Laravel che consentono di mostrare nelle view i dati presi dall'applicazione.

<h2>Riepilogo ordine</h2>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">Prodotto</th>
                <th scope="col">Prezzo</th>
                <th scope="col">Quantità</th>
                <th scope="col">Totale</th>
            </tr>
            </thead>
            <tbody>
            @php $cart = request()->session()->get('cart'); @endphp
            @foreach($cart['items'] as $item)
            <tr>
                <td>{{ $item['name'] }}</td>
                <td>&euro; {{ $item['price'] }}</td>
                <td>{{ $item['quantity'] }}</td>
                <td>&euro; {{  $item['subtotal'] }}</td>
            </tr>
            @endforeach
            </tbody>
            <tfoot>
            <td colspan="4">
                <b>Totale:</b> &euro; {{ $cart['total'] }}
            </td>
            </tfoot>
        </table>

Come si può notare, l'helper request() ci permette di accedere alla sessione corrente e di conseguenza all'istanza attuale del carrello da cui possiamo reperire i vari valori usando i tipici costrutti di Blade.

AJAX in Laravel

Per elaborare il form di checkout possiamo cogliere quest'occasione per usare un approccio AJAX in Laravel.

Prima di implementare la nostra soluzione, dobbiamo ricordare che il codice lato client che effettuerà la richiesta in POST sulla route dedicata dovrà aggiungere uno specifico header HTTP per prevenire gli attacchi CSRF in quanto Laravel effettua questa verifica per impostazione predefinita.

Per prima cosa aggiungiamo un meta tag dedicato allo scopo nel nostro master template di Blade.

<meta name="csrf-token" content="{{ csrf_token() }}">

Poichè useremo jQuery nel frontend, dobbiamo modificare le sue impostazioni AJAX globalmente aggiungendo l'header HTTP richiesto.

$(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
});

Una richiesta AJAX in Laravel è simile ad una richiesta normale, con l'unica differenza che non viene restituita una view ma viene inviato al client un output in un formato comune (solitamente JSON).

Conclusione

Nella prossima lezione completeremo il lavoro di sviluppo della pagina di checkout affrontando il discorso riguardante la validazione dei campi form.