1.0 Introduzione
Essendo nel settore dell’eCommerce al dettaglio, devi esserti imbattuto nella parola PWA (Progressive Web App). Se sì, devi anche essere consapevole della capacità che offrono come 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, l’avvio di un’app Web progressiva è un’attività piuttosto semplice ed economica. KnowBand ha lanciato l’app mobile Magento 2 PWA, uno strumento completamente automatizzato e senza codice per avviare un’app Web progressiva. In parole semplici, ogni volta che un utente apre l’URL del tuo negozio sul browser mobile, riceverà un messaggio richiesto di “Aggiungi alla schermata iniziale”. L’app Web progressiva Magento 2 verrà aggiunta al dispositivo dell’utente come qualsiasi altra app e l’acquisto online può essere effettuato 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 negozio demo:�https://ma2demo.knowband.com/pwa/manager/
URL dell’app PWA:�https://ma2demo.knowband.com/pwa/pwa-app/
[IMP] Note per Magento 2 iOS PWA:
�> I dispositivi iOS non offrono alcun prompt integrato “Aggiungi alla schermata iniziale”. Gli utenti devono aggiungere manualmente l’app mobile Magento 2 PWA alla schermata iniziale di iPhone o iPad. �> iOS non supporta le notifiche push web. Le notifiche push possono essere inviate al dispositivo Android solo dal pannello di amministrazione di�Magento 2 PWA Mobile App Builder.
[NUOVO AGGIORNAMENTO] Magento 2�PWA supporta le lingue RTL:
Il creatore di app mobili PWA di Magento 2 ora supporta tutte le lingue del mondo, incluso RTL (da destra a sinistra). L’app mobile PWA per Magento 2 può avere lingue come arabo, ebraico, persiano, ecc. Il proprietario del negozio può offrire tutte le lingue del sito Web sull’app Web progressiva e persino aggiungerne di nuove.
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:
a) Abilita l’estensione:�Abilita�Magento 2�modulo PWA per far funzionare la web app sugli smartphone degli utenti.
b) Reindirizza sulla pagina carrello quando aggiungi al carrello:�Abilita per reindirizzare gli utenti al carrello o disabilita per mantenerli sullo schermo del prodotto.
c) Descrizione breve dell’esposizione:�Abilita di aggiungere e visualizzare una breve descrizione sullo schermo del prodotto di 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:�Scegli i layout desiderati tra quelli aggiunti e migliora l’aspetto grafico dell’app.
h) Immagine per l’icona dell’app:�Carica l’icona dell’app Magento 2 PWA da solo e cambia anche la stessa se necessario.
i) Nome per l’app PWA:�Inserisci il nome dell’app Web progressiva Magento 2.
j) Seleziona il carattere per l’app PWA:�Scegli il carattere della tua app PWA per 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 la tua app Web progressiva Magento 2.
m) Colore del tema dell’app: Scegli il colore del tema (intestazione) della tua applicazione web.
n) Colore sfondo app:�Scegli 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.
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 il 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.
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
Passo 2: Crea un nuovo progetto Quando fai clic su Aggiungi progetto, apparirà 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, fai 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 incollali nello stesso pannello di amministrazione del modulo PWA.
Passo 8: Ottieni la chiave del server Firebase dalla scheda di messaggistica cloud in Impostazioni:
Passo 9: Aggiungi il tuo dominio nell’autenticazione >> accedi.
2.21 Notifiche push automatiche:
L’amministratore del negozio può pianificare l’invio automatico di notifiche per i seguenti casi:
a) Impostazioni del nuovo ordine:�Ogni volta che viene effettuato un nuovo ordine dall’app mobile Magento 2 PWA.
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:
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.
2.31 Categorie principali:
2.32 Banner quadrato:
2.33 Banner scorrevole:
2.34 Banner griglia:
2.35 Banner del timer per il conto alla rovescia
2.36 Prodotti quadrati:
2.37 Prodotti scorrevoli:
2.38 Prodotti a griglia:
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?
- Vai a Google Developers Console (https://console.developers.google.com/project) o fai clic sul link in alto a destra della rispettiva scheda nella pagina di configurazione del modulo.
- Ora fai clic su Crea progetto a sinistra della pagina.
- Inserisci un nome per il tuo progetto e procedi con il passaggio successivo.
- Ora fai clic su API e autorizzazione-> Credenziali dal menu a sinistra come mostrato di seguito.
- 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: 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
- 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:
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.
1. Il mio account:
L’opzione Account personale contiene tutte le informazioni personali dell’utente, di spedizione e dell’ordine. Gli acquirenti dell’app PWA possono visualizzare tutti i dati memorizzati relativi a loro e possono anche aggiornarli.
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 vengono visualizzate qui sull’app Magento 2 PWA.
6. Login / Logout
Gli utenti possono accedere/disconnettersi facilmente dall’app PWA Magento 2 tramite questa opzione.
Schermata delle categorie 3.3:
1. Visualizzazioni multiple:
Le categorie sull’app PWA per�Magento 2 possono essere visualizzate sia in visualizzazione elenco che griglia.
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.
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.
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
L’app Web progressiva Magento 2 offre opzioni di accesso rapide con un tocco e semplifica il processo di accesso/registrazione: – Accesso e-mail – Accesso Google – Accesso 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 sullo store dall’app Magento 2 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 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.
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 Schermata di pagamento:
Le app PWA Mobile per Magento 2 sono dotate di un checkout senza ingombri su schermo singolo 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 i dettagli di spedizione, i dettagli di fatturazione, il riepilogo dell’ordine, il commento dell’ordine, il riepilogo del pagamento.
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.
3.9 Schermata Account personale:
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 proprio 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 tenere traccia dello stato di consegna.
