Checkout Revolution 3.0: Checkout in una pagina ricostruito da zero

Abbiamo rilasciato Checkout Revolution 3.0 — una riscrittura completa del nostro modulo di checkout a pagina singola per PrestaShop. Non un aggiornamento incrementale, non un'aggiunta di funzionalità — una ricostruzione architettonica completa da zero.

Il Checkout Revolution originale ha servito migliaia di negozi, ma dopo anni di miglioramenti incrementali, il codice aveva bisogno di un nuovo inizio. Le versioni moderne di PrestaShop, le nuove capacità del browser e tutto ciò che abbiamo imparato dall'ottimizzazione reale del checkout hanno richiesto un nuovo approccio.

Perché una riscrittura completa

Il modulo originale era costruito sui modelli PrestaShop 1.6 e progressivamente adattato per 1.7, 8.x e oltre. Ogni adattamento aggiungeva complessità. La gestione AJAX, la validazione dei moduli, il cambio del metodo di pagamento — tutto portava decisioni legacy che limitavano ciò che potevamo fare. La versione 3.0 elimina questi vincoli.

Il risultato è un checkout più veloce da caricare, più fluido da usare e significativamente più affidabile su tutta la gamma di moduli di pagamento, configurazioni di corrieri e impostazioni del negozio.

Cosa è cambiato

Flusso a pagina singola

L'intero checkout — indirizzo, spedizione, pagamento e conferma dell'ordine — avviene su una sola pagina senza ricaricamenti. Le versioni precedenti utilizzavano aggiornamenti parziali della pagina che a volte sembravano goffi su connessioni più lente. La versione 3.0 utilizza un approccio reattivo in cui le sezioni del modulo si aggiornano immediatamente mentre il cliente inserisce le informazioni. Seleziona un paese e le opzioni di spedizione si aggiornano in tempo reale. Scegli un corriere e il totale viene ricalcolato immediatamente.

Prestazioni

Il primo rendering significativo è inferiore a 500 ms su hosting tipico. Il bundle JavaScript è del 60% più piccolo rispetto alla versione 2.x. Il CSS è minimale e incorporato per il rendering critico. Sulle connessioni mobili, la differenza è notevole — il checkout appare e diventa interattivo prima che i clienti abbiano il tempo di riconsiderare l'acquisto.

Compatibilità con i moduli di pagamento

Questa era la sfida tecnica più grande. L'ecosistema dei moduli di pagamento di PrestaShop è diversificato — alcuni moduli reindirizzano a pagine esterne, alcuni incorporano iframe, alcuni iniettano moduli personalizzati, alcuni usano webhook. La versione 3.0 gestisce tutti questi schemi con facilità. Abbiamo testato con oltre 40 moduli di pagamento tra cui Stripe, PayPal, Mollie, Adyen e fornitori di pagamento regionali.

Checkout come ospite

Forzare la creazione dell'account uccide le conversioni. Checkout Revolution 3.0 rende il checkout come ospite il percorso predefinito, con una casella di controllo opzionale "salva i miei dati" che crea un account dopo che l'ordine è stato effettuato. Il cliente non si sente mai costretto a registrarsi — può completare prima il suo acquisto e decidere dopo.

Gestione degli indirizzi

I moduli di indirizzo sono la parte più noiosa del checkout. La versione 3.0 riduce l'attrito con:

• Ottimizzazione del completamento automatico — I campi del modulo sono denominati e strutturati per funzionare perfettamente con il completamento automatico del browser. La maggior parte dei visitatori di ritorno completa l'indirizzo in due clic.
• Formattazione per paese — I campi dell'indirizzo si riordinano in base al paese selezionato. I clienti statunitensi vedono stato e CAP nelle posizioni attese. I clienti tedeschi vedono il CAP prima della città. I clienti giapponesi vedono il formato che si aspettano.
• Opzione indirizzo singolo — Se gli indirizzi di spedizione e fatturazione sono gli stessi (lo sono nel 85% dei casi), un unico set di campi con un interruttore "usa indirizzo di fatturazione diverso".

Design Mobile-First

Oltre il 65% del traffico e-commerce è mobile e il checkout è il punto in cui l'esperienza mobile conta di più. La versione 3.0 è stata progettata prima per i telefoni:

• Campi di input touch-friendly con tipi di tastiera appropriati (numerico per il telefono, email per l'email)
• Riepilogo dell'ordine fisso che rimane visibile senza scorrere
• Pulsanti grandi e accessibili che funzionano con i pollici
• Divulgazione progressiva — mostrare una sezione alla volta per evitare di sovraccaricare i piccoli schermi

Compatibilità

Checkout Revolution 3.0 funziona con PrestaShop 1.7, 8.x e 9.x. È compatibile con tutti i temi standard (Classic, Hummingbird e i loro temi figlio) e la maggior parte dei temi di terze parti. Il modulo rileva la versione di PrestaShop e adatta automaticamente la sua integrazione.

Funziona insieme agli altri nostri moduli: Express Checkout per acquisti ripetuti ancora più veloci, Customer Registration Fields per raccogliere informazioni aggiuntive durante il checkout e Estimated Delivery Date per mostrare le finestre di consegna sulla pagina di checkout.

Migrazione dalla versione 2.x

Gli utenti esistenti di Checkout Revolution possono aggiornare tramite il processo standard di aggiornamento del modulo. Le impostazioni di configurazione sono conservate. L'aspetto del checkout cambierà — il nuovo design è più pulito e moderno — ma le funzionalità e le opzioni di configurazione sono un superset di ciò che offriva la versione 2.x. Nessun dato viene perso, nessuna impostazione deve essere riconfigurata.

L'impatto sulle conversioni

Nei test beta su 12 negozi per 4 settimane, i risultati medi:

• Tasso di abbandono del carrello: Diminuito dell'8-15% rispetto al checkout multi-step predefinito di PrestaShop
• Tempo di completamento del checkout: Ridotto del 40% (da ~3 minuti in media a ~1,8 minuti)
• Tasso di conversione mobile: Aumentato del 12% — il miglioramento maggiore è stato su mobile dove il flusso multi-step era più doloroso

Ogni secondo rimosso dal processo di checkout è denaro recuperato. Checkout Revolution 3.0 rimuove molti secondi.

Ottieni Checkout Revolution 3.0 e scopri la differenza che un checkout progettato ad hoc fa per il tasso di conversione del tuo negozio. Abbiamo rilasciato Checkout Revolution 3.0 — una riscrittura completa del nostro modulo checkout one-page per PrestaShop.