Estensione per il pagamento avanzato di una pagina OpenCart – Manuale dell’utente

 

1.0 Introduzione

Ogni 1 utente online su 10 è costretto ad abbandonare il proprio carrello solo a causa del lungo e complicato checkout. Inoltre, puoi ottimizzare il checkout del tuo sito in modo interessante incorporando OpenCart One Page Advanced Checkout Extension di Knowband. In effetti, il modulo popup di pagamento reattivo OpenCart trasforma l’intero processo di pagamento in un singolo popup basato su Ajax. Inoltre, che si attiva sullo schermo quando il cliente sceglie di acquistare un prodotto dal negozio. Pertanto, questo One Page Checkout per OpenCart riduce l’abbandono del carrello offrendo l’intero processo di acquisto su un singolo popup, senza caricare la pagina successiva.

1.1 Funzionalità di One Page Checkout per OpenCart

Incorporare One Page Checkout per il negozio OpenCart non è un grosso problema in quanto offre una semplice personalizzazione senza coinvolgere competenze tecniche o modifiche al codice esistente. Quindi, consenti rapidamente ai tuoi clienti di acquistare il prodotto tramite un singolo popup, offrendo loro un checkout più rapido. Inoltre, un’esperienza meno interruzione. Pertanto, di seguito sono elencati i punti salienti di questa estensione OpenCart One Page Checkout. 1. Il modulo OpenCart One Page Checkout mostra i campi di checkout totali sotto forma di un popup di checkout reattivo basato su ajax sul front-end. Inoltre, del sito Web senza reindirizzamento a un altro URL. 2. Questo One Page Checkout per OpenCart fornisce un modo semplice per aumentare le iscrizioni alla newsletter per il business online. 3. Il popup di checkout reattivo incorporato utilizzando il modulo di checkout semplificato OpenCart può essere facilmente abilitato o disabilitato utilizzando il pulsante di attivazione/disattivazione fornito nel back-end. 4. La funzione di registrazione ospite del popup di pagamento reattivo OpenCart registra automaticamente il cliente con il sito. Inoltre, invia loro la password di accesso sulla loro e-mail. 5. Hai la flessibilità di abilitare o disabilitare la funzionalità di checkout degli ospiti del modulo OpenCart One Page Checkout. 6. Utilizzando questa estensione per il checkout a pagina singola OpenCart, puoi aggiungere il codice CSS alla pagina di checkout avanzato. 7. Il modulo di verifica della pagina singola di OpenCart offre una funzione di modalità di test che consente di testare la funzionalità della pagina di verifica avanzata su un IP specifico. 8. Con il modulo di pagamento semplificato OpenCart, offri ai clienti il vantaggio delle opzioni di accesso social. Ad esempio, Google e Facebook sulla pagina di pagamento. 9. L’estensione per il checkout rapido di OpenCart consente di mostrare/nascondere i campi dell’indirizzo di pagamento e di spedizione in modo diverso per i clienti registrati e ospiti del negozio. 10. I contrassegni del campo dell’indirizzo personalizzato sono necessari o facoltativi con l’aiuto di questo modulo Supercheckout di una pagina OpenCart. 11. Utilizzando One Page Checkout per il sito OpenCart, è possibile fornire ai clienti più metodi di spedizione e pagamento configurabili dal back-end. 12. Il modulo popup di pagamento reattivo OpenCart ti facilita nell’impostare un’immagine e un titolo del logo desiderati per ciascuno dei metodi di pagamento e spedizione visualizzati nella pagina di supercheckout. 13. La funzione ship2pay dell’estensione di checkout rapido OpenCart seleziona automaticamente il metodo di pagamento corrispondente a ciascun metodo di spedizione selezionato dal cliente. 14. L’estensione popup di pagamento reattivo OpenCart offre un carrello configurabile i cui campi possono essere corretti in base alle esigenze aziendali. 15. Il modulo OpenCart One Page Checkout è compatibile con più negozi e multilingue. 16. L’estensione per il checkout rapido OpenCart offre ai clienti un layout reattivo per dispositivi mobili. 17. La funzione MailChimp Integrator di OpenCart Single Page checkout sincronizza automaticamente i dati del cliente con l’account MailChimp connesso del venditore.

1.2 Interfaccia frontale del modulo popup di pagamento reattivo OpenCart

Quando l’utente fa clic sul pulsante “Aggiungi al carrello” corrispondente a un prodotto, vedrà sullo schermo il seguente cursore di pagamento reattivo.

Sezione di riepilogo del carrello di OpenCart One Page Advanced Checkout

Inoltre, facendo clic sul pulsante “Acquista”, possono visualizzare e completare il modulo di pagamento avanzato completo in un’unica operazione, come mostrato nelle immagini seguenti:

Sezione di accesso all’account

Se il cliente deseleziona la casella di controllo “Spedisci allo stesso indirizzo”, vedrà la sezione dell’indirizzo di spedizione come mostrato di seguito:

Sezione modalità di spedizione e pagamento

2.0 Guida all’installazione di OpenCart One Page Advanced Checkout Extension

Prima di iniziare il processo di installazione, devi acquistare il modulo OpenCart One Page Checkout dal negozio Knowband. Inoltre, una volta acquistato, riceverai i seguenti file nella tua email registrata.

• Codice sorgente di OpenCart One Page Advanced Checkout Extension in formato file zippato.
• Manuale utente dell’estensione OpenCart One Page Checkout.

Ora, per installare questo OpenCart Advanced 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. Quindi, OpenCart One Page Advanced Checkout è ora installato correttamente. Inoltre, è pronto per l’uso nel tuo negozio. Inoltre, vai al menu di amministrazione. Inoltre, fai clic sulle estensioni e quindi fai clic sul pulsante di configurazione accanto a One Page Advanced Checkout.

3.0 Interfaccia di amministrazione del popup di pagamento reattivo OpenCart

Subito dopo l’installazione corretta di One Page Checkout per OpenCart sul sito Web, è possibile configurare i campi del modulo di pagamento in base alle proprie esigenze. Inoltre, devi navigare tra le impostazioni nell’ordine indicato: Pannello di amministrazione > Estensioni > Moduli > Pagamento avanzato di una pagina

L’interfaccia di amministrazione semplice da capire dell’estensione per il checkout rapido di OpenCart è divisa in nove sezioni, vale a dire:

1. Impostazioni generali
2. Impostazioni di accesso
3. Indirizzo di fatturazione
4. indirizzo di spedizione
5. metodo di spedizione
6. Ship2Pay
7. Metodo di pagamento
8. Carrello
9. Newsletter

3.1 Impostazioni generali

• Attiva / Disattiva: Questa opzione ti consente di abilitare o disabilitare la funzionalità completa di One Page Checkout per Opencart sul sito web. Se disabilitato, ai clienti viene mostrato il checkout Opencart standard.
• Abilita opzione newsletter: Utilizzando questa opzione, puoi mostrare o nascondere la casella di iscrizione alla newsletter per il tuo sito. Se il cliente seleziona l’opzione newsletter, si iscriverà agli aggiornamenti del sito (newsletter).
• Registra ospite automaticamente: Puoi abilitare la registrazione automatica per i tuoi clienti ospiti (utenti che eseguono il checkout come ospite). Questa opzione invierà automaticamente una password al cliente per un ulteriore utilizzo dell’account.
• Registra conto: Abilitando questa opzione, puoi fornire campi password al checkout di una singola pagina in cui l’utente può inserire la propria password per registrarsi.
• Visualizza ospite: Questa opzione mostrerà o nasconderà l’opzione ospite nella sezione di accesso del checkout. Utilizzando questa opzione, gli utenti possono eseguire il checkout degli ospiti per i loro articoli.
• Aggiungi stile personalizzato: Questa opzione ti consente di includere uno stile personalizzato aggiuntivo (codice CSS), visualizzato nella parte anteriore del loro sito web.
• Modalità di prova: Puoi abilitare questa opzione per testare la funzionalità del modulo di verifica di una pagina prima di renderla attiva per i clienti.
• Aggiungi IP: Questa opzione ti consente di inserire l’indirizzo IP specifico in cui desideri testare le funzionalità avanzate di supercheckout.

3.2 Impostazioni di accesso

• Abilita l’accesso a Facebook: Questa opzione abiliterà o disabiliterà l’opzione di accesso a Facebook visualizzata nella parte anteriore del modulo di pagamento di una pagina.
• ID app Facebook: Questa opzione ti consente di impostare l’ID dell’app Facebook necessario per connetterti con il tuo account Facebook.
• Segreto dell’app di Facebook: Questa opzione imposterà la chiave segreta dell’app di Facebook. Nota: puoi ottenere l’ID dell’app Facebook e la chiave segreta da https://developers.facebook.com/ che è stato discusso nella sezione 3.2.1
• Abilita l’accesso a Google: Questa opzione abiliterà o disabiliterà l’opzione di accesso di Google visualizzata nella parte anteriore del modulo di pagamento di una pagina.
• ID app Google: Questa opzione ti consente di impostare l’ID app Google necessario per connetterti con il tuo account Google.
• ID client Google: Questa opzione ti consente di impostare l’ID client di Google.
• Alla fine, Google�App�Segreto:�Questa opzione imposterà la chiave segreta dell’app di Google.

Nota: è possibile ottenere l’ID app Google, l’ID client e la chiave segreta da https://code.google.com/apis/console discusso nella sezione 3.2.2

3.2.1 Come configurare Facebook Login

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 “Aggiungi una nuova app”. 3 e 4: inserisci il nome dell’app e l’ID e-mail, quindi fai clic sul pulsante “Crea ID app”.

5 e 6: dopo aver fatto clic su Crea ID app, dovrai eseguire un controllo di sicurezza come mostrato:

7: Fare clic sulla scheda “Impostazioni”.

8-13: Saranno disponibili due opzioni nel menu a discesa, Base e Avanzato, fare clic su “Base”. Quindi inserisci “Dominio app”, “E-mail di contatto”, “URL privacy”, “URL termini e condizioni”, “Aggiungi logo”, “Seleziona categoria” e fai clic sul pulsante “Salva modifiche”. App Domains: yourdomain.com è corretto yourdomain.com/store non è corretto www.domain.com non è corretto

14: Ora fai clic su “+Aggiungi piattaforma”.

15: E seleziona Sito web come piattaforma

16: Ora inserisci l’URL del tuo sito.

17&18: Clicca su “Prodotti+” e seleziona Facebook login.

19: selezionare il Web come piattaforma per l’app.

20: Ora fai clic su Salva.

21 e 22: 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

23&24: Clicca su “Revisione app”. E contrassegna “Rendi pubblico il nome della tua app” su Sì.

Passaggio finale: copia l’ID app e il segreto dell’app e incollali nei campi forniti nel modulo.

3.2.2 Come impostare 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 sull’opzione a discesa evidenziata nel pulsante ” 2 ” e quindi fare clic su “Crea un progetto”.

3. Immettere il nome del progetto desiderato e fare clic su “Crea”.

4. Vai a Gestione API, fai clic su Crea credenziali e seleziona l’opzione ID client OAuth.

5. Fare clic sul pulsante “Configura schermata di consenso”.

6. Immettere “ID e-mail”, “Nome prodotto” e quindi fare clic sul pulsante “Salva”.

7. Seleziona “Applicazione Web”, inserisci “Nome”, “URI reindirizzati autorizzati” come indicato di seguito e fai clic sul pulsante “Crea”,

Utilizzare il seguente URL di reindirizzamento

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout

8. Copiare l’ID client e il segreto client.

9. Incolla l’ID cliente e il segreto cliente nel campo di testo mostrato di seguito nel pannello di amministrazione del 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

OpenCart One Page Checkout ti consente di mostrare o nascondere qualsiasi campo per l’indirizzo di pagamento. I campi possono essere abilitati o disabilitati separatamente per i clienti loggati e non. Puoi contrassegnare qualsiasi campo come richiesto, in modo diverso per i clienti registrati e disconnessi del negozio. Inoltre, puoi riordinare i campi dell’indirizzo utilizzando una semplice azione di trascinamento della selezione.

3.4 Indirizzo di spedizione

 

Il modulo popup di pagamento reattivo OpenCart ti consente di mostrare o nascondere qualsiasi campo per l’indirizzo di spedizione. I campi possono essere abilitati o disabilitati separatamente per i clienti loggati e non. Utilizzando OpenCart One Page Advanced Checkout, puoi contrassegnare qualsiasi campo come richiesto, in modo diverso per i clienti registrati e disconnessi del negozio. Inoltre, puoi riordinare i campi dell’indirizzo utilizzando una semplice azione di trascinamento della selezione. Nota: per includere e mostrare più campi personalizzati nell’indirizzo di pagamento, nell’indirizzo di spedizione, nella sezione del carrello o nella sezione dell’account del checkout, puoi fare riferimento alla sezione 3.10

3.5 Metodo di spedizione

• Visualizza i metodi di spedizione: Questa opzione mostrerà/nasconderà l’elenco completo dei metodi di spedizione forniti nella pagina di pagamento avanzato.
• Stile di visualizzazione: Con questa opzione, puoi selezionare lo stile di visualizzazione per i metodi di spedizione. Può essere solo l’immagine del logo, solo il testo o entrambi.
• Visualizza il titolo del metodo di spedizione: Questa opzione abiliterà o disabiliterà il titolo per il particolare metodo di spedizione.
• Seleziona il metodo di spedizione predefinito: Con questa opzione, puoi selezionare qualsiasi metodo di spedizione come metodo predefinito.
• Titolo: Questa opzione imposta il titolo desiderato per il metodo di spedizione.
• Logo: Questa opzione imposta l’immagine del logo per il metodo di spedizione.

Allo stesso modo, puoi modificare il titolo e l’immagine del logo per tutti i metodi di spedizione utilizzando questo modulo OpenCart One Page Advanced Checkout.

3.6 Ship2Pay

3.7 Metodo di pagamento

• Visualizza i metodi di pagamento: Questa opzione mostrerà/nasconderà l’elenco completo dei metodi di pagamento forniti nella pagina di pagamento avanzato.
• Stile di visualizzazione: Con questa opzione, puoi selezionare lo stile di visualizzazione per i metodi di pagamento. Può essere solo l’immagine del logo, solo il testo o entrambi.
• Seleziona il metodo di pagamento predefinito: Con questa opzione, puoi selezionare qualsiasi metodo di pagamento come metodo predefinito.
• Titolo: Questa opzione imposta il titolo desiderato per il metodo di pagamento.
• Logo: Questa opzione imposta l’immagine del logo per il metodo di pagamento.

Allo stesso modo, puoi modificare il titolo e l’immagine del logo per tutti i metodi di pagamento con l’aiuto del supercheckout di una pagina.

3.8 Carrello

In questa sezione di OpenCart One Page Supercheckout, puoi personalizzare il carrello e visualizzarlo nel modo desiderato nel tuo negozio. La dimensione dell’immagine degli articoli del carrello può essere facilmente modificata impostando l’altezza e la larghezza dell’immagine.

• Dimensione dell’immagine del prodotto: Questa opzione ti consente di impostare la dimensione dell’immagine per i prodotti mostrati nella sezione del carrello del checkout di una pagina. Inoltre, puoi mostrare o nascondere i vari campi del carrello per accedere e disconnettere i clienti del negozio. Campi come “Accetto le condizioni”. Inoltre, ordina i commenti contrassegnati come facoltativi o facoltativi secondo i requisiti del tuo sito.

Newsletter 3.9

• Abilita MailChimp: Questa opzione di Supercheckout di una pagina Opencart ti consente di abilitare o disabilitare la funzionalità di integrazione MailChimp per il tuo negozio.
• Chiave API MailChimp: Con questa opzione, puoi impostare la chiave API MailChimp che collegherà il tuo sito all’account MailChimp del venditore.
• Elenco MailChimp: Usando questa opzione, puoi recuperare e selezionare il particolare elenco collegato all’account MailChimp.

3.9.1 Come configurare MailChimp

1. Accedi al tuo account Mail Chimp.
2. Fare clic sulla scheda nell’angolo destro > Scegli profilo > Extra > Chiavi API.
3. Qui l’amministratore può creare una chiave API facendo clic sul pulsante “Crea una chiave”.
4. Copia la chiave API.
5. L’amministratore può anche creare un elenco diverso per ogni cliente di accesso social facendo clic su “Elenco” nella barra dei menu in alto.
6. Ora incolla la chiave API nella sezione Chiave API scimpanzé posta fornita e fai clic sul pulsante “Ottieni elenco”.
7. Selezionare l’elenco dal menu a discesa.

3.10 Come aggiungere, modificare o eliminare campi personalizzati alla pagina Supercheckout

Per aggiungere campi personalizzati a qualsiasi sezione di One Page Checkout, puoi andare all’opzione “Campi personalizzati” nella scheda “Clienti” nella sezione a sinistra dell’interfaccia di amministrazione.