Il checkout rapido di PrestaShop 9.2 mette contatto, indirizzo, spedizione e pagamento in un’unica pagina. Per mostrarlo abbiamo registrato due schermate: la configurazione nel back office e un acquisto fatto come ospite. Nel video qui sotto Amelia, l’avatar di bwlab, le commenta mentre scorrono. Il video parte solo quando premi play. Lo trovi anche su YouTube. Sotto trovi gli stessi passaggi scritti.

Versioni compatibili e dove scaricarlo

Il modulo è compatibile solo dalla 9.2: sulle versioni precedenti di PrestaShop non funziona. Con la 9.2 è incluso nel pacchetto, come spieghiamo nell’articolo sulle novità. Se nel tuo shop 9.2 non lo trovi, scarica il file ps_onepagecheckout.zip dalle release su GitHub e caricalo dal pulsante “Carica un modulo” che trovi in Moduli, Gestione moduli.

Come si attiva

Il checkout rapido è un modulo, quindi si parte dal back office. Apri il menu Moduli, poi Gestione moduli, e cerca il modulo dalla barra di ricerca. Lo trovi nella sezione Design & Navigation con il nome Checkout rapido, descritto come checkout nativo a pagina unica.

Premi Configura. La pagina propone due layout. Il Checkout rapido è quello consigliato: mostra tutti i passaggi in un’unica pagina, con meno click e un’esperienza pensata anche per il mobile. L’altro è il checkout in quattro pagine, a passaggi. Seleziona il primo e premi Salva. Dalla stessa schermata puoi tornare al flusso in quattro pagine quando vuoi.

Cosa vede il cliente

Il cliente inserisce l’email e può continuare come ospite, senza creare un account. Subito sotto trova le caselle di consenso, e poi compila l’indirizzo di consegna sulla stessa pagina.

Se gli serve una fattura intestata in modo diverso, toglie la spunta a “Usa questo indirizzo anche per la fattura” e si apre l’indirizzo di fatturazione, con azienda e partita IVA. Lo compila senza cambiare schermata. In fondo sceglie spedizione e pagamento, accetta i termini e conferma l’ordine, mentre il riepilogo del carrello resta visibile a destra.

Come il modulo gestisce ospiti, corrieri e pagamenti in AJAX lo spieghiamo nell’articolo sulle novità di PrestaShop 9.2.

Compatibilità con i moduli

A differenza di molti one page checkout, che richiedono adattamenti per far funzionare i moduli, questo è nativamente compatibile. Si aggancia al punto di estensione ufficiale di PrestaShop 9.2 (l’hook actionCheckoutBuildProcess) e usa gli stessi hook e le stesse classi del checkout standard per pagamenti, corrieri e condizioni. Nei suoi template richiama gli hook di sempre: displayPersonalInformationTop, displayAddressSelectorBottom, displayBeforeCarrier, displayAfterCarrier, displayPaymentTop, displayPaymentByBinaries, displayExpressCheckout, displayCheckoutBeforeConfirmation e displayReassurance. I moduli che si basano su questi hook vengono richiamati come nel checkout classico.

Una nota per chi sviluppa: gli hook sono gli stessi, ma il JavaScript di un modulo agganciato direttamente al pulsante di pagamento o ai pulsanti dei corrieri va provato, perché in questo checkout gli identificativi di quegli elementi sono quelli del modulo e non quelli del checkout classico. I moduli di pagamento che inviano da soli il form hanno bisogno di una chiamata in più, descritta nell’articolo linkato sopra.

Il design si può adattare

Oggi il checkout è una colonna verticale. Su desktop si può disporre in orizzontale, con le sezioni affiancate, intervenendo sul tema del tuo shop. Nel video lo mostriamo con uno schema, perché non è una variante già pronta.

Se il video ti è piaciuto, iscriviti al canale YouTube di bwlab. Se hai uno shop PrestaShop e vuoi capire come attivare il checkout rapido con i tuoi moduli e il tuo tema, scrivici: guardiamo insieme il tuo caso.