1.0 Introduzione
Questo plug-in pronto è progettato e sviluppato da KnowBand per convertire il tuo negozio WooCommerce in esecuzione in un’applicazione Web progressiva ricca di funzionalità. Una volta che il negozio eCommerce è stato trasformato in un’applicazione PWA, ogni volta che un utente apre l’URL del negozio nel browser mobile, all’interessato verrà chiesto di “Aggiungi PWA alla schermata iniziale”. Una volta aggiunta l’app WooCommerce PWA Mobile alla schermata iniziale del dispositivo mobile, l’utente può navigare nel negozio sull’app come qualsiasi altra applicazione. L’app WooCommerce PWA Mobile è un’applicazione web che in realtà non si basa sulla pubblicazione di app su Google Play e Apple App Store. Gli utenti possono semplicemente aggiungere la Progressive Web App al dispositivo mobile e utilizzarla come qualsiasi altra applicazione.
1.1 Funzionalità interessanti per scegliere WooCommerce PWA:
– Caricamento più rapido e prestazioni rapide – Schermata iniziale completamente personalizzabile con l’editor fai-da-te – Supporto di tutti i metodi di pagamento e spedizione del sito Web – Interfaccia intuitiva e coinvolgente – Nessuna dipendenza dagli App Store – Completamente brandizzato per il tuo negozio – Accesso tramite e-mail e social (Google e Facebook ) – Supporto multilingue e RTL – Modalità offline funzionante – Sincronizzazione live b/n sito Web e app – Compatibile sia con Android che iOS – Verifica in una pagina – Applicazione leggera – Gestione delle pagine CMS
1.2 Visualizza la demo PWA di WooCommerce
Esplora le funzionalità del modulo e dell’app PWA dai link demo seguenti:
Pannello di amministrazione del modulo: https://wcdemo1.knowband.com/pwa/wp-login.php
App demo PWA:ï ¿½https://wcdemo1.knowband.com/pwa/pwa-app/
Nota-�Copia e incolla l’URL nel browser mobile e “Aggiungi alla schermata iniziale”.
[IMP] Note per iOS:
�> I dispositivi iOS non offrono alcun prompt integrato “Aggiungi alla schermata iniziale”, quindi gli utenti devono aggiungere manualmente l’app PWA Mobile alla schermata iniziale di iPhone o iPad. �> iOS non supporta le notifiche push web. Quindi le notifiche push non verranno ricevute sulla PWA installata su iPhone o iPad.
[NUOVO AGGIORNAMENTO]�WooCommerce�PWA supporta gli script in linguaggio RTL:
Il creatore dell’app Web progressiva WooCommerce ora supporta tutte le lingue del mondo, comprese quelle RTL (da destra a sinistra) come arabo, ebraico, persiano, ecc. L’amministratore del negozio ora può persino aggiungere lingue RTL sull’app WooCommerce PWA Mobile.
2.0 Schermate del pannello di amministrazione:
Esplora tutte le impostazioni nel Pannello di amministrazione dell’app WooCommerce PWA Mobile e controlla come funzionano con l’aiuto sotto gli screenshot dettagliati:
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) Abilita/Disabilita: Abilita il modulo al funzionamento PWA sui dispositivi mobili.
c) Abilita report registro richieste: Abilita registro errori su dispositivo mobile.
d) Reindirizzamento alla pagina del carrello quando Aggiungi al carrello: Controlla il reindirizzamento del pulsante Aggiungi al carrello ogni volta che un utente tocca il pulsante Aggiungi al carrello.
e) Visualizzazione breve descrizione: Abilita e visualizza una breve descrizione per il prodotto (se aggiunta nella pagina del prodotto del sito Web).
f) Visualizza Aggiungi alla schermata iniziale: Offri il messaggio pop-up “Aggiungi alla schermata iniziale” e consenti agli utenti di aggiungere l’app PWA sui dispositivi mobili.
g) Abilita logo: Aggiungi il logo del tuo marchio nell’intestazione dell’app WooCommerce PWA Mobile.
h) Colore di sfondo della schermata iniziale: Scegli e imposta il colore per la schermata iniziale della WooCommerce Progressive Web App.
i) Nome per l’app PWA: Inserisci il nome desiderato per l’app WooCommerce PWA. Verrà visualizzato una volta che l’utente aggiungerà l’app sui dispositivi mobili.
j) Immagine per l’icona dell’app: Aggiungi l’immagine dell’icona dell’app nel pannello di amministrazione.
k) Seleziona il carattere dell’app: Scegli il carattere per la tua app WooCommerce PWA Mobile.
l) Selezionare il layout per la home page: Scegli dal layout della schermata iniziale pre-aggiunto per l’app WooCommerce PWA.
m) Colore pulsante app: Scegli il colore del pulsante per l’app PWA per dispositivi mobili.
n) Colore del tema dell’app: Scegli il colore del tema per l’app PWA.
o) Colore di sfondo dell’app: Scegli il colore di sfondo per l’app PWA.
p) Abilita barra delle schede: Abilita la barra delle schede nella parte inferiore dell’app PWA per una navigazione rapida e semplice.
q) CSS personalizzato: Inserisci il codice CSS per migliorare l’aspetto delle pagine web-view dell’app PWA come il pagamento web-view, le pagine CMS, ecc.
Impostazioni notifiche push 2.2
Le notifiche push sono il miglior strumento di marketing per l’app PWA per WooCommerce. 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 successo dall’app WooCommerce 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 WooCommerce 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 manualmente la notifica push agli utenti dell’app PWA secondo necessità. L’amministratore del negozio può configurare queste notifiche da solo e inviarle agli utenti dell’app WooCommerce PWA.
Layout della pagina iniziale 2.4:
L’app WooCommerce PWA Mobile offre una schermata iniziale personalizzabile il cui layout può essere progettato dal pannello di amministrazione con pochi clic del mouse e trascinando la selezione. Il layout attraente come per festival in esecuzione, saldi, occasioni ecc. Può sicuramente aiutare a migliorare le vendite tramite le app mobili WooCommerce PWA.
Aggiungi un nuovo layout da questa scheda o modifica quelli aggiunti in precedenza. Le impostazioni di configurazione della home page offrono i seguenti elementi:
a) Categorie principali:�
b) Banner quadrato:�
c) Banner a scorrimento orizzontale:�
d) Banner a griglia:�
e) Banner del timer per il conto alla rovescia:�
f) Prodotti quadrati:�
g) Prodotti scorrevoli:�
h) Prodotti Griglia:�
2.5 Pagine informative:
Aggiungi pagine CMS sull’app e offri contenuti informativi agli utenti di WooCommerce PWA Mobile App.
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.
Schermi PWA front-end 3.0:
3.1 Home Screen:
La schermata iniziale dell’app WooCommerce PWA Mobile è completamente personalizzabile con l’editor fai-da-te come spiegato sopra nelle schermate del Pannello di amministrazione. Modifica 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 dell’app WooCommerce 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 della fisarmonica (barra di navigazione):
Le app mobili WooCommerce PWA sono disponibili con una categorizzazione perfetta e corretta. Gli utenti possono trovare le categorie rilevanti dal menu di navigazione a sinistra e sfogliare i prodotti. Diverse pagine CMS possono anche essere aggiunte nel menu che offre contenuti rilevanti 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 WooCommerce Progressive Web App possono visualizzare e aggiornare le informazioni salvate.
2. categorie
Le categorie visualizzate nel menu di navigazione a sinistra dell’app WooCommerce Progressive Web 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. Le lingue)
L’opzione della lingua consente agli utenti dell’app PWA di visualizzare l’app Web nella lingua desiderata.
5. Valuta (s)
Tutte le valute disponibili sul tuo sito web vengono visualizzate qui sull’app WooCommerce PWA.
6. Login / Logout
Gli utenti possono accedere/disconnettersi facilmente dall’app WooCommerce PWA tramite questa opzione.
Schermata delle categorie 3.3:
Le schermate delle categorie prive di ingombri con la visualizzazione elenco e 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 WooCommerce PWA Mobile e le nuove aggiunte e modifiche verranno persino aggiornate in tempo reale.
1. Visualizzazione elenco e griglia:
Le categorie sull’app PWA per WooCommerce possono essere sfogliate sia in visualizzazione elenco che 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 WooCommerce PWA Mobile offre la possibilità di filtrare i prodotti semplificando la ricerca dei prodotti. Gli acquirenti online possono trovare i prodotti desiderati sotto le categorie utilizzando filtri per vari attributi come taglia, colore, prezzo, ecc.
Schermata del prodotto 3.4:
La schermata del prodotto della WooCommerce Progressive Web App è quanto di più semplice e intrigante potrebbe avere. Con tutte le opzioni e le informazioni necessarie sul prodotto, gli utenti possono essere sicuri del prodotto in pochi minuti
�che sta per acquistare. Le immagini multiple sono disponibili 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.
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 mobile WooCommerce PWA offre opzioni di accesso social con un tocco e rende il processo di accesso/registrazione più fluido. L’app WooCommerce Progressive Web 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 sul negozio dall’app WooCommerce 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 Carrello dell’app WooCommerce PWA Mobile visualizzerà 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
L’app Web progressiva per WooCommerce ha un checkout semplificato in un’unica schermata con solo le informazioni rilevanti. Gli utenti dell’app possono visualizzare i dettagli di checkout completi come i dettagli di spedizione, i dettagli di fatturazione, il riepilogo dell’ordine, il commento dell’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 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.
5. Riepilogo del pagamento:
In questa sezione vengono visualizzati i dettagli completi del pagamento ripartito coinvolti con l’acquisto.
6. 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 WooCommerce PWA ha tutti i pagamenti con visualizzazione Web disponibili nel negozio. Gli acquirenti online possono trovare esperienze di pagamento simili sia sui siti Web che sulle app.
3.9 My Account Screen
La schermata del mio account dell’app mobile WooCommerce PWA consente agli acquirenti online di visualizzare i dettagli completi salvati sull’app Web progressiva. Questa schermata mostra anche un elenco di precedenti ordini di app.
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 dell’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 dell’app WooCommerce Progressive Web fornisce i dettagli completi di ordini specifici dall’app PWA. Gli utenti possono visualizzare facilmente l’indirizzo di spedizione, il riepilogo del prodotto, il metodo di spedizione e di pagamento e il riepilogo dei costi totali, ecc. Offre anche la possibilità di tenere traccia dello stato dell’ordine e della consegna.
