Checkout e validazione dei campi del form

Il controller AJAX

La parte più complessa nella realizzazione della pagina di checkout è sicuramente la validazione dei campi del form che Laravel semplifica enormemente mettendo a disposizione la classe Validator. Definiamo quindi il nostro controller AJAX con il suo metodo dedicato.

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class AjaxController extends Controller
{
    public function checkout(Request $request)
    {
        // Regole di validazione per i campi
        $validation_rules = [
            'billing_firstname' => 'required',
            'billing_lastname' => 'required',
            'billing_email' => 'required|email:rfc',
            'billing_address' => 'required'
        ];
        // Effettuiamo la validazione
        $validator = Validator::make($request->all(), $validation_rules);
        if ($validator->fails()) {
            // Se ci sono errori li restituiamo subito e non procediamo oltre
            return response()->json(['errors' => $validator->errors()]);
        }
        // Elaborazione normale della richiesta
    }
}

I messaggi di errore

Se la validazione dei campi fallisce restituiamo immediatamente l'output JSON contenente l'oggetto errors le cui proprietà avranno i nomi dei campi validati e come valore un array di messaggi di errore per ciascun campo.

Aggiungiamo quindi la nuova route.

Route::post('/ajax/checkout', 'AjaxController@checkout')->name('process-checkout');

In jQuery avremo questa implementazione.

$( "#form-checkout" ).on( "submit", function( e ) {
    e.preventDefault();
    var $form = $( this );
    $form.find( ".alert" ).remove(); // Reset messaggi
    $.post( "/ajax/checkout", $form.serialize(), function( resp ) {
        if( resp.errors ) {
            for( var field in errors ) {
                $( "[name=" + field + "]", $form ).
                after( '<p class="alert alert-danger">' +
                errors[field][0] + '</p>' );
            }
        } else {
            //...
        }
    });
});

Intercettiamo l'invio del form e come prima cosa rimuoviamo gli eventuali messaggi di errore già presenti. Quindi serializziamo il form come query string e lo inviamo alla route dedicata. Se ci sono errori effettuiamo un loop sull'oggetto contenente gli errori e inseriamo un messaggio di errore dopo ciascun campo.

Salvare i dati inviati in sessione

Sin qui la gestione degli errori, ma cosa succede se non ci sono errori e il form è stato compilato correttamente? In questo caso dobbiamo salvare i dati inviati in sessione in modo da poterli riutilizzare in seguito nella fase del pagamento.

// Elaborazione normale della richiesta
$billingName = $request->input('billing_firstname');
        $billingLastName = $request->input('billing_lastname');
        $billingEmail = $request->input('billing_email');
        $billingAddress = $request->input('billing_address');
$customerData = [
              'billing' => [
                  'name' => $billingName . ' ' . $billingLastName,
                  'address' => $billingAddress,
                  'email' => $billingEmail
              ]
            ];
 $request->session()->put('customer', $customerData);
            $request->session()->put('orderid', strtoupper(uniqid()));
 $output = [ 'redirect' => route('payment')];
 return response()->json($output);

L'output restituito in questo caso contiene l'URL della route per il pagamento. Il nostro codice lato client dovrà effettuare il redirect in caso di esito positivo della validazione dei dati.

$.post( "/ajax/checkout", $form.serialize(), function( resp ) {
        if( resp.errors ) {
            for( var field in errors ) {
                $( "[name=" + field + "]", $form ).
                after( '<p class="alert alert-danger">' +
                errors[field][0] + '</p>' );
            }
        } else if( resp.redirect ) {
            window.location = resp.redirect;
        }
    });

In questo caso l'uso di AJAX si concretizza in una validazione istantanea del form di checkout senza la necessità di un refresh completo della pagina. Tuttavia è bene ricordare che se l'accessibilità di questa pagina è un requisito portante del progetto, allora AJAX non è la soluzione ideale a causa dei noti problemi di supporto da parte dei lettori di schermo meno recenti. In tal caso è consigliabile invece una soluzione sincrona senza AJAX.

Conclusione

Nel corso delle ultime due lezioni abbiamo affrontato il processo di checkout vedendo come un'implementazione in AJAX con Laravel aumenti di molto la velocità di tale processo.