Magento 2 PWA Mobile App – User Manual


1.0 Introduzione

Essendo nel settore dell'e-commerce al dettaglio, devi aver incontrato la parola PWA (Progressive Web App). In caso affermativo, devi anche essere consapevole della capacità che hanno come un'applicazione di acquisto. In caso contrario, sei atterrato nel posto giusto. Con la crescita costante dell'utilizzo delle app per lo shopping (sia native che PWA), i negozi online stanno passando allo sviluppo di app mobili PWA per le loro attività. Al giorno d'oggi il lancio di un'app Web progressiva è un'attività piuttosto semplice e conveniente. KnowBand ha lanciato Magento 2 PWA Mobile App, uno strumento completo senza codice e automatizzato per lanciare un'app Web progressiva. In parole semplici, ogni volta che un utente apre l'URL del tuo negozio sul browser mobile, riceverà un messaggio di richiesta "Aggiungi alla schermata iniziale". L'app Web progressiva Magento 2 verrà aggiunta nel dispositivo dell'utente come qualsiasi altra app e gli acquisti online potranno essere effettuati in movimento.

1.1 Visualizza l'app demo:

Esplora la demo di Progressive Web App per Magento 2 e dai un'occhiata a come appariranno e funzioneranno le tue app finali:

URL del negozio demo:https://ma2demo.knowband.com/pwa/manager/
URL app PWA:https://ma2demo.knowband.com/pwa/pwa-app/

2.0 Schermate del pannello di amministrazione:

Con l'amichevole backend del pannello di amministrazione, l'amministratore del negozio può configurare e personalizzare l'aspetto, la sensazione e il funzionamento dell'applicazione mobile PWA. È solo questione di pochi clic e il mouse si attiva o disattiva per apportare modifiche alle App Web Progressive Magento 2. Diamo una panoramica dettagliata delle schermate del pannello di amministrazione:

Impostazioni generali 2.1:

Generali-settings

a) Abilita l'estensione:?Enable?Magento 2?PWA module to make web app work on the users’ smartphones.

b) Reindirizza sulla pagina carrello quando aggiungi al carrello:?Enable to re-direct users to shopping cart or disable to keep them on the product screen.

c) Descrizione breve dell'esposizione:?Enable to add & display a short description on the product screen of Progressive Web App.

d) Abilita segnalazione registro richieste: Abilitare questa scheda per attivare il file di registro sull'app mobile PWA. Questo file di registro può essere utilizzato per correggere qualsiasi comportamento anomalo di Progressive Web Application.

e) Mostra anteprima app: Abilita per aggiungere un'anteprima del telefono nel pannello di amministrazione. Tutti i cambiamenti di colore, carattere e schermata iniziale verranno visualizzati in anteprima in tempo reale sul telefono.

f) Abilita barra delle schede: Aggiungi una barra delle schede in basso sull'app mobile Magento 2 PWA.

g) Seleziona il layout per la Home Page:?Choose desired layouts from the added ones and improve look and feel of app.

Impostazioni-generali-2

h) Immagine per l'icona dell'app:?Upload Magento 2 PWA app icon on your own and change the same as well if required.

i) Nome per l'app PWA:?Enter the name of the Magento 2 Progressive Web App.

j) Seleziona il carattere per l'app PWA:?Choose the font of your PWA app for Magento 2.

k) Colore pulsante dell'app: Scegli il colore dei pulsanti per la tua app mobile PWA.

l) Colore testo pulsante app: Scegli il colore del testo del pulsante per il tuo Magento 2

m) Colore del tema dell'app: Scegli il colore del tema (intestazione) della tua applicazione web.

n) AppScegli il colore di sfondo dell'applicazione Web progressiva.

o) Colore sfondo schermata iniziale: Scegli l'opzione di colore giusta per lo sfondo della schermata iniziale dell'app PWA.

Impostazioni-generali-3

p) Metodi di spedizione disabilitati: Scegli i metodi di spedizione a cui limitare il funzionamento nell'app mobile Magento 2 PWA.

q) Abilita e carica logo: Aggiungi l'immagine del logo del tuo negozio da visualizzare nell'intestazione dell'app PWA Mobile.

2.2 Impostazioni delle notifiche push:

L'app Web progressiva Magento 2 offre notifiche push illimitate sul mercato e promuove offerte e prodotti in negozio. L'amministratore del negozio riceverà notifiche push per tutta la vita senza costi aggiuntivi.

le notifiche push

I vari campi sotto questa scheda di impostazione richiedono la configurazione di un account Firebase. Ecco come puoi impostarne uno:

Come impostare un account Firebase?

Passo 1: Accedi a Google Firebase

Firebase

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

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

continuare a progetto

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

progetto-settings

Passo 4: Vai alle opzioni di autenticazione:

autenticazione-options
Passo 5: Trova chiavi Firebase Nelle impostazioni del progetto, fai clic su Impostazioni di messaggistica cloud. Da qui, è possibile ottenere direttamente la chiave del server.

Firebase-chiave
Passo 6: Aggiungi la tua app Web a Firebase

web-app-to-Firebase

web-app-to-Firebase

Passo 7: Ottieni altri dettagli relativi a Firebase e incollali nello stesso pannello di amministrazione del modulo PWA.

Firebase-details

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

Firebase-chiave

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

Firebase-server-chiave

Firebase-server-chiave

2.21 Notifiche push automatiche:

L'amministratore del negozio può pianificare l'invio automatico di notifiche per i seguenti casi:

push-notifiche-2

a) Impostazioni del nuovo ordine:?Whenever any new order is placed from the Magento 2 PWA Mobile App.

b) Impostazioni di modifica dello stato dell'ordine: Ogni volta che lo stato di consegna di un ordine viene modificato / aggiornato.

c) Impostazioni del carrello abbandonato: Ogni volta che un utente lascia il prodotto nel carrello e abbandona la Progressive Web App.

2.22 Notifica push manuale:

send-notifica

Come mostrato nell'istantanea sopra, l'amministratore del negozio può personalizzare e inviare notifiche push manuali agli utenti dell'app PWA Mobile. Il messaggio, l'immagine, lo sconto offerto, il link di reindirizzamento possono essere aggiunti / modificati per migliorare l'efficienza della notifica e aumentare le vendite.

Layout della pagina iniziale 2.3:

Magento 2 PWA Mobile App Builder offre un pannello di editor fai-da-te completamente personalizzabile per personalizzare e configurare l'aspetto dell'applicazione Web progressiva. Vari nuovi layout possono essere aggiunti al pannello di amministrazione in base ai prossimi festival e occasioni.

home-page-layout di

home-screen-layout-3

2.31 Categorie principali:

I piú categorie

2.32 Banner quadrato:

piazza-banner

2.33 Banner scorrevole:

scorrevoli-banner

2.34 Banner griglia:

grid-banner

2.35 Banner del timer per il conto alla rovescia

conto alla rovescia-timer-banner

2.36 Prodotti quadrati:

quadrati prodotti

2.37 Prodotti scorrevoli:

sottoprodotti scorrevole

2.38 Prodotti a griglia:

grid-products

Come ottenere i dettagli dell'app Facebook?

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

Passo 1:?Go to given?URL: https://developers.facebook.com/apps/

Passo 2:?Click on the “Add a New App” button.

add-new-app

Passaggio 3 e 4:?Enter your App name and email id, then click on “Create App ID” button.

create-app-id

Passaggio 5 e 6:?After clicking on Create App ID you will have to?go through a security check as shown:

create-app-id

Passo 7:?Click on “Setting” tab.

fb-app-impostazione

Passaggio 8-13:?Two option will be available in the?dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”,?”Contact Email”, “Privacy?URL”, “Terms and Conditions?URL”, “Add Logo”, “Select Category” and click on “Save Changes” button.
App Domains:
yourdomain.com is?correct
yourdomain.com/store is?incorrect
www.domain.com is?incorrect

fb-app-id

Passo 14:?Now click on “+Add Platform”.

add-piattaforma
Passo 15:
E seleziona Sito Web come piattaforma.

scegliere-platform

Passo 16:?Now Enter your site URL.

enter-sito-url
Passaggio 17 e 18:?Click on “Products+” and select Facebook login.

accesso a Facebook
Passo 19:?Select web as the platform for the app.

scegliere-platform

Passo 20:?Now click on save.

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

reindirizzamento-URL

Passaggio 23 e 24:?Click on “App review”. And?mark “Make ‘your app name’ Public” to Yes.

app-recensione
Passo finale:?Copy the App ID and App Secret and paste it into the fields provided in the module.

passo finale

Come ottenere i dettagli dell'app Google?

  • Vai alla Google Developers Console (https://console.developers.google.com/project) o fai clic sul link in alto a destra nella rispettiva scheda nella pagina di configurazione del modulo.
  • Ora fai clic su
  • Inserisci un nome per il tuo progetto e procedi con il passaggio successivo.
  • Ora fai clic su API e autorizzazioni-> Credenziali dal menu a sinistra, come mostrato di seguito.

google-app-id

  • Fai clic sul pulsante Crea nuovo ID cliente dal pannello di destra dello schermo.
  • Potrebbe essere necessario compilare il modulo per la schermata di consenso prima di procedere. Per fare ciò, è necessario fare clic sulla schermata di consenso nel menu a sinistra, come mostrato nell'immagine sopra.
  • Compila il modulo pop-up con i seguenti dettagli:

Tipo di applicazione:?Web Application.
Origini JavaScript autorizzate:?Your store domain name (http://www.yourstore.com).
URI di reindirizzamento autorizzato o URI della pagina di reindirizzamento di Loginizer:
https://example.com/pwa-app/login

google-app-id

  • Ora fai clic sul pulsante Crea ID cliente per ottenere l'ID cliente e la chiave segreta del cliente.
  • Ora puoi utilizzare il segreto cliente e l'ID cliente per consentire ai tuoi clienti di accedere al tuo negozio utilizzando il loro account Google.

3.0 Schermate dell'app PWA front-end:

Dai una rapida occhiata alle schermate perfettamente progettate della Progressive Web App per Magento 2:

3.1 Home Screen:

casa-screen

La schermata iniziale della Progressive Web App Magento 2 è completamente personalizzabile dal pannello di amministrazione del modulo. Puoi progettare il layout delle schermate dell'app nel modo desiderato. I layout personalizzati possono essere progettati nel pannello di amministrazione in base a eventi, festival, occasioni, ecc. E utilizzati ogni volta che è necessario.

1. Layout dinamico:

Utilizzando vari elementi di progettazione (banner, cursori, categorie, ecc.), L'amministratore del negozio può creare layout dinamico secondo le necessità.

2. Logo del negozio:
Aggiungi il logo del negozio sull'intestazione dell'app PWA.

3. Carrello:
L'icona del carrello nell'angolo in alto a destra della schermata principale consente agli utenti di attivare la schermata del carrello.

4. Menu di navigazione:
Sfoglia le categorie nelle app con il menu di navigazione a sinistra nella schermata principale.

3.2 Menu di navigazione a sinistra:

Le app mobili Magento 2 PWA offrono una categorizzazione dei prodotti senza interruzioni. Le categorie sull'app PWA Mobile saranno le stesse disponibili sul sito web. Gli acquirenti online possono sfogliare facilmente i prodotti di più categorie senza problemi. È inoltre possibile aggiungere varie pagine CMS al menu di navigazione a sinistra utilizzando il pannello di amministrazione.

barra-di-navigazione-473x1024

1. Il mio account:
L'opzione Account personale contiene tutte le informazioni personali dell'utente, sulla spedizione e sull'ordine. Gli acquirenti di app PWA possono visualizzare tutti i dati memorizzati ad essi correlati e possono aggiornare anche gli stessi.

2. categorie
Le categorie visualizzate nel menu di navigazione a sinistra dell'app PWA sono le stesse del tuo sito Web.

3. Pagine CMS:
Varie pagine CMS come Chi siamo, Contattaci, Termini e condizioni, ecc. È possibile accedere da qui.

4. Le lingue)
L'opzione lingua consente agli utenti dell'app PWA di visualizzare l'app Web nella lingua desiderata. Tutte le lingue disponibili sono visualizzate solo con questa opzione.

5. Valuta (s)
Tutte le valute disponibili sul tuo sito web sono visualizzate qui su

6. Login / Logout
Gli utenti possono facilmente accedere / disconnettersi da

Schermata delle categorie 3.3:

categoria-screen

1. Visualizzazioni multiple:
Le categorie sull'app PWA per

2. Ordinamento:
Questa opzione consente agli acquirenti online di scegliere l'ordinamento per restringere la ricerca e ottenere facilmente il prodotto desiderato.

3. Filtro:
L'opzione per filtrare i prodotti semplifica la ricerca dei prodotti. Gli utenti possono filtrare tutti i prodotti in categorie usando vari attributi come dimensioni, colore, prezzo ecc.

Schermata del prodotto 3.4:

La schermata del prodotto dell'App Web Progressiva Magento 2 contiene tutte le informazioni sul prodotto necessarie come quelle del tuo negozio. Da più immagini di prodotto a descrizioni brevi e lunghe aiuta a prendere la decisione dell'utente per l'acquisto. La disponibilità del prodotto viene segnalata come "Disponibile" o "Non disponibile" in base allo stato dell'inventario.

schermo-prodotto-473x1024

1. Informazioni sul prodotto e assistenza
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.

5. Aggiungi al carrello:
Questo pulsante consente agli utenti di aggiungere prodotti al carrello. Gli utenti possono elaborare ulteriormente il carrello per l'acquisto.

6. 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

schermata-di-accesso-473x1024

L'app Web progressiva Magento 2 offre opzioni di accesso rapide con un tocco e rende il processo di accesso / registrazione più semplice: – Accesso tramite posta elettronica – Accesso a Google – Accesso a 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. Iscriviti
Tutti i nuovi utenti dell'app possono registrarsi e creare il proprio account nello store dal

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 shopping bag delle app Magento 2 PWA mostrerà tutti i prodotti aggiunti insieme alla loro quantità e al prezzo da pagare. Gli utenti dell'app possono anche visualizzare i dettagli del prodotto per essere sicuri prima di acquistarne uno.

schermo-carrello-473x1024

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 al pagamento".

3.7 Schermata di pagamento:

Le app PWA Mobile per Magento 2 vengono fornite con un unico schermo di pagamento senza ingombri con solo i campi pertinenti e necessari richiesti. Gli utenti dell'app ottengono una panoramica completa dell'ordine prima di effettuare effettivamente il pagamento come dettagli di spedizione, dettagli di fatturazione, riepilogo dell'ordine, commento dell'ordine, pagamento

schermata-pagamento-473x1024

1. Dettagli di spedizione e fatturazione
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 che soddisfa le loro esigenze.

4. Commenta l'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 pagamenti
In questa sezione vengono visualizzati i dettagli completi del pagamento ripartito coinvolti con l'acquisto.

7. Procedere 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:

L'app Magento 2 PWA porta tutti i pagamenti con visualizzazione web (sito web) sull'app. Gli utenti dell'app troveranno qui le stesse opzioni di pagamento disponibili nelle applicazioni. La schermata di pagamento della Progressive Web App Magento 2 è completamente ottimizzata per la visualizzazione dell'app.

schermata-pagamento-473x1024

3.9 Schermata Account personale:

schermo-mio-account-473x1024

La schermata del mio account dell'app Magento 2 PWA offre tutti i dettagli degli utenti disponibili sull'app Web progressiva. Gli acquirenti online possono visualizzare i dettagli personali, l'indirizzo di spedizione, i dettagli dell'ordine, ecc.

1. Dettagli personali
Gli utenti possono anche visualizzare e aggiornare i dettagli del profilo pre-salvati.

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 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 dell'app PWA. Tutti i prodotti precedenti in questo ordine verranno aggiunti al carrello con un solo pulsante.

3.10 Schermata Dettagli ordine

L'app Web progressiva Magento 2 mostra i dettagli completi dell'ordine degli ordini di app precedenti. Questa schermata contiene i dettagli dell'ordine, la cronologia dello stato, gli indirizzi di spedizione e fatturazione, ecc. Per ogni ordine effettuato tramite l'app Magento 2 PWA. Gli utenti dell'app possono visualizzare rapidamente l'intero riepilogo dell'ordine e monitorare anche lo stato della consegna.

schermo-mio-account-473x1024

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify . We also provide custom module development and customization services for the website and modules..

Leave a Reply

Your email address will not be published. Required fields are marked *