App mobile PWA PrestaShop – Manuale d’uso

1.0 Introduzione

La rapida crescita nel settore dell’mCommerce ha portato all’urgenza di avere un’app mobile di e-commerce. Tuttavia, la creazione di app mobili richiede molta codifica e altri aspetti tecnici. Perché invece non trasformare il tuo sito web online in un’app web? Offrire un’app PWA PrestaShop ottimizzata, ad esempio, migliorerebbe l’esperienza di acquisto mobile per gli utenti. Questo modulo App PWA di PrestaShop è progettato e realizzato per trasformare il tuo negozio in un’applicazione web che può essere gestita da un pannello di backend amichevole. Queste app presentano varie funzionalità estese rispetto alle app native come la modalità offline e l’indipendenza dalla piattaforma, che le rende una soluzione di acquisto senza problemi e senza interruzioni per gli utenti.

Controlla il modulo da: https://www.knowband.com/it/prestashop-pwa-mobile-app

1.1 Visualizza l’app demo:

home-screen

Prima di acquistare l’estensione, visualizza l’app demo funzionante aprendo l’URL dell’app PrestaShop PWA Demo sul tuo browser.

URL del negozio demo: https://psm.knowband.com/pwa/admin1

URL app PWA: https://psm.knowband.com/pwa/pwa-app/

Passaggi per controllare la demo: https://psm.knowband.com/pwa/en/

1.2 Principali funzionalità dell’app PrestaShop Progressive Web (PWA):

  • Interfaccia schermata iniziale personalizzabile (editor fai-da-te)
  • Notifiche push illimitate (notifiche manuali e automatiche)
  • Supporto chat Zopim e WhatsApp
  • Supporto per tutti i metodi di pagamento e spedizione
  • Sincronizzazione in tempo reale
  • Aggiornamento automatico dell’inventario
  • App leggera con caricamento più veloce
  • Supporto multilingue e RTL
  • Opzioni di accesso tramite e-mail e social (Google e Facebook)
  • Interfaccia intuitiva con navigazione a strati
  • Nessuna dipendenza da Google Play o dall’App Store di Apple
  • Soluzione White Label completa
  • Accessibilità in modalità offline
  • Pagamento in una pagina semplificato
  • Controllo delle pagine CMS (pagine di informazioni)
  • Mostra i prodotti correlati
  • Visualizza le recensioni degli utenti
  • Funzionalità della lista dei desideri incorporata
  • Assistenza per coupon / voucher
  • Supporto multivaluta

Compatibile con il Marketplace multi-vendor PrestaShop

Il PrestaShop Multi-vendor Marketplace è completamente compatibile con l’app PrestaShop PWA Mobile. La Progressive Web App mostra la sezione venditore con tutti i venditori del marketplace sulla stessa applicazione. I dettagli del venditore rimangono sincronizzati in tempo reale con il web del marketplace e verranno aggiornati automaticamente sull’applicazione PWA di PrestaShop.

Nota: L’app mobile PWA multivendor per PrestaShop è incentrata solo sul cliente. Ciò significa che non ci sarà alcuna dashboard o gestione del venditore dall’estremità dell’app. L’amministratore del negozio può gestire i venditori dal modulo PrestaShop Marketplace e lo stesso verrà aggiornato immediatamente sull’app.

Schermate del pannello di amministrazione 2.0

L’app mobile PWA di PrestaShop può essere completamente configurata utilizzando queste pratiche schede e impostazioni di amministrazione. Tutto quello che devi fare è fare alcuni clic e pulsanti necessari per apportare le modifiche nella Progressive Web App. Discutiamo ciascuno di essi in dettaglio:

2.1 Impostazioni generali

Come suggerisce il nome, queste impostazioni di configurazione generali riguardano tutti i tipi di modifiche regolari nelle applicazioni Web progressive. Le opzioni in questa scheda fanno funzionare l’app sui dispositivi dell’acquirente online.

general-settings-1

a) Abilita plugin:Abilita il modulo PWA di PrestaShop per far funzionare l’app sui dispositivi mobili.
b) Reindirizzamento sulla pagina del carrello quando si aggiunge al carrello: Questa funzionalità consente all’amministratore di controllare il reindirizzamento del pulsante “Aggiungi al carrello”. Gli utenti possono essere reindirizzati al carrello o mantenuti sulla schermata del prodotto toccando “Aggiungi al carrello”.
c) Descrizione breve dell’esposizione:Consente di visualizzare una breve descrizione del prodotto sulla schermata del prodotto della Progressive Web App.
d) Abilita logo: Aggiungi il logo del tuo negozio nell’intestazione dell’app PWA e mostra il tuo marchio agli utenti.

general-settings-2

e) Colore sfondo schermata iniziale: Scegli l’opzione di colore giusta per lo sfondo della schermata iniziale dell’app PWA.
f) Nome per l’app PWA: Scegli il nome della tua app PWA secondo la tua scelta.
g) Seleziona layout: Scegli il layout della pagina iniziale desiderato per la tua app PrestaShop. È possibile creare più layout della schermata iniziale nel back-end secondo vari festival e temi e utilizzarli secondo i requisiti del negozio.
h) Metodi di spedizione disabilitati:Disabilita i metodi di spedizione che funzionano nell’app PWA a seconda di quale non ti senti a tuo agio. Sul sito web funzioneranno normalmente bene.
i) Pagine CMS abilitate:Scegli le pagine CMS desiderate da visualizzare sull’app PrestaShop PWA.
j) Abilita report registro richieste:Abilita l’opzione per condividere il file di registro sulle app web progressive al fine di ottenere i dettagli di qualsiasi tipo di comportamento anomalo dall’app.
k) Abilita la codifica URL dei link immagine:Abilitare questa funzionalità per supportare i caratteri non ASCII nell’app Web Progressive.

Impostazioni notifiche push 2.2

push-notifications-settings

Le notifiche push sono lo strumento utile per commercializzare e promuovere i prodotti, le offerte e le offerte di vendita del tuo negozio. Le impostazioni in questa scheda consentono agli utenti di configurare e inviare notifiche push illimitate sull’app PrestaShop PWA.

push-notification-settings

I vari dettagli in queste impostazioni saranno ottenuti quando imposterai l’account Firebase. Ecco la procedura passo passo per farlo:

2.21 Come impostare un account Firebase?

Passo 1: Accedi a Google Firebase

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

creare-project
Ci vorranno alcuni secondi per creare il progetto. Una volta che il progetto è pronto, fare clic su Continua.

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

progetto-settings
Passo 4: Vai alle opzioni di autenticazione:
autenticazione-options

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.

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

chiavi firebase

A) Notifica push ordine riuscita:

Abilita / disabilita le notifiche push automatiche inviate agli utenti dell’app per la corretta creazione dell’ordine dall’app PrestaShop PWA.

order-success-notification

B) Notifica push aggiornamento stato ordine:

Abilita / disabilita le notifiche push automatiche inviate agli utenti dell’app per qualsiasi aggiornamento relativo allo stato di consegna dell’ordine precedente. Gli utenti possono visualizzare questo stato nella scheda “Dettagli ordine” dell’app PWA

order-status-update

C) Notifica push carrello abbandonata:

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

abandoned-cart-notification

2.2 Cronologia notifiche push

Qui l’amministratore del negozio può visualizzare la cronologia completa delle notifiche push inviate all’app PWA. Oltre a ciò, l’amministratore del negozio può persino personalizzare la notifica manuale e inviare la stessa agli utenti di Web App Progressive.

manual-push-notification

A) Invia notifica:

Cosa c’è di meglio per progettare e inviare notifiche push secondo le necessità? Questa opzione consente ai proprietari dei negozi di configurare e inviare manualmente una notifica personalizzata agli utenti dell’app PrestaShop PWA.

Layout della pagina iniziale 2.3

Il modulo PWA di PrestaShop consente all’amministratore del negozio di aggirare le restrizioni di avere un’interfaccia utente fissa della schermata iniziale e progettare quella che si adatta alle proprie esigenze aziendali. Questa scheda consente all’amministratore del negozio di creare e salvare più layout e utilizzarli secondo le occasioni in corso e i festival.

add-new-layout
Per configurare i layout della home page dell’app PWA, nel back-end sono disponibili i seguenti elementi:

A) Categorie principali:

Le categorie principali sono visualizzate sotto forma di piccoli quadrati nella schermata principale di Progressive WebApp. Le loro immagini e i link di reindirizzamento possono essere configurati da qui. Queste categorie possono essere utilizzate per evidenziare le migliori marche nella schermata iniziale dell’app. Il modulo PWA di PrestaShop consente un massimo di 8 categorie in cui almeno 4 sono obbligatorie.

top-categories

B) Square Banner:

L’elenco dei banner quadrati nella schermata iniziale dell’app PWA offre un blocco banner di forma quadrata in cui l’amministratore del negozio può utilizzare l’immagine desiderata. Il relativo link di reindirizzamento può essere utilizzato per questi banner.

square-banner
C) Banner orizzontale Scorrevole :

Questi sono i blocchi banner a forma di rettangolo disponibili in scorrimento orizzontale nella schermata iniziale dell’app PrestaShop PWA. Anche per questo, l’immagine e il collegamento di reindirizzamento sono completamente configurabili.

sliding-banner

D) Griglia Banner:

Si tratta di banner di forma quadrata elencati nella schermata principale dell’app PWA sotto forma di visualizzazione a griglia. L’amministratore del negozio può aggiungere tutti i banner necessari e impostare il proprio link di reindirizzamento.

grid-banner
E) Conto alla rovescia Banner timer:

Il modulo PWA di PrestaShop consente all’amministratore del negozio di configurare e aggiungere un banner basato su timer nella schermata principale dell’app web. L’amministratore del negozio può aggiungere l’immagine del banner e la schermata di destinazione insieme al timer fino a quando il banner non viene visualizzato nella schermata iniziale dell’app Web progressiva. Al termine del timer, il banner verrà rimosso automaticamente.

count-down-timer
F) Square Prodotti:

A partire dai banner, le app mobili PWA di PrestaShop consentono di mostrare i prodotti in elenchi di blocchi quadrati. L’amministratore può scegliere i prodotti per questo elemento.

square-products
G) Prodotti a scorrimento orizzontale:

È possibile aggiungere i prodotti sotto forma di scorrimento orizzontale. I prodotti scelti potrebbero essere della scelta dell’amministratore del negozio come nuovi arrivi, best seller, prodotti personalizzati ecc.

sliding-product

H) Prodotti a griglia:

I prodotti possono anche essere aggiunti sulla schermata iniziale sotto forma di elenchi di blocchi con visualizzazione a griglia. L’amministratore del negozio può scegliere i prodotti e la quantità desiderati da visualizzare nella schermata principale dell’app PrestaShop PWA.

grid-product

I) Prodotti acceduti di recente:

Il modulo PWA di PrestaShop Mobile consente al proprietario del negozio di aggiungere un elemento di scheda recente sulla schermata iniziale dell’applicazione web. Visualizzerà tutti i prodotti che sono stati consultati di recente dagli utenti.

Nota: L’amministratore del negozio può aggiungere fino a 20 elementi durante la progettazione del layout nel pannello di backend.

2.4 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”.

add-new-app

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

create-app-id

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

create-app-id

Passo 7:Fare clic sulla scheda “Impostazioni”.

fb-app-impostazione

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

fb-app-id

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

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

scegliere-platform

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

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

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

scegliere-platform

Passo 20: Ora fai clic su Salva.

facebook-app-id
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

reindirizzamento-URL

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

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

passo finale

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

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: Applicazione web.
Origini JavaScript autorizzate: Il nome di dominio del tuo negozio (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:

3.1 Home Screencasa-screen

1. Layout dinamico:

Utilizzando vari elementi di progettazione, l’amministratore del negozio può creare layout dinamico secondo le necessità.

2. Logo del negozio:

Aggiungi il logo del negozio nell’intestazione dell’app Progressive Web .

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 per fisarmonica (barra di navigazione)

L’app Web progressiva fornisce una corretta classificazione dei prodotti disponibile sul sito Web. Gli acquirenti mobili possono facilmente sfogliare i prodotti di più categorie. Tutte le pagine CMS sono disponibili anche nel menu Fisarmonica. Fornisce le seguenti opzioni:

barra di navigazione

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 Progressive Web 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 sull’app PrestaShop PWA.

6. Login / Logout
Gli utenti possono facilmente accedere / disconnettersi dall’app PrestaShop Progressive Web tramite questa opzione.

Schermata delle categorie 3.3:categoria-screen

1. Visualizzazioni multiple:
Le categorie sull’app PWA per PrestaShop possono essere visualizzate sia nella visualizzazione elenco che nella visualizzazione 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 della tua Progressive Web App è semplice e intrigante. Vengono visualizzate più immagini dello stesso prodotto insieme al nome e al prezzo. La disponibilità del prodotto viene visualizzata anche come “Disponibile” o “Non disponibile” in base a prodotto-screenstato dell’inventario. Contiene le seguenti altre opzioni:

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 il prodotto 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 il prodotto su più canali social.

Schermata di accesso 3.5

La Progressive Web App login-screenOffre varie opzioni di accesso con un solo tocco e rende il processo di accesso / registrazione più semplice:

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 dall’app PrestaShop 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 Progressive Web utilizzando le credenziali dell’account Google.

Schermata del carrello acquisti 3.6:

La schermata del carrello della tua app web progressiva mostrerà tutti i prodotti aggiunti al carrello. Gli utenti dell’app possono visualizzare il nome del prodotto, lo shopping-cart-screenquantità, prezzo totale e costi di spedizione. Questa schermata ha le seguenti opzioni:

1. Applicare il buono
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 la quantità del prodotto
Gli utenti dell’app PWA possono persino aggiornare la quantità del prodotto con l’opzione “Aggiorna quantità”.

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

5. Continua a fare acquisti
Gli utenti possono lasciare il carrello per sfogliare più prodotti sulla tua app web progressiva.

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

Le app web progressive con modulo PrestaShop PWA hanno una versione semplificata checkout-schermocheckout a schermata singola con solo informazioni pertinenti. Gli utenti possono visualizzare i dettagli completi del checkout 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 della web app progressiva 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:

La schermata di pagamento dell’app PrestaShop PWA ha tutti i pagamenti con visualizzazione web disponibili nello store. Gli acquirenti online possono trovare un’esperienza di pagamento simile sia sul sito Web che sulle app Web progressive.

pagamento-screen

3.9 My Account Screen

La schermata del mio account dell’app PrestaShop PWA consente agli utenti di visualizzare i dettagli completi salvati sull’app, incluso un elenco di ordini precedenti.my-conto-screen

3.10 Schermata Dettagli ordine

La schermata dei dettagli dell’ordine dell’app PrestaShop Progressive Web fornisce i dettagli completi di un ordine specifico 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. C’è anche un’opzione per tenere traccia dello stato dell’ordine e della sua consegna.

order-details

 

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 *