Knowband Blog | Ecommerce Modules

OpenCart Progressive Web App (PWA) – Manuale dell’utente

Joe Parker


1.0 Introduzione

Questa estensione OpenCart automatizzata è costruita con lo scopo di fornire facilità ai proprietari di negozi online per trasformare il loro negozio in un’applicazione Web progressiva. Il negozio eCommerce in PWA è una delle principali tecnologie avanzate che ogni azienda di eCommerce dovrebbe cercare. L’App OpenCart PWA Mobile è in realtà un’applicazione web che non si basa sugli App Store di terze parti (Google Play e Apple App Store). Gli acquirenti online possono facilmente “Aggiungi app PWA alla schermata iniziale” e acquistare prodotti in movimento come qualsiasi altra applicazione.

1.1 Come funziona OpenCart Progressive Web App (PWA)?

Una volta che il negozio eCommerce è stato convertito in OpenCart PWA Mobile App, ogni volta che un utente apre l’URL del negozio nel browser mobile, agli utenti verrà chiesto di “Aggiungi PWA alla schermata iniziale”. È così semplice da installare e utilizzare OpenCart Progressive Web App.

1.2 Caratteristiche principali per scegliere OpenCart PWA:

[IMP] Note per iOS PWA:

�> I dispositivi iOS (iPhone, iPad, ecc.) non offrono alcun prompt integrato “Aggiungi alla schermata iniziale”. Pertanto, gli utenti dell’app mobile PWA devono aggiungere manualmente l’app mobile PWA OpenCart alla schermata iniziale di iPhone o iPad. �> iOS non supporta le notifiche push web. Pertanto, l’amministratore del negozio può inviare le notifiche push solo al dispositivo Android, non su iOS.

[NUOVO AGGIORNAMENTO]�OpenCart PWA supporta le lingue RTL (arabo, ebraico, ecc.):

Il creatore di app per dispositivi mobili di OpenCart PWA ora supporta più lingue, inclusi gli script RTL (da destra a sinistra), come arabo, ebraico, persiano, ecc. Tutte le lingue del negozio OpenCart saranno sull’app Web progressiva e possono essere aggiunte anche altre lingue richieste. Gli utenti possono scegliere la lingua sull’app Web progressiva e l’intero contenuto dell’app verrà tradotto di conseguenza.

Pienamente compatibile con KnowBand Multi-vendor Marketplace:

La nostra app mobile OpenCart PWA è compatibile con Mercato multivendor OpenCart. Converti il ​​tuo negozio eCommerce OpenCart in un mercato a tutti gli effetti e avvia l’app mobile PWA per lo stesso. I venditori del marketplace saranno disponibili sulla tua Progressive Web App e anche gli utenti potranno semplicemente sfogliarli.

Nota: Le app mobili PWA OpenCart sono incentrate solo sul cliente, ovvero gli utenti possono visitare l’app PWA di navigazione insieme ai venditori. Non ci sarà alcuna dashboard o gestione del venditore tramite OpenCart Progressive Web App. L’amministratore può gestire i venditori dal web del marketplace e gli stessi verranno aggiornati automaticamente sull’app PWA Mobile.

1.3 Visualizza la demo di OpenCart PWA:

 

Esplora le funzionalità del modulo e dell’app PWA dai link demo seguenti:

Pannello di amministrazione del modulo: https://opencartdemo.knowband.com/3.0/pwa/admin/
App demo PWA:ï ¿½https://opencartdemo.knowband.com/3.0/pwa/pwa-app/

(Copia e incolla l’URL nel browser del cellulare e “Aggiungi alla schermata iniziale”)

2.0 Schermate del pannello di amministrazione:

Esplora tutte le impostazioni del pannello di amministrazione dell’estensione OpenCart PWA Mobile App insieme alle funzionalità e lavora con gli snapshot condivisi di seguito:

Impostazioni generali 2.1:

a) Mostra / nascondi anteprima: Tocca il pulsante con l’occhio per visualizzare / nascondere l’anteprima del telefono nel pannello di amministrazione.
b) Stato: Abilita il modulo al funzionamento PWA sui dispositivi mobili.
c) Abilita report registro richieste: Abilita registro errori su dispositivo mobile.
d) Nome per l’app PWA: Immettere il nome per l’app OpenCart PWA.
e) Seleziona layout per la home page: Scegli dal layout della schermata iniziale pre-aggiunto per l’app Web progressiva OpenCart.

f) Abilita barra delle schede: Abilita la barra delle schede nella parte inferiore dell’app OpenCart PWA per una navigazione senza interruzioni.
g) Carattere per l’app PWA: Scegli un carattere per OpenCart Progressive Web App (PWA).
h) Colore pulsante app: Scegli il colore del pulsante per l’app PWA per dispositivi mobili.
i) Colore del tema dell’app: Scegli il colore del tema per l’app PWA.
j) Colore di sfondo dell’app: Scegli il colore di sfondo per l’app PWA.
k) Colore schermata iniziale dell’app: Scegli una schermata iniziale per l’app PWA Mobile.
l) Abilita logo: Aggiungi il logo del tuo marchio sull’intestazione dell’app mobile OpenCart PWA.

m) Immagine per l’icona dell’app: Aggiungi l’immagine dell’icona dell’app nel pannello di amministrazione dell’estensione OpenCart PWA.
n) Reindirizzamento sulla pagina del carrello quando si aggiunge al carrello: Controlla il reindirizzamento del pulsante Aggiungi al carrello ogni volta che un utente tocca il pulsante Aggiungi al carrello.

Impostazioni notifiche push 2.2

Le notifiche push sono il miglior strumento di marketing per la Progressive Web App (PWA) per OpenCart. L’amministratore del negozio può semplicemente promuovere i prodotti e le offerte del negozio agli utenti dell’app e aumentare le vendite e le entrate. Inserisci tutti i dettagli nelle impostazioni delle notifiche push creando un progetto Firebase:

Come impostare un account Firebase?

Passo 1: Accedi a Google Firebase

Passo 2: Crea un nuovo progetto Facendo clic su Aggiungi progetto, verrà visualizzata la seguente finestra di dialogo:


Ci vorranno alcuni secondi per creare il progetto. Quando il progetto è pronto, fai clic su Continua.

Passo 3: Gestisci le impostazioni del progetto Una volta creato il progetto, fare clic su Impostazioni del progetto.

Passo 4: Vai alle opzioni di autenticazione:


Passo 5:Trova le chiavi Firebase Nelle impostazioni del progetto, fai clic su Impostazioni di messaggistica cloud. Da qui puoi ottenere direttamente la chiave del server.


Passo 6:Aggiungi la tua app Web a Firebase

Passo 7:Ottieni altri dettagli relativi a Firebase e incolla gli stessi nel pannello di amministrazione del modulo PWA.

Passo 8:Ottieni la chiave del server Firebase dalla scheda Messaggistica cloud in Impostazioni:

Passo 9:Aggiungi il tuo dominio nell’autenticazione >> accedi.

A) Notifica push ordine riuscita:

Abilita / Disabilita la notifica push automatica da inviare agli utenti dell’app ogni volta che effettuano un ordine con esito positivo dalla OpenCart Progressive Web App (PWA).

B) Notifica push aggiornamento stato ordine:

Abilita / disabilita la notifica push automatica inviata ogni volta che lo stato dell’ordine dall’app viene aggiornato. Gli utenti dell’app mobile OpenCart PWA possono tenere d’occhio i dettagli degli ordini precedenti.

C) Notifica push carrello abbandonata:

Abilita / Disabilita la notifica push automatica inviata agli utenti che abbandonano i prodotti nel carrello senza aver effettuato l’acquisto. Questa notifica push verrà inviata automaticamente agli utenti dopo l’intervallo di tempo inserito.

2.3 Cronologia notifiche push

La cronologia completa delle notifiche push delle notifiche push inviate con successo verrà visualizzata qui. L’amministratore del negozio può tenere traccia delle notifiche push inviate in precedenza da qui.

A) Invia notifica:

Personalizza e invia notifiche push manualmente agli utenti di OpenCart Progressive Web App (PWA) secondo le necessità. L’amministratore del negozio può configurare queste notifiche da solo e inviarle agli utenti di OpenCart Progressive Web App (PWA).

Layout della pagina iniziale 2.4:

Progetta e salva più progetti di layout (vendita, festival, ecc.) E scegli quello giusto dal pannello di amministrazione per aggiornare su OpenCart Progressive Web App.

La OpenCart Progressive Web App (PWA) offre una schermata iniziale personalizzabile il cui layout può essere progettato dal pannello di amministrazione con pochi clic del mouse e trascinamento. Il layout attraente come per festival, saldi, occasioni, ecc. Può sicuramente aiutare a migliorare le vendite attraverso le app mobili PWA OpenCart.

Aggiungi un nuovo layout da questa scheda o modifica quelli aggiunti in precedenza. Le impostazioni di configurazione della home page offrono i seguenti elementi:

Categorie principali:

Banner quadrato:

Banner scorrevole orizzontale:

Banner griglia:

Banner timer conto alla rovescia:

Prodotti quadrati:

Prodotti scorrevoli:

Prodotti Grid:

Come ottenere i dettagli dell’app Facebook?

L’app di Facebook può essere creata seguendo i seguenti passaggi: –

Passo 1:Vai all’URL fornito : https://developers.facebook.com/apps/

Passo 2:Fare clic sul pulsante “Aggiungi una nuova app”.

Passaggio 3 e 4:Immettere il nome dell’app e l’ID e-mail, quindi fare clic sul pulsante “Crea ID app”.

Passaggio 5 e 6: Dopo aver fatto clic su Crea ID app, sarà necessario eseguire un controllo di sicurezza come mostrato:

Passo 7:Fare clic sulla scheda “Impostazioni”.

Passaggio 8-13:Due opzioni saranno disponibili nel menu a discesa , Base e Avanzate, fare clic su “Base”. Quindi inserisci il tuo “Dominio app”, “Email di contatto”, “URL della privacy”, “Termini e condizioni URL”, “Aggiungi logo”, “Seleziona categoria” e fai clic sul pulsante “Salva modifiche”. Domini app: tuodominio.com è corretto tuodominio.com/store non corretto www.dominio.com non è corretto

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


Passaggio 15: E seleziona Sito Web come piattaforma.

Passo 16:Ora inserisci l’URL del tuo sito.


Passaggio 17 e 18:Fai clic su “Prodotti +” e seleziona Accesso a Facebook.


Passo 19:Seleziona web come piattaforma per l’app.

Passo 20: Ora fai clic su Salva.


Passaggio 21 e 22: Fare clic su Impostazioni e aggiungere un URI di reindirizzamento OAuth valido. URI di reindirizzamento OAuth validi: https://example.com/pwa-app/login

Passaggio 23 e 24:Fare clic su “Revisione app”. Seleziona “Rendi” pubblico “il nome della tua app su Sì.


Passo finale:Copiare l’ID app e il segreto dell’app e incollarli nei campi forniti nel modulo.

Come ottenere i dettagli dell’app Google?

Tipo di applicazione: Applicazione web.
Origini JavaScript autorizzate: Il nome di dominio del tuo negozio (https://www.yourstore.com).
URI di reindirizzamento autorizzato o URI della pagina di reindirizzamento di Loginizer:
https://example.com/pwa-app/login

2.7 Pagine informative:

Aggiungi pagine CMS sull’app e offri contenuti informativi agli utenti di OpenCart PWA Mobile App.

3.0 Schermate dell’app PWA front-end:

3.1 Home Screen:

La schermata iniziale della OpenCart Progressive Web App (PWA) è completamente personalizzabile con un editor fai-da-te come spiegato sopra nelle schermate del pannello di amministrazione. Cambia l’aspetto della schermata iniziale dell’app in qualsiasi momento e offri un aspetto più intuitivo e orientato alla vendita.

1. Layout personalizzato:

Utilizzando vari banner, slider, elementi del prodotto, l’amministratore del negozio può creare un layout dinamico secondo le necessità.

2. Logo del marchio:

Usa il logo del tuo negozio nell’intestazione superiore della OpenCart Progressive Web App (PWA).

3. Borsa del carrello:

L’icona del carrello nell’angolo in alto a destra della schermata iniziale consente agli utenti di accedere alla schermata del carrello e controllare i prodotti aggiunti.

4. Menu di navigazione a sinistra:

Sfoglia le categorie visualizzate nell’app PWA con la navigazione nel menu di navigazione a sinistra.

3.2 Menu per fisarmonica (barra di navigazione)

Le app mobili OpenCart PWA vengono fornite con una categorizzazione perfetta e corretta. Gli utenti possono trovare le categorie pertinenti dal menu di navigazione a sinistra e sfogliare i prodotti. Diverse pagine CMS possono anche essere aggiunte al menu che offrono contenuti pertinenti sull’app.

1. Il mio account:

L’opzione Il mio account contiene tutte le informazioni personali degli utenti, inclusa la spedizione e l’ordine. Gli acquirenti di OpenCart Progressive Web App possono visualizzare e aggiornare le informazioni salvate.

2. categorie:

Le categorie visualizzate nel menu di navigazione a sinistra della OpenCart Progressive Web App sono le stesse disponibili nel negozio eCommerce.

3. Pagine CMS:

Da qui è possibile accedere a varie pagine CMS come Chi siamo, Contattaci, Termini e condizioni, ecc. Queste pagine di informazioni possono essere aggiunte dal pannello di amministrazione dell’estensione.

4. Lingua (e):

L’opzione della lingua consente agli utenti dell’app PWA di visualizzare l’app Web nella lingua desiderata.

5. Valuta / e:

Tutte le valute disponibili sul tuo sito web sono visualizzate qui sull’app OpenCart Progressive Web App (PWA).

6. Accesso / Logout:

Gli utenti possono facilmente accedere / disconnettersi dall’app OpenCart PWA tramite questa opzione.

Schermata delle categorie 3.3:

Schermate di categoria prive di ingombri con l’elenco e la visualizzazione a griglia consentono agli utenti di scegliere ciò che è meglio per loro da una categoria specifica. L’intero inventario del negozio rimarrà sincronizzato con l’app mobile OpenC Progressive Web App (PWA) e le nuove aggiunte e modifiche verranno persino aggiornate in tempo reale.

1. Visualizzazione elenco e griglia:

Le categorie sull’app PWA per OpenCart possono essere sfogliate sia nella visualizzazione elenco che nella visualizzazione griglia.

2. Ordinamento del prodotto:

L’opzione di smistamento consente agli acquirenti online di restringere i prodotti nell’ordinamento desiderato e di trovare quello giusto.

3. Filtro prodotto:

L’app mobile OpenCart PWA offre la possibilità di filtrare i prodotti semplificando la ricerca dei prodotti. Gli acquirenti online possono trovare i prodotti desiderati nelle categorie utilizzando filtri per vari attributi come taglia, colore, prezzo, ecc.

Schermata del prodotto 3.4:

La schermata del prodotto della OpenCart Progressive Web App è il più semplice e intrigante possibile. Con tutte le opzioni e le informazioni necessarie sul prodotto, diventa questione di pochi minuti per gli utenti essere sicuri del prodotto che sta per acquistare. Sono disponibili più immagini per il prodotto con le opzioni In stock e Out of stock.

1. Informazioni e cura del prodotto:

Le informazioni complete sul prodotto disponibili nell’inventario verranno visualizzate qui.

2. Breve descrizione:

Gli utenti possono leggere la breve descrizione del tuo prodotto per prendere rapidamente una decisione sull’acquisto.

3. Opzioni del prodotto:

Tutte le opzioni relative al prodotto come dimensioni, colore, ecc. Sono visualizzate qui.

4. Aggiungi al carrello:

Questo pulsante consente agli utenti di aggiungere prodotti al carrello. Gli utenti possono elaborare ulteriormente il carrello per l’acquisto.

5. Condivisione social prodotto:

L’opzione di condivisione per il prodotto consente agli utenti di condividere i prodotti su più canali social.

Schermata di accesso 3.5

L’app mobile OpenCart PWA offre opzioni di accesso social con un tocco e rende il processo di accesso / registrazione più semplice. La OpenCart Progressive Web App offre l’accesso a Google e Facebook.

1. Accesso:

Gli utenti dell’app possono autenticarsi e accedere facilmente alle app PWA utilizzando le loro precedenti credenziali di accesso e-mail.

2. Registrati:

Tutti i nuovi utenti dell’app possono registrarsi e creare il proprio account sullo store dall’app OpenCart PWA. Il modulo di registrazione richiede solo i dettagli necessari per creare un account.

3. Accedi con Facebook:

Gli utenti possono accedere all’app PWA utilizzando le credenziali dell’account Facebook.

4. Accedi con Google:

Gli utenti possono accedere all’app PWA utilizzando le credenziali dell’account Google.

Schermata del carrello acquisti 3.6:

La schermata del carrello della OpenCart PWA Mobile App mostrerà tutti i prodotti aggiunti al carrello. Gli utenti dell’app possono visualizzare il nome del prodotto, la quantità, il prezzo totale e il costo di spedizione. Questa schermata ha le seguenti opzioni:

1. Applica il voucher:

Questa opzione consente agli utenti di utilizzare coupon del sito Web e ottenere offerte di sconto.

2. Prezzo totale del prodotto:

Gli utenti possono visualizzare il costo completo della loro borsa della spesa prima di procedere oltre. Viene automaticamente aggiornato in base a qualsiasi aggiornamento con quantità di prodotto o nuova aggiunta.

3. Aggiorna quantità prodotto:

Gli utenti dell’app PWA possono persino aggiornare la quantità del prodotto con l’opzione “Aggiorna quantità”.

4. Rimuovi prodotto:

Gli utenti dell’app possono semplicemente rimuovere il prodotto dal carrello semplicemente toccando l’opzione “Rimuovi”.

5. Continua a fare acquisti:

Gli utenti dell’app possono lasciare il carrello per sfogliare più prodotti sulla tua app.

6. Continua alla cassa:

Gli utenti dell’app PWA possono procedere ulteriormente alle schermate di pagamento e pagamento semplicemente toccando l’opzione “Continua per il pagamento”.

3.7 Checkout Screen

La Progressive Web App per OpenCart ha un checkout a schermo singolo semplificato con solo le informazioni rilevanti. Gli utenti dell’app possono visualizzare i dettagli completi del checkout come i dettagli di spedizione, i dettagli di fatturazione, il riepilogo dell’ordine, il commento sull’ordine, il riepilogo del pagamento.

1. Dettagli di fatturazione e spedizione:

Questa schermata fornisce i dettagli degli indirizzi di spedizione e fatturazione salvati dall’utente. L’utente può anche modificare / salvare il nuovo indirizzo di spedizione, se necessario.

2. Riepilogo dell’ordine:

Gli utenti dell’app possono visualizzare i dettagli del prodotto prima di effettuare il pagamento.

3. Metodi di spedizione: tutti i metodi di spedizione disponibili sono visualizzati qui. Gli utenti possono scegliere quello più adatto alle loro esigenze.

4. Commento ordine:

Gli utenti possono anche aggiungere qualsiasi commento relativo al loro ordine che sarà visibile per archiviare l’amministratore sulla pagina web dell’ordine nel backend.

6. Riepilogo del pagamento:

In questa sezione vengono visualizzati i dettagli completi del pagamento ripartito coinvolti con l’acquisto.

7. Procedi al pagamento:

Gli utenti dell’app PWA verranno reindirizzati alla schermata Pagamento dopo aver toccato il pulsante “Procedi al pagamento”.

Schermata di pagamento 3.8:

La schermata di pagamento dell’app OpenCart PWA ha tutti i pagamenti con visualizzazione web disponibili nello store. Gli acquirenti online possono trovare esperienze di pagamento simili su siti Web e app.

3.9 My Account Screen

La schermata del mio account dell’app OpenCart PWA Mobile consente agli acquirenti online di visualizzare i dettagli completi salvati sull’app Web progressiva. Questa schermata mostra anche un elenco degli ordini di app precedenti.

1. Dettagli personali:

Gli utenti possono visualizzare e aggiornare i propri dettagli personali pre-salvati sull’app mobile PWA.

2. Indirizzo / i di spedizione:

Gli utenti dell’app possono vedere l’elenco completo degli indirizzi di spedizione pre-salvati nell’app PWA.

3. Dettagli dell’ordine:

Gli utenti dell’app possono visualizzare l’elenco completo degli ordini precedentemente effettuati dall’app PWA e i loro dettagli.

4. Riordina la funzione:

C’è un pulsante di riordino diretto nella schermata Il mio account della OpenCart Progressive Web App (PWA). Tutti i prodotti precedenti in questo ordine verranno aggiunti al carrello con un solo pulsante.

3.91 Schermata Dettagli ordine

La schermata dei dettagli dell’ordine della OpenCart Progressive Web App fornisce dettagli completi di ordini specifici dall’app PWA. Gli utenti possono facilmente visualizzare l’indirizzo di spedizione, il riepilogo del prodotto, il metodo di spedizione e pagamento e il riepilogo dei costi totali, ecc. Offre anche la possibilità di tenere traccia dello stato dell’ordine e della consegna.