Knowband Blog | Ecommerce Modules

PrestaShop Progressive Web App (PWA) – Manuale utente

Joe Parker


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.

1.1 Visualizza l’app demo:

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/

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

[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 possono essere inviate solo al dispositivo Android dal pannello di amministrazione di PrestaShop PWA Mobile App Builder.

[NUOVO AGGIORNAMENTO] PrestaShop PWA supporta gli script in linguaggio RTL

PrestaShop PWA Mobile App Creator ora supporta tutte le lingue del mondo, comprese quelle RTL (da destra a sinistra) come arabo, ebraico, persiano, ecc. L’amministratore del negozio può portare tutte le lingue del proprio negozio sull’app Web progressiva e può persino aggiungere qualsiasi lingua RTL come da requisito. D’altra parte, gli acquirenti mobili non dovranno affrontare alcun problema nell’accedere all’app PrestaShop PWA Mobile nella loro lingua preferita.

Compatibile con il Marketplace multi-vendor PrestaShop

La Mercato multi-vendor PrestaShop è 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 sono per tutti i tipi di modifiche regolari in Progressive Web Applications (PWA). Le opzioni in questa scheda rendono l’app funzionante sui dispositivi degli acquirenti online.

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:�Abilita di visualizzare una breve descrizione del prodotto sullo schermo del prodotto di Progressive Web App (PWA).
d) Abilita logo: Aggiungi il logo del tuo negozio nell’intestazione di Progressive Web App (PWA) e mostra il tuo marchio agli utenti.

e) Colore sfondo schermata iniziale: Scegli l’opzione di colore giusta per lo sfondo della schermata iniziale di Progressive Web 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 dall’utilizzo in�Progressive Web App(PWA)�qualunque cosa non ritieni opportuno. Sul sito web, di solito funzioneranno 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:�Abilita questa funzionalità per supportare i caratteri non ASCII sull’app Web progressiva (PWA).

Impostazioni notifiche push 2.2

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.

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


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


Ci vorranno alcuni secondi per creare il progetto. Una volta che il progetto è pronto, fare 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 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.

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.

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

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.

2.2 Cronologia notifiche push

Qui l’amministratore del negozio può visualizzare la cronologia completa delle notifiche push inviate a Progressive Web App (PWA). Insieme a ciò, l’amministratore del negozio può anche personalizzare la notifica manuale e inviare la stessa agli utenti dell’app Web progressiva.

A) Invia notifica:

Cosa c’è di meglio per progettare e inviare notifiche push secondo la 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.


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

A) Categorie principali:

Le prime�categorie�vengono�visualizzate sotto forma di quadratini nella schermata iniziale di Progressive Web�App (PWA). Le loro immagini e i collegamenti di reindirizzamento possono essere configurati da qui. Queste categorie possono essere utilizzate per evidenziare le migliori marche nella schermata iniziale dell’app. Il modulo PrestaShop PWA consente un massimo di 8 categorie in cui un minimo di 4 sono obbligatorie.

B) Square Banner:

L’elenco dei banner quadrati nella schermata iniziale di Progressive Web 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.


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.

D) Griglia Banner:

Si tratta di banner di forma quadrata elencati nella schermata iniziale di Progressive Web App (PWA) sotto forma di visualizzazione griglia. L’amministratore del negozio può aggiungere tutti i banner necessari e impostare il collegamento di reindirizzamento.


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.


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.


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.


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.


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

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.

2.5 Come ottenere i dettagli dell’app Google?

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

3.0 Schermate dell’app PWA front-end:

3.1 Home 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 Web progressiva (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 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:

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 (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 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:

1. Visualizzazioni multiple:
Le categorie su Progressive Web App (PWA) per PrestaShop 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 della tua app Web progressiva (PWA) è semplice e intrigante. Vengono visualizzate più immagini dello stesso prodotto insieme a nome e prezzo. La disponibilità del prodotto viene visualizzata anche come “Disponibile” o “Non disponibile” in base a stato 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

L’app Web progressiva (PWA)�Offre 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 Web progressiva (PWA) 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, quantità, 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�Progressive Web App(PWA) hanno una versione semplificata checkout 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 Progressive Web 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 web-view disponibili sul negozio. Gli acquirenti online possono trovare un’esperienza di pagamento simile sia sul sito Web che sulle app Web progressive.

3.9 My Account Screen

La schermata del mio account di PrestaShop Progressive Web App (PWA) consente agli utenti di visualizzare i dettagli completi salvati sull’app, incluso un elenco di ordini precedenti.

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.