Checkout Semplice ed Elegante (dfsimplecheckout) — Guida completa

Panoramica

DataFirefly Simple Checkout sostituisce il checkout nativo in 5 passaggi di PrestaShop con un processo d’acquisto one-page moderno, ispirato ai checkout di Shopify e Stripe. Il modulo monta il proprio controller a runtime tramite l’hook actionDispatcher: nessun file override viene scritto su disco, e gli override di terze parti esistenti su OrderController vengono ereditati in modo pulito.

Funzionalità principali: layout a due colonne con riepilogo permanente, login social Google e Facebook, autocompletamento indirizzo Google Places, modulo indirizzo adattivo per paese, codice sconto AJAX, tre colori personalizzabili, modalità senza distrazioni.

Installazione

1. Nel back-office di PrestaShop, vai su Moduli → Gestore moduli → Carica un modulo.
2. Seleziona il file dfsimplecheckout.zip scaricato dal tuo account DataFirefly.
3. Clicca su Installa e poi su Configura.
4. Svuota la cache di PrestaShop (Parametri avanzati → Prestazioni → Svuota cache).
5. Visita la pagina /order del tuo negozio con un prodotto nel carrello: il nuovo checkout appare immediatamente.

Configurazione generale

Colori

Tre colori sono configurabili nelle impostazioni del modulo:

• Colore principale — pulsanti, link, stati attivi, radio selezionati (predefinito #1a73e8).
• Colore hover dei pulsanti — stato hover dei pulsanti primari «Continua», «Ordina» (predefinito #1559b8).
• Colore accento / successo — indicatori di passaggio completato, pill del codice sconto applicato, etichetta «Gratis» del corriere, messaggi di successo (predefinito #008060).

I tre valori vengono iniettati come variabili CSS (--dfsc-primary, --dfsc-primary-hover, --dfsc-success) e validati con regex esadecimale rigorosa.

Logo

Indica l’URL di un logo personalizzato per l’intestazione del checkout; in mancanza viene usato il logo del negozio. Dimensioni renderizzate: massimo 190×42 px.

Modalità senza distrazioni

L’opzione Nascondi header e footer del tema (attiva di default) rimuove l’intestazione completa del tema (menu, ricerca, carrello) e il suo footer solo sulla pagina /order. L’implementazione sovrascrive i blocchi Smarty header e footer nel nostro template: su un tema che non usa questi blocchi standard, l’opzione semplicemente non ha effetto — mai una pagina bianca.

Altre opzioni

• Campo nota per il venditore (on/off)
• Campo codice sconto (on/off)
• Badge di fiducia — HTML libero mostrato sotto il riepilogo
• Link legali a piè di checkout (CGV, privacy, resi — rilevati tramite i ruoli CMS nativi)

Login social Google

Creare le credenziali

1. Vai su Google Cloud Console e crea (o seleziona) un progetto.
2. In APIs & Services → Credentials, crea un OAuth client ID di tipo Web application.
3. In Authorized JavaScript origins, aggiungi l’URL del tuo negozio (es. https://www.mionegozio.it) — senza percorso, con protocollo https.
4. Copia il Client ID generato (termina con .apps.googleusercontent.com).

Configurare il modulo

1. Nelle impostazioni del modulo, attiva Google Sign-In e incolla il Client ID.
2. Salva e svuota la cache.
3. Su /order, il pulsante Google appare sopra le schede «Sono un nuovo cliente / Ho già un account».

Il flusso: il cliente clicca, seleziona il proprio account Google, e il modulo riceve un JWT che valida lato server tramite l’endpoint ufficiale tokeninfo (verifica di audience, emittente, scadenza ed email verificata). Se esiste un account cliente con quella email, viene connesso; altrimenti viene creato automaticamente un account con nome e cognome del profilo Google.

Login social Facebook

Creare l’applicazione

1. Su Meta for Developers, crea un’app di tipo Consumer.
2. Aggiungi il prodotto Facebook Login e dichiara il tuo dominio nelle impostazioni.
3. Recupera App ID e App Secret in Settings → Basic.

Configurare il modulo

Attiva Facebook Login nelle impostazioni, incolla App ID e App Secret, salva. La validazione lato server è in due fasi: debug_token (verifica che il token appartenga alla tua app) seguita dal recupero del profilo con firma appsecret_proof (HMAC-SHA256). L’App Secret non lascia mai il tuo server.

Autocompletamento indirizzo Google Places

1. In Google Cloud Console, attiva le API Places API e Maps JavaScript API.
2. Crea una API key e restringila al tuo dominio (consigliato).
3. Nel modulo, attiva Autocompletamento indirizzo e incolla la chiave.

Il campo «Indirizzo» del modulo offre quindi suggerimenti durante la digitazione. La selezione di un suggerimento precompila via, complemento, città, CAP, paese e regione se applicabile. I suggerimenti sono limitati ai paesi attivi del tuo negozio (fino a 5 paesi — limite dell’API Google).

Modulo indirizzo adattivo per paese

Il modulo indirizzo si adatta automaticamente al paese selezionato:

• Il paese predefinito del dropdown è quello configurato in Internazionale → Localizzazione del tuo back-office (e non il primo paese alfabetico).
• Il campo Stato/Regione appare solo per i paesi che ne hanno (USA, Spagna, Italia…) e il suo dropdown elenca unicamente le regioni attive del paese selezionato.
• Il campo DNI appare per i paesi che lo richiedono (Spagna).
• La validazione del CAP usa il formato del paese.
• Al cambio di paese, la pagina si ricarica con il modulo ristrutturato per il nuovo paese.

Modifica indirizzo

Ogni indirizzo salvato mostra un’icona matita. Il clic apre il modulo inline precompilato con tutti i valori dell’indirizzo (caricati lato server con controllo di proprietà — un cliente non può mai consultare l’indirizzo di un altro). Il salvataggio aggiorna l’indirizzo esistente, senza creare duplicati.

Codice sconto

Il campo codice sconto (attivabile) funziona in AJAX: applicazione e rimozione senza ricaricare, aggiornamento istantaneo del riepilogo. Le operazioni sono delegate al controller nativo CartController di PrestaShop, quindi tutte le regole carrello (date, importo minimo, restrizioni corriere, cumulo) sono rispettate in modo identico. I messaggi di errore nativi («Questo buono è scaduto», «Importo minimo non raggiunto»…) vengono mostrati tali e quali.

Compatibilità corrieri e Colissimo

Il contenuto extra dei corrieri (mappa dei punti di ritiro Colissimo, widget Mondial Relay…) viene renderizzato tramite {$carrier.extraContent} come nel template nativo. Per Colissimo Punti di Ritiro, il modulo inietta automaticamente i dati del punto selezionato (identificativo, telefono mobile) nelle richieste di validazione, il che elimina il falso messaggio «Seleziona un punto di ritiro» che il modulo Colissimo poteva mostrare sui checkout one-page.

Hook per sviluppatori

• displayDfsimplecheckoutExpress — slot in cima al checkout per i pagamenti express (Apple Pay, Google Pay, PayPal Express).
• displayDfsimplecheckoutSidebarTop / displayDfsimplecheckoutSidebarBottom — zone di iniezione nella colonna riepilogo.
• actionDfscSocialLogin — attivato dopo un login social riuscito, con i parametri customer e dfsc_social_provider (google o facebook). Utile per tagging CRM.

Risoluzione dei problemi

Il pulsante Google non appare

• Verifica che il Client ID sia inserito e l’opzione attivata.
• Controlla nella console del browser che non ci sia un errore «origin not allowed» — in tal caso, aggiungi l’URL esatto del tuo negozio (con https, senza slash finale) negli Authorized JavaScript origins di Google Cloud Console.

Il login social non persiste

Svuota la cache di PrestaShop e quella del browser. Se il problema persiste, verifica che nessun modulo di sicurezza di terze parti invalidi i cookie di sessione dopo il login.

Il campo Stato mostra le regioni sbagliate

Assicurati di usare la versione 1.2.20 o superiore del modulo, che risolve la struttura del modulo lato server per ogni paese.

Pagina bianca su /order

Attiva la modalità debug di PrestaShop (_PS_MODE_DEV_) per mostrare l’errore, o consulta var/logs. Verifica che nessun altro modulo di checkout one-page sia attivo contemporaneamente.

Disinstallazione

Disinstalla il modulo dal Gestore moduli. L’ambiente runtime viene liberato immediatamente e il checkout nativo in 5 passaggi viene ripristinato. Nessun file residuo, nessun dato orfano.