- Learn
- Creare un e-commerce con Laravel
- Checkout e validazione dei campi del form
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.
Pagamento con PayPal
La guida è in pubblicazione. Altre lezioni saranno pubblicate nei prossimi giorni.
Se vuoi aggiornamenti su PHP inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Droidcon Torino 2014, l’organizzazione di Synesthesia
Francesco Ronchi, fondatore di Synesthesia, è organizzatore del primo Droidcon italiano. Ci racconta come per il successo di un evento come […]