1.0 Introduzione
La maggior parte dei visitatori lascia la cassa per il prodotto desiderato solo perché trova il processo complesso e lungo da completare. Questo alla fine porta a un numero sempre maggiore di carrelli abbandonati. Per controllare i tassi di abbandono del carrello e di uscita, Knowband ha offerto�OpenCart One Page Checkout Pro plug-in per negozi OpenCart. Inoltre, implementando One Page Checkout per il tuo sito di e-commerce, puoi migliorare i tassi di conversione in quanto sostituisce la pagina di checkout in più passaggi con un checkout a pagina singola.
Visualizzazione mobile:
Caratteristiche salienti dell’estensione OpenCart One Page Checkout:
- L’estensione offre la funzionalità di pagamento degli ospiti grazie alla quale gli utenti possono completare facilmente e rapidamente i loro ordini come clienti ospiti senza creare un nuovo account nel negozio online.
- L’estensione OpenCart Fast Checkout consente ai clienti di accedere rapidamente al sito Web utilizzando i propri account Google, Facebook e Paypal.
- I campi nella pagina di pagamento possono essere facilmente personalizzati dall’amministratore dal back-end dell’estensione OpenCart One Page Checkout Pro. L’amministratore del negozio può mostrare o nascondere uno qualsiasi dei campi dalla pagina di pagamento o può renderli facoltativi o obbligatori per la compilazione da parte degli utenti. L’amministratore può anche riorganizzare i campi della posizione con funzionalità di trascinamento della selezione.
- Il proprietario del negozio può personalizzare facilmente l’aspetto della pagina di pagamento, inclusa la modifica del colore dei pulsanti, il colore del pulsante di sfondo, il colore del testo, ecc.
- OpenCart One Page Supercheckout offre compatibilità multi-store e multilingue.
- L’estensione OpenCart One Step Checkout supporta quasi tutti i principali metodi di spedizione e pagamento che aumentano la fiducia dei clienti nella scelta del metodo desiderato dalla pagina di pagamento.
- L’e-merchant può applicare uno qualsiasi dei layout di progettazione da 3 diversi layout di cassa Ie, 1 colonna, 2 colonne o 3 colonne. I campi possono essere facilmente riorganizzati trascinandoli e rilasciandoli.
- Il modulo OpenCart Quick Checkout offre l’integrazione con MailChimp, Klaviyo e SendinBlue che ti consente di sincronizzare automaticamente il database dei tuoi utenti con questi tuoi account senza alcuno sforzo manuale.
- L’e-merchant può anche personalizzare l’aspetto dell’estensione tramite CSS e JS personalizzati.
- Il modulo OpenCart Responsive One Step Checkout offre la funzione della modalità Test mediante la quale il proprietario del negozio può controllare e visualizzare le personalizzazioni effettuate prima di renderle live sul sito Web.
- Il modulo OpenCart Simplified Checkout offre la funzione Ship2Pay mediante la quale il proprietario del negozio può mappare determinati metodi di pagamento con metodi di consegna selezionati. Nasconde tutti gli altri metodi di pagamento selezionando un particolare metodo di consegna e mostra all’utente solo i metodi di pagamento associati al metodo di consegna selezionato.
2.0�Guida all’installazione di�Estensione OpenCart One Page Checkout
Prima di iniziare il processo di installazione, è necessario acquistare il�Estensione OpenCart One Page Checkout dal negozio Knowband. Una volta acquistato, riceverai i seguenti file nella tua email registrata.
- Codice sorgente di OpenCart One Page Checkout Extension in formato file zippato.
- Manuale utente dell’estensione OpenCart One Page Checkout.
Ora per installare questo OpenCart Single Page Checkout nel tuo negozio online, segui i passaggi indicati: 1. Decomprimi il file zip. Otterrai le cartelle come mostrato nell’immagine qui sotto
2. Copia tutte le cartelle del file zip nella directory principale dell’installazione di OpenCart tramite il gestore FTP.
- Dopo aver decompresso la cartella, troverai un file� supercheckout_pro.ocmod.xml come mostrato di seguito:
- Ora nel pannello di amministrazione, fai clic su Estensioni nel menu a sinistra. Quindi fare clic su Extension Installer (�Home->estensione).
- Ora carica supercheckout_pro.ocmod.xml. Una volta caricato il file, viene visualizzato un messaggio di successo.
- Dopo che il file è stato caricato, vai a��Home->Modifica
- Troverai un file con il nome Supercheckout Pro v2.8 (questo significa che il tuo ocmod è stato installato con successo). Fare clic sull’icona “+” corrispondente per attivarla. L’icona verde diventa rossa come mostrato di seguito.
- Infine, fai clic sul pulsante di aggiornamento (questo è obbligatorio).
Quindi…OpenCart One Page Checkout Pro è ora installato correttamente ed è pronto per l’uso nel tuo negozio. Vai al menu di amministrazione e fai clic su Estensioni e poi su Moduli. Fare clic sul pulsante Configura accanto a�Supercheckout di Knowband.
3.0 Interfaccia di amministrazione di�Modulo di pagamento in un solo passaggio reattivo OpenCart
Subito dopo l’installazione corretta del sito Web One Page Checkout per OpenCart, è possibile configurare i campi del modulo di checkout in base alle proprie esigenze. Devi navigare tra le impostazioni nell’ordine indicato: Pannello di Amministrazione > Estensioni > moduli >Supercheckout di Knowband
L’interfaccia di amministrazione facile da capire di�OpenCart One Page Checkout Pro è diviso in dieci sezioni e precisamente: 1. Impostazioni generali 2. Personalizzatore 3. Impostazioni di accesso 4. Indirizzo di pagamento 5. Indirizzo di spedizione 6. Metodo di spedizione 7. Ship2Pay 8. Metodo di pagamento 9. Carrello 10. Design 11. Newsletter Ognuna di queste sezioni è stato discusso di seguito:
3.1 Impostazioni generali
- Attiva / Disattiva: Usando questa opzione, puoi abilitare o disabilitare la completa funzionalità del�OpenCart One Page Checkout Pro�plug-in da OFF a ON.
- Abilita opzione newsletter: Puoi abilitare o disabilitare l’opzione Newsletter nella pagina Supercheckout. Una volta abilitato questo pulsante, si verificheranno i seguenti casi: a.) L’opzione Newsletter sarà visibile ai clienti che effettuano il checkout come ospite, solo se hai abilitato l’opzione Registra automaticamente come ospite. b.) L’opzione Newsletter sarà sempre visibile ai clienti se stanno creando un nuovo account. c.) L’opzione Newsletter non sarà mai visibile ai clienti che hanno effettuato l’accesso.
- Registra ospite automaticamente: Puoi abilitare questa opzione per registrare automaticamente i clienti ospiti nel tuo negozio. Abilitando questa opzione, puoi registrare i tuoi clienti nel negozio e inviare loro una password generata sulla loro e-mail.
- Registra conto: Abilitando questo campo, puoi mostrare un campo password nella pagina del supercheckout in modo che i nuovi utenti possano facilmente impostare la password desiderata per il proprio account.
- Seleziona l’opzione predefinita al momento del pagamento: Con questa opzione, puoi impostare un’opzione predefinita nella sezione di accesso di OpenCart“Supercheckout di una pagina”.pagina fuori dalle opzioni come Ospite, Accedi e Registrati.
- Disattiva ospite: Puoi abilitare o disabilitare la funzionalità ospite per gli utenti nella sezione di accesso di One Page Checkout.
- Aggiungi stile personalizzato:�Con questa opzione, puoi aggiungere o includere uno stile personalizzato nella pagina Supercheckout. Per applicare alcuni CSS personalizzati nella pagina Supercheckout, puoi scrivere quel CSS nella casella di testo che si trova appena a destra dell’etichetta Aggiungi stile personalizzato. Ad esempio: puoi cambiare il colore dei pulsanti nella pagina Supercheckout.
- Aggiungi importo minimo per mostrare il banner di spedizione gratuita: Da questa scheda, l’amministratore può aggiungere un importo minimo richiesto dopo il quale i clienti avranno diritto a ottenere la spedizione gratuita del loro ordine.
- Abilita rilevamento automatico Paese: Dopo aver abilitato questa funzione, l’estensione rileverà e riempirà automaticamente il paese dell’utente nella sezione del paese.
- Convalida in linea: Con questa funzione, l’estensione visualizza un errore ogni volta che l’utente non compila un campo obbligatorio nella pagina di pagamento.
- Attiva l’indirizzo automatico di Google per compilare: Non appena l’utente inizia a digitare il suo indirizzo, l’estensione suggerisce il suo indirizzo se questa funzione è abilitata.
- Abilita o disabilita nuovo modello: Con l’estensione OpenCart One Page Checkout, il proprietario del negozio può applicare il modello di checkout nuovo o vecchio secondo il suo desiderio dalle impostazioni generali.
- Modalità di prova:�Questa opzione consente di abilitare o disabilitare la funzionalit� della modalit� test di questo�Estensione OpenCart One Page Checkout.
- URL di test:�Una volta abilitata la modalità test, puoi impostare un URL di supercheckout in cui puoi testare la funzionalità del checkout di una pagina.
Customizer
- Colore di sfondo della barra di spedizione gratuita: Questa sezione ti consente di modificare il colore di sfondo della barra di spedizione gratuita nella pagina di pagamento.
- CSS e JS personalizzati: Questa sezione ti consente di personalizzare l’aspetto della pagina di pagamento con CSS e JS personalizzati.
3.2 Accesso
Sotto questa scheda, troverai le opzioni per configurare le opzioni di accesso a Facebook, Google e Paypal come mostrato di seguito.
- Abilita l’accesso a Facebook: Con questa opzione, puoi abilitare/disabilitare l’opzione Facebook Login su One Page Checkout.
- ID app Facebook: Questa opzione ti consente di impostare l’ID app di Facebook che può essere generato utilizzando l’account dello sviluppatore di Facebook.
- Segreto dell’app di Facebook: Utilizzando questa opzione, imposta la chiave segreta generata utilizzando l’account dello sviluppatore di Facebook.
- Abilita l’accesso a Google:�Con questa opzione, puoi abilitare/disabilitare l’opzione Accesso Google su One Page Checkout.
- ID app Google:�Questa opzione ti consente di impostare l’ID app Google.
- L’ID cliente di Google:�Questo campo ti consente di impostare l’ID client di Google creato dalla console di Google.
- Segreto dell’app di Google:�Utilizzando questa opzione, puoi impostare la chiave segreta dell’app generata utilizzando la console di Google.
- Abilita l’accesso Paypal: Con questa opzione, puoi consentire ai tuoi clienti di accedere tramite i loro account Paypal.
- ID cliente Paypal: Questa opzione ti consente di aggiungere il tuo ID cliente Paypal.
- Segreto cliente Paypal: Questa opzione ti consente di aggiungere il tuo ID segreto cliente PayPal.
Per istruzioni dettagliate su come generare l’ID app, la chiave segreta dell’app e l’ID client, passa alla sezione successiva.
3.2.1 Come configurare l’accesso a Facebook?
L’app di Facebook può essere creata seguendo i passaggi indicati di seguito: –
1:�Vai all�URL indicato: https://developers.facebook.com/apps/
2:�Fai clic sul pulsante “Crea app”.
3 e 4: Seleziona il “Crea esperienze connesse” opzione e fare clic sul pulsante ‘Continua’.
5 e 6: Aggiungi “Nome visualizzato app”, “Email contatto app” e scegli da “Hai un account Business Manager?” e quindi fare clic sul pulsante “Crea app”.
7 e 8: Dopo aver fatto clic su Crea ID app, sarà necessario eseguire un controllo di sicurezza come mostrato:
9:�Fare clic sulla scheda “Impostazioni”.
Gentilmente aggiungi elimina l’URL di richiamata. Puoi controllare la descrizione dell’URL di callback di eliminazione da qui -�https://developers.facebook.com/docs/development/create-an-app/app-dashboard/data-deletion-callback/
10-15: Nel menu a discesa saranno disponibili due opzioni, Base e Avanzate, fare clic su “Base”. Quindi inserisci “Dominio app”, “Privacy�URL”, “URL dei termini di servizio”, “Aggiungi icona”, “Seleziona categoria” e fai clic sul pulsante “Salva modifiche”.
Domini app:
tuodominio.com è correggere
tuodominio.com/store è scorretto
www.domain.com è scorretto
16:�Ora fai clic su “+Aggiungi piattaforma”.
17:�E seleziona Sito web come piattaforma.
18 e 19:Ora inserisci l’URL del tuo sito.
20&21:�Fare clic su “Prodotti+” e fai clic sul pulsante Imposta dalla scheda di accesso di Facebook.
22:�Seleziona il Web come piattaforma per l’app.
23: Aggiungi l’URL del sito e fai clic su Salva.
24-26:�Fare clic su Impostazioni e aggiungere un URI di reindirizzamento OAuth valido.
URI di reindirizzamento OAuth validi:
https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1
27: Seleziona il “In sviluppo” opzione.
28 e 29: Scegli una categoria dal menu a discesa e fai clic sul pulsante “Cambia modalità”.
30:�Copia l’ID app e il segreto app e incollali nei campi forniti nel modulo.
Passo finale:
1. Accedi con l’SDK JavaScript.
Imposta questo campo come Sì.
2. Domini consentiti per JavaScript SDK
Imposta il dominio del negozio.
Nota: – qui il dominio deve essere inserito nel tipo di seguito.
3.2.2 Come configurare Google Login?
Segui i passaggi seguenti per ottenere l’ID client e il segreto client. 1. Vai al link “ https://console.developers.google.com/project “. 2. Fare clic su “Crea un progetto”.
3. Immettere il nome del progetto e il nome dell’organizzazione desiderati e fare clic su “Crea”.
4. Vai a Gestione API, fai clic sul menu a sinistra, fai clic su API e servizi, quindi fai clic su Crea credenziali.
5. Selezionare l’opzione ID client OAuth.
6. Fare clic sul pulsante “Configura schermata di consenso”. Inserisci “ID e-mail”, “Nome prodotto” e quindi fai clic sul pulsante “Salva”.
7. Selezionare l’opzione Esterno fare clic sul pulsante “Crea”,
Utilizzare il seguente URL di reindirizzamento https://your_store_url/index.php?route=supercheckout/supercheckout 8. Aggiungere il nome dell’app e l’e-mail di supporto utente.
9. Fare clic su Aggiungi dominio e aggiungere dominio autorizzato, quindi fare clic su Salva e continua.
10. Fare clic sul pulsante Salva e continua.
Fai clic su +Aggiungi utenti.
11. Aggiungere un nome utente e fare clic sul pulsante Aggiungi.
13. Fare clic sulla schermata del contenuto di Oath, quindi fare clic sul pulsante Pubblica Aggiungi.
16. Aggiungere gli URL e quindi fare clic sul pulsante Crea.
17. Copia e incolla l’ID cliente e il segreto cliente nel campo di testo mostrato di seguito nel modulo di pagamento di una pagina di Prestashop
Come generare la chiave API di Google:
1) Vai su API Manager, fai clic sul menu a sinistra, fai clic su API e servizi, quindi fai clic su Credenziali.
2) Fare clic su Crea credenziali e quindi selezionare la chiave API.
3)Copia la chiave API e inseriscila nel campo Google App Id della pagina di accesso del modulo di fine amministrazione.
3.3 Indirizzo di pagamento
Questa scheda contiene le impostazioni per i campi che devono essere visualizzati nella sezione Pagamento o Indirizzo di fatturazione nella pagina di pagamento, come mostrato di seguito.
- Si compone di due sezioni. Quello a sinistra è per i clienti ospiti e quello a destra per i clienti registrati.
- Per visualizzare/nascondere un campo nella pagina di pagamento, seleziona la casella di controllo appena a sinistra dell’etichetta Mostra.
- Per rendere obbligatorio un campo (campo obbligatorio) seleziona la casella di controllo appena a sinistra di Richiedi etichetta.
- I campi possono anche essere riorganizzati secondo il requisito. Per riorganizzare basta spostare il cursore sull’icona di trascinamento e trascinare e rilasciare il campo ovunque sia richiesto, come mostrato di seguito.
- Al salvataggio, i campi verranno riorganizzati secondo le modifiche.
3.4 Indirizzo di spedizione
Questa scheda contiene le impostazioni per i campi che devono essere visualizzati nella sezione Indirizzo di spedizione nella pagina di pagamento, come mostrato di seguito.
- Si compone di due sezioni. Quello a sinistra è per i clienti ospiti e quello a destra per i clienti registrati.
- Per visualizzare/nascondere un campo nella pagina di pagamento, seleziona la casella di controllo appena a sinistra dell’etichetta Mostra.
- Per rendere obbligatorio un campo (campo obbligatorio) seleziona la casella di controllo appena a sinistra di Richiedi etichetta.
- I campi possono anche essere riorganizzati secondo il requisito. Per riorganizzare basta spostare il cursore sull’icona di trascinamento e trascinare e rilasciare il campo ovunque sia richiesto, come mostrato di seguito.
- Al salvataggio, i campi verranno riorganizzati secondo le modifiche.
3.5 Metodo di spedizione
Questa scheda contiene le impostazioni per il metodo di spedizione che viene mostrato nella pagina di pagamento. Contiene le impostazioni per abilitare/disabilitare e impostare il metodo di spedizione predefinito come mostrato di seguito:
- Visualizza i metodi di spedizione: Con questa opzione, puoi mostrare/nascondere i metodi di spedizione nella pagina di checkout. Per questo, devi cambiare il pulsante da ON a OFF o viceversa.
- Stile di visualizzazione: Questa opzione ti consente di selezionare lo stile di visualizzazione per i metodi di spedizione che hai aggiunto al tuo sito web. Puoi scegliere qualsiasi stile tra tre opzioni come Solo testo, Solo immagine o Testo con immagini.
- Visualizza il titolo del metodo di spedizione: Con questa opzione, puoi abilitare o disabilitare il titolo per i metodi di spedizione visualizzati nella pagina di pagamento.
- Seleziona un metodo di spedizione predefinito: Questa opzione ti aiuta a selezionare qualsiasi metodo come metodo di spedizione predefinito per il tuo negozio.
- Titolo: Con questa opzione, puoi impostare i titoli corrispondenti a ciascuno dei metodi di spedizione aggiunti e configurati per il tuo negozio. È possibile impostare il titolo in lingua inglese o francese.
- Logo: Questa opzione ti consente di impostare il logo desiderato, corrispondente a ciascuno dei metodi di spedizione configurati per il tuo negozio.
3.6 Ship2Pay
La funzione ship2pay offerta dal modulo OpenCart Supercheckout disabilita automaticamente i metodi di pagamento in base al metodo di spedizione selezionato dal cliente. Cioè, l’amministratore può mappare alcune particolari opzioni di pagamento con alcune particolari opzioni di spedizione nel negozio.
3.7 Metodo di pagamento
Questa scheda contiene le impostazioni per i metodi di pagamento mostrati nella pagina di pagamento come l’abilitazione/disabilitazione o la selezione di un metodo predefinito.
- Visualizza i metodi di pagamento:�Con questa opzione, puoi mostrare/nascondere i metodi di pagamento nella pagina di pagamento. Per questo, devi cambiare il pulsante da ON a OFF o viceversa.
- Stile di visualizzazione:�Questa opzione ti consente di selezionare lo stile di visualizzazione per i metodi di pagamento che hai aggiunto al tuo sito web. Puoi scegliere qualsiasi stile tra tre opzioni come Solo testo, Solo immagine o Testo con immagini.
- Seleziona un metodo di pagamento predefinito:�Questa opzione ti aiuta a selezionare qualsiasi metodo come metodo di pagamento predefinito per il tuo negozio.
- Titolo:�Con questa opzione, puoi impostare i titoli corrispondenti a ciascuno dei metodi di pagamento aggiunti e configurati per il tuo negozio. È possibile impostare il titolo in lingua inglese o francese.
- Logo:�Questa opzione ti consente di impostare il logo desiderato�corrispondente a ciascuno dei metodi di pagamento configurati per il tuo negozio.
3.8� Carrello
Sotto questa sezione troverai i campi del carrello divisi in due sezioni, quella di sinistra è per i clienti ospiti e quella di destra è per i clienti registrati o loggati.
- Per visualizzare/nascondere il carrello dalla pagina di pagamento, deselezionare la casella di controllo presente davanti all’etichetta Visualizza carrello.
- Per abilitare/disabilitare qualsiasi colonna nel carrello selezionare/deselezionare la casella di controllo davanti a quella rispettiva colonna.
- Per abilitare/disabilitare le immagini popup per il prodotto selezionare/deselezionare la casella di controllo davanti alla rispettiva colonna.
- Per modificare la dimensione del popup dell’immagine, inserisci la larghezza e l’altezza del popup nella casella di testo davanti all’etichetta Product Image Size.
- Le opzioni Coupon, Punti premio e Voucher possono anche essere disabilitate o abilitate selezionando/deselezionando la casella di controllo davanti al rispettivo campo. Si prega di notare che la casella di testo del punto premio sarà visibile nella pagina Supercheckout solo una volta soddisfatte le seguenti tre condizioni. a.) Il cliente deve essere loggato. b.) Deve avere almeno 1 punto premio nel suo account. c.) Deve avere nel carrello un prodotto acquistabile con punti premio.
Confermare:
- Questa scheda è nuovamente divisa in due sezioni, quella di sinistra è per i clienti ospiti e quella di destra per i clienti registrati o che hanno effettuato l’accesso.
- Per abilitare la casella di commento per l’ordine in base al cliente, seleziona la casella di controllo di fronte a Lascia un commento per l’etichetta dell’ordine e per disabilitare deseleziona la stessa casella di controllo.
- Per abilitare l’accettazione del termine o qualsiasi altra informazione salvata nell’amministratore per il negozio, selezionare/deselezionare la casella di controllo davanti all’etichetta Accetto le condizioni.
3.9 Scheda Progettazione
Questa scheda contiene le impostazioni per la progettazione di�OpenCart One Page Checkout Pro come mostrato di seguito:
1 colonna
2 colonna
3 colonna
Newsletter 3.10
Facendo clic sulla scheda Newsletter del�Modulo di pagamento in un solo passaggio reattivo OpenCart, puoi configurare le impostazioni di MailChimp, SendinBlue e Klaviyo Integrator come mostrato di seguito:
- Abilita MailChimp: Puoi abilitare o disabilitare la funzionalità di MailChimp Integrator per il tuo negozio. Puoi abilitare questa opzione se desideri aumentare le iscrizioni alla newsletter per il tuo negozio.
- Chiave API MailChimp: Questa opzione ti aiuta a impostare la chiave API Mailchimp per acquisire le email dei clienti.
- Elenco MailChimp: Una volta che la chiave è configurata con questo�Estensione per il checkout rapido OpenCart, puoi recuperare e selezionare l’elenco MailChimp.
Lo stesso si può fare per SendinBlue e Klaviyo.
4.0 Interfaccia frontale di�Estensione per il pagamento in un passaggio di OpenCart
Quando l’utente fa clic sul pulsante “Aggiungi al carrello” corrispondente a un prodotto ed esegue il checkout, vedrà il seguente supercheckout sullo schermo.
Estensione OpenCart One Page Checkout: https://www.knowband.com/opencart-one-supercheckout-pro
OpenCart One Page Checkout Admin Demo: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en
OpenCart One Page Checkout Front Demo: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en
OpenCart One Page Checkout dal mercato ufficiale di OpenCart: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353