{"id":815760,"date":"2020-06-22T04:38:23","date_gmt":"2020-06-22T04:38:23","guid":{"rendered":"https:\/\/www.knowband.com\/blog\/?p=805654\/"},"modified":"2022-08-13T12:01:14","modified_gmt":"2021-02-22T14:48:55","slug":"woocommerce-pwa-mobile-app-user-manual","status":"publish","type":"post","link":"https:\/\/www.knowband.com\/blog\/it\/manuale-utente-it\/woocommerce-pwa-mobile-app-user-manual\/","title":{"rendered":"WooCommerce PWA Mobile App – User Manual"},"content":{"rendered":"

<\/head><\/p>\n

1.0 Introduzione<\/h2>\n

Questo plug-in pronto \u00e8 progettato e sviluppato da KnowBand per convertire il tuo negozio WooCommerce in esecuzione in un’applicazione Web progressiva ricca di funzionalit\u00e0. Una volta che il negozio eCommerce \u00e8 stato trasformato in un’applicazione PWA, ogni volta che un utente apre l’URL del negozio nel browser mobile, all’interessato verr\u00e0 chiesto di “Aggiungi PWA alla schermata iniziale”. Una volta aggiunta l’app WooCommerce PWA Mobile alla schermata iniziale del dispositivo mobile, l’utente pu\u00f2 navigare nel negozio sull’app come qualsiasi altra applicazione. L’app WooCommerce PWA Mobile \u00e8 un’applicazione web che in realt\u00e0 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.<\/p>\n

1.1 Funzionalit\u00e0 interessanti per scegliere WooCommerce PWA:<\/h3>\n

– Caricamento pi\u00f9 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\u00e0 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<\/p>\n

1.2 Visualizza la demo PWA di WooCommerce<\/h3>\n

Esplora le funzionalit\u00e0 del modulo e dell’app PWA dai link demo seguenti:<\/p>\n

Pannello di amministrazione del modulo:<\/strong> https:\/\/wcdemo1.knowband.com\/pwa\/wp-login.php<\/a>
\nApp demo PWA:<\/strong>\u00ef \u00bf\u00bdhttps:\/\/wcdemo1.knowband.com\/pwa\/pwa-app\/<\/a>
\nNota-<\/strong>\ufffdCopia e incolla l’URL nel browser mobile e “Aggiungi alla schermata iniziale”.<\/p>\n

[IMP] Note per iOS:<\/h4>\n

\ufffd> 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. \ufffd> iOS non supporta le notifiche push web. Quindi le notifiche push non verranno ricevute sulla PWA installata su iPhone o iPad.<\/p>\n

[NUOVO AGGIORNAMENTO]\ufffdWooCommerce\ufffdPWA supporta gli script in linguaggio RTL:<\/h4>\n

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\u00f2 persino aggiungere lingue RTL sull’app WooCommerce PWA Mobile.<\/p>\n

2.0 Schermate del pannello di amministrazione:<\/h2>\n

Esplora tutte le impostazioni nel Pannello di amministrazione dell’app WooCommerce PWA Mobile e controlla come funzionano con l’aiuto sotto gli screenshot dettagliati:<\/p>\n

Impostazioni generali 2.1:<\/h3>\n

\"Generali-settings\"<\/p>\n

a) Mostra \/ nascondi anteprima:<\/strong> Tocca il pulsante con l’occhio per visualizzare \/ nascondere l’anteprima del telefono nel pannello di amministrazione.
\nb) Abilita\/Disabilita:<\/strong> Abilita il modulo al funzionamento PWA sui dispositivi mobili.
\nc) Abilita report registro richieste:<\/strong> Abilita registro errori su dispositivo mobile.
\nd) Reindirizzamento alla pagina del carrello quando Aggiungi al carrello:<\/strong> Controlla il reindirizzamento del pulsante Aggiungi al carrello ogni volta che un utente tocca il pulsante Aggiungi al carrello.
\ne) Visualizzazione breve descrizione:<\/strong> Abilita e visualizza una breve descrizione per il prodotto (se aggiunta nella pagina del prodotto del sito Web).
\nf) Visualizza Aggiungi alla schermata iniziale:<\/strong> Offri il messaggio pop-up “Aggiungi alla schermata iniziale” e consenti agli utenti di aggiungere l’app PWA sui dispositivi mobili.
\ng) Abilita logo:<\/strong> Aggiungi il logo del tuo marchio nell’intestazione dell’app WooCommerce PWA Mobile.<\/p>\n

\"generali-settings-2\"<\/p>\n

h) Colore di sfondo della schermata iniziale:<\/strong> Scegli e imposta il colore per la schermata iniziale della WooCommerce Progressive Web App.
\ni) Nome per l’app PWA:<\/strong> Inserisci il nome desiderato per l’app WooCommerce PWA. Verr\u00e0 visualizzato una volta che l’utente aggiunger\u00e0 l’app sui dispositivi mobili.
\nj) Immagine per l’icona dell’app:<\/strong> Aggiungi l’immagine dell’icona dell’app nel pannello di amministrazione.
\nk) Seleziona il carattere dell’app:<\/strong> Scegli il carattere per la tua app WooCommerce PWA Mobile.
\nl) Selezionare il layout per la home page:<\/strong> Scegli dal layout della schermata iniziale pre-aggiunto per l’app WooCommerce PWA.<\/p>\n

\"generali-settings-3\"<\/p>\n

m) Colore pulsante app:<\/strong> Scegli il colore del pulsante per l’app PWA per dispositivi mobili.
\nn) Colore del tema dell’app:<\/strong> Scegli il colore del tema per l’app PWA.
\no) Colore di sfondo dell’app:<\/strong> Scegli il colore di sfondo per l’app PWA.
\np) Abilita barra delle schede:<\/strong> Abilita la barra delle schede nella parte inferiore dell’app PWA per una navigazione rapida e semplice.
\nq) CSS personalizzato:<\/strong> Inserisci il codice CSS per migliorare l’aspetto delle pagine web-view dell’app PWA come il pagamento web-view, le pagine CMS, ecc.<\/p>\n

Impostazioni notifiche push 2.2<\/h3>\n

Le notifiche push sono il miglior strumento di marketing per l’app PWA per WooCommerce. L’amministratore del negozio pu\u00f2 semplicemente promuovere i prodotti e le offerte del negozio agli utenti dell’app e aumentare le vendite e le entrate.\ufffdInserisci tutti i dettagli nelle impostazioni delle notifiche push creando un progetto Firebase:<\/p>\n

Come impostare un account Firebase?<\/strong><\/p>\n

Passo 1:<\/strong> Accedi a Google Firebase<\/p>\n

\"Firebase\"<\/p>\n

Passo 2:<\/strong> Crea un nuovo progetto Facendo clic su Aggiungi progetto, verr\u00e0 visualizzata la seguente finestra di dialogo:<\/p>\n

\"creare-project\"
\nCi vorranno alcuni secondi per creare il progetto. Quando il progetto \u00e8 pronto, fai clic su Continua.<\/p>\n

\"continuare<\/p>\n

Passo 3:<\/strong> Gestisci le impostazioni del progetto Una volta creato il progetto, fare clic su Impostazioni del progetto.<\/p>\n

\"progetto-settings\"<\/p>\n

Passo 4:<\/strong> Vai alle opzioni di autenticazione:<\/p>\n

\"autenticazione-options\"
\nPasso 5:<\/strong>Trova le chiavi Firebase Nelle impostazioni del progetto, fai clic su Impostazioni di messaggistica cloud. Da qui puoi ottenere direttamente la chiave del server.<\/p>\n

\"Firebase-chiave\"
\nPasso 6:<\/strong>Aggiungi la tua app Web a Firebase<\/p>\n

\"web-app-to-Firebase\"<\/p>\n

\"web-app-to-Firebase\"<\/p>\n

Passo 7:<\/strong>Ottieni altri dettagli relativi a Firebase e incolla gli stessi nel pannello di amministrazione del modulo PWA.<\/p>\n

\"Firebase-details\"<\/p>\n

Passo 8:<\/strong>Ottieni la chiave del server Firebase dalla scheda Messaggistica cloud in Impostazioni:<\/p>\n

\"Firebase-chiave\"<\/p>\n

Passo 9:<\/strong>Aggiungi il tuo dominio nell’autenticazione >> accedi.<\/p>\n

\"Firebase-server-chiave\"<\/p>\n

\"Firebase-server-chiave\"<\/p>\n

A) Notifica push ordine riuscita:<\/h4>\n

Abilita\/Disabilita la notifica push automatica da inviare agli utenti dell’app ogni volta che effettuano un ordine con successo dall’app WooCommerce PWA.<\/p>\n

\"notifica<\/p>\n

B) Notifica push aggiornamento stato ordine:<\/h4>\n

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.<\/p>\n

\"aggiornamento<\/p>\n

C) Notifica push carrello abbandonata:<\/h4>\n

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

\"notifica-carrello-abbandonato\"<\/p>\n

2.3 Cronologia notifiche push<\/h3>\n

La cronologia completa delle notifiche push delle notifiche push inviate con successo verr\u00e0 visualizzata qui. L’amministratore del negozio pu\u00f2 tenere traccia delle notifiche push inviate in precedenza da qui.<\/p>\n

A) Invia notifica:<\/h4>\n

Personalizza e invia manualmente la notifica push agli utenti dell’app PWA secondo necessit\u00e0. L’amministratore del negozio pu\u00f2 configurare queste notifiche da solo e inviarle agli utenti dell’app WooCommerce PWA.<\/p>\n

\"invia-push-notifica\"<\/p>\n

Layout della pagina iniziale 2.4:<\/h3>\n

L’app WooCommerce PWA Mobile offre una schermata iniziale personalizzabile il cui layout pu\u00f2 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\u00f2 sicuramente aiutare a migliorare le vendite tramite le app mobili WooCommerce PWA.<\/p>\n

\"home-page-layout<\/p>\n

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

a) Categorie principali:\ufffd<\/strong><\/p>\n

\"I<\/p>\n

b) Banner quadrato:\ufffd<\/strong><\/p>\n

\"piazza-banner\"<\/p>\n

c) Banner a scorrimento orizzontale:\ufffd<\/strong><\/p>\n

\"banner<\/p>\n

d) Banner a griglia:\ufffd<\/strong><\/p>\n

\"grid-banner\"<\/p>\n

e) Banner del timer per il conto alla rovescia:\ufffd<\/strong><\/p>\n

\"conto<\/p>\n

f) Prodotti quadrati:\ufffd<\/strong><\/p>\n

\"piazza-prodotto\"<\/p>\n

g) Prodotti scorrevoli:\ufffd<\/strong><\/p>\n

\"sottoprodotti<\/p>\n

h) Prodotti Griglia:\ufffd<\/strong><\/p>\n

\"prodotto-griglia\"<\/p>\n

2.5 Pagine informative:<\/h3>\n

Aggiungi pagine CMS sull’app e offri contenuti informativi agli utenti di WooCommerce PWA Mobile App.<\/p>\n

\"pagine<\/p>\n

Come ottenere i dettagli dell’app Facebook?<\/h3>\n

L’app di Facebook pu\u00f2 essere creata seguendo i seguenti passaggi: –<\/p>\n

Passo 1:<\/strong>Vai all’URL fornito : https:\/\/developers.facebook.com\/apps\/<\/p>\n

Passo 2:<\/strong>Fare clic sul pulsante “Aggiungi una nuova app”.<\/p>\n

\"add-new-app\"<\/a><\/p>\n

Passaggio 3 e 4:<\/strong>Immettere il nome dell’app e l’ID e-mail, quindi fare clic sul pulsante “Crea ID app”.<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Passaggio 5 e 6:<\/strong> Dopo aver fatto clic su Crea ID app, sar\u00e0 necessario eseguire un controllo di sicurezza come mostrato:<\/p>\n

\"create-app-id\"<\/a><\/p>\n

Passo 7:<\/strong>Fare clic sulla scheda “Impostazioni”.<\/p>\n

\"fb-app-impostazione\"<\/a><\/p>\n

Passaggio 8-13:<\/strong>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 \u00e8 corretto tuodominio.com\/store non corretto www.dominio.com non \u00e8 corretto<\/p>\n

\"fb-app-id\"<\/a><\/p>\n

Passo 14:<\/strong>Ora fai clic su “+ Aggiungi piattaforma”.<\/p>\n

\"add-piattaforma\"<\/a>
\nPassaggio 15: <\/strong>E seleziona Sito Web come piattaforma.<\/p>\n

\"scegliere-platform\"<\/a><\/p>\n

Passo 16:<\/strong>Ora inserisci l’URL del tuo sito.<\/p>\n

\"enter-sito-url\"<\/a>
\nPassaggio 17 e 18:<\/strong>Fai clic su “Prodotti +” e seleziona Accesso a Facebook.<\/p>\n

\"accesso<\/a>
\nPasso 19:<\/strong>Seleziona web come piattaforma per l’app.<\/p>\n

\"scegliere-platform\"<\/a><\/p>\n

Passo 20:<\/strong> Ora fai clic su Salva.<\/p>\n

\"facebook-app-id\"<\/a>
\nPassaggio 21 e 22: <\/strong>Fare clic su Impostazioni e aggiungere un URI di reindirizzamento OAuth valido. URI di reindirizzamento OAuth validi: https:\/\/example.com\/pwa-app\/login<\/p>\n

\"reindirizzamento-URL\"<\/a><\/p>\n

Passaggio 23 e 24:<\/strong>Fare clic su “Revisione app”. Seleziona “Rendi” pubblico “il nome della tua app su S\u00ec.<\/p>\n

\"app-recensione\"<\/a>
\nPasso finale:<\/strong>Copiare l’ID app e il segreto dell’app e incollarli nei campi forniti nel modulo.<\/p>\n

\"passo<\/a><\/p>\n

Come ottenere i dettagli dell’app Google?<\/h3>\n