PrestaShop PWA Mobile App – User Manual


1.0 Introduzione

La rapida crescita nel settore mCommerce ha portato all'urgenza di disporre di un'app mobile eCommerce. Ma la creazione di app mobili comporta molta codifica e altri aspetti tecnici. Perché 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 per app PWA PrestaShop è progettato e realizzato per trasformare il tuo negozio in un'applicazione web che può essere gestita da un pannello back-end intuitivo. Queste app presentano varie funzionalità estese rispetto alle app native come la modalità offline e l'indipendenza dalla piattaforma, il che le rende una soluzione di acquisto senza problemi e senza problemi per gli utenti.

1.1 Visualizza l'app demo:

Prima di acquistare l'estensione, visualizzare il funzionamento dell'app demo aprendo l'URL dell'app Demo PWA di PrestaShop sul browser.

URL del negozio demo: https://psm.knowband.com/pwa/17/admin1
URL dell'app PWA:?https://psm.knowband.com/pwa/17/pwa-app

Schermate del pannello di amministrazione 2.0

L'app mobile PrestaShop PWA può essere completamente configurata utilizzando queste comode schede e impostazioni di amministrazione. Tutto quello che devi fare è fare alcuni clic necessari e attivare / disattivare i pulsanti per apportare le modifiche nell'app Progressive Web. 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 nelle applicazioni Web progressive. Le opzioni in questa scheda rendono la funzione app sui dispositivi dell'acquirente online.

generali-settings-1

a) Abilita plugin:?Enable the PrestaShop PWA module to make the app work on mobile devices.
b) Reindirizzamento sulla pagina del carrello quando Aggiungi 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 nella schermata del prodotto toccando "Aggiungi al carrello".
c) Descrizione breve dell'esposizione:?Enable to display short product description on the product screen of Progressive Web App.
d) Abilita logo: Aggiungi il logo del tuo negozio sull'intestazione dell'app PWA e mostra il tuo marchio agli utenti.

generali-settings-2

e) Colore sfondo schermo splash: Scegli l'opzione del colore giusto 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:?Choose the desired Home Page Layout for your PrestaShop app. You can create multiple home screen layouts in the backend as per various festivals & themes & use them as per your store requirement.
h) Metodi di spedizione disabilitati:?Disable shipping methods from working in PWA app whichever you don’t feel right. On website they will work usually fine.
i) Pagine CMS abilitate:?Choose desired CMS pages to be displayed on the PrestaShop PWA app.
j) Abilita segnalazione registro richieste:?Enable option to share log file on the progressive web apps in order to get details of any sort of abnormal behavior from app.
k) Abilita la codifica URL dei collegamenti immagine:?Enable this functionality to support Non-ASCII characters on the Progressive web app.

Impostazioni notifiche push 2.2

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

push-notifiche-1

I vari dettagli in queste impostazioni saranno ottenuti quando imposterai l'account Firebase. Ecco il processo passo passo per farlo:

2.21 Come impostare un account Firebase?

Passo 1:?Login Google Firebase

Firebase-project
Passo 2: Crea nuovo progetto Facendo clic su

creare-project
Ci vorranno alcuni secondi per creare il progetto. Quando il progetto è pronto, fai clic su

continuare a progetto
Passo 3: Gestire le impostazioni del progetto Dopo aver creato il progetto, fare clic su

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

Passo 5: Trova chiavi Firebase Nelle impostazioni del progetto, fai clic su Impostazioni di messaggistica cloud. Da qui, è possibile 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

Firebase-keys

A) Notifica push ordine riuscita:

Abilita / Disabilita Notifica push automatica inviata agli utenti dell'app per la corretta creazione dell'ordine dall'app PrestaShop PWA.

le notifiche push

B) Notifica push aggiornamento stato ordine:

Abilita / disabilita la notifica push automatica inviata agli utenti dell'app per qualsiasi aggiornamento relativo al loro stato di consegna dell'ordine precedente. Gli utenti possono visualizzare questo stato nella scheda "Dettagli ordine" dell'app PWA

le notifiche push

C) Notifica push carrello abbandonata:

Abilita / disabilita la notifica push automatizzata inviata agli utenti che hanno abbandonato il carrello senza effettuare correttamente l'acquisto. Questa notifica push verrà inviata automaticamente agli utenti dopo l'intervallo di tempo inserito.

le notifiche push

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ò anche personalizzare la notifica manuale e inviare lo stesso agli utenti dell'app PWA.

push-notifiche-storia

A) Invia notifica:

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

push-notifiche-storia
Layout della pagina iniziale 2.3

Il modulo PWA di PrestaShop consente all'amministratore del negozio di eludere le restrizioni di avere un'interfaccia utente della schermata principale fissa e di progettare quello adatto alle proprie esigenze aziendali. Questa scheda consente all'amministratore del negozio di creare e salvare più layout e usarli secondo le occasioni e i festival in corso.

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

A) In alto

Superiore

I piú categorie

B) Quadrato

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

piazza-banner
C) Orizzontale

Questi sono i blocchi banner a forma di rettangolo disponibili nello scorrimento orizzontale nella schermata principale dell'app PrestaShop PWA. Anche per questo, il link immagine e reindirizzamento è completamente configurabile.

-banner scorrevole

D) Grid

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 link di reindirizzamento.

grid-banner
E) Conto alla rovescia

Il

conto alla rovescia-timer-banner
F) Square

A partire dai banner, le app mobili PrestaShop PWA consentono di mostrare i prodotti nell'elenco dei blocchi quadrati. L'amministratore può scegliere i prodotti per questo elemento.

quadrati prodotti
G) Prodotti scorrevoli orizzontali:

È possibile aggiungere i prodotti sotto forma di scorrimento orizzontale. I prodotti scelti potrebbero essere scelti dall'amministratore del negozio come Nuovi arrivi, I più venduti, Prodotti personalizzati ecc.

sottoprodotti scorrevole
H) Prodotti a griglia:

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

grid-products
I) Prodotti a cui è stato effettuato l'accesso di recente:

Il modulo PWA di PrestaShop Mobile consente al proprietario del negozio di aggiungere un recente elemento della scheda nella schermata principale dell'applicazione Web. Visualizzerà tutti i prodotti visitati di recente dagli utenti.

Note: L'amministratore del negozio può aggiungere fino a 20 elementi durante la progettazione del layout nel pannello back-end.

2.4 Come ottenere i dettagli dell'app Facebook?

L'app di Facebook può essere creata seguendo i seguenti passaggi: –

Passo 1:?Go to given?URL: https://developers.facebook.com/apps/

Passo 2:?Click on the “Add a New App” button.

add-new-app

Passaggio 3 e 4:?Enter your App name and email id, then click on “Create App ID” button.

create-app-id

Passaggio 5 e 6:?After clicking on Create App ID you will have to?go through a security check as shown:

create-app-id

Passo 7:?Click on “Setting” tab.

fb-app-impostazione

Passaggio 8-13:?Two option will be available in the?dropdown, Basic and Advanced, click on “Basic”. And then enter your “App Domain”,?”Contact Email”, “Privacy?URL”, “Terms and Conditions?URL”, “Add Logo”, “Select Category” and click on “Save Changes” button.
App Domains:
yourdomain.com is?correct
yourdomain.com/store is?incorrect
www.domain.com is?incorrect

fb-app-id

Passo 14:?Now click on “+Add Platform”.

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

scegliere-platform

Passo 16:?Now Enter your site URL.

enter-sito-url
Passaggio 17 e 18:?Click on “Products+” and select Facebook login.

accesso a Facebook
Passo 19:?Select web as the platform for the app.

scegliere-platform

Passo 20:?Now click on save.

facebook-app-id
Passaggio 21 e 22:Fai clic su Impostazioni e aggiungi un URI di reindirizzamento OAuth valido. URI di reindirizzamento OAuth validi: https://example.com/pwa-app/login

reindirizzamento-URL

Passaggio 23 e 24:?Click on “App review”. And?mark “Make ‘your app name’ Public” to Yes.

app-recensione
Passo finale:?Copy the App ID and App Secret and paste it into the fields provided in the module.

passo finale

2.5 Come ottenere i dettagli dell'app Google?

  • Vai alla Google Developers Console (https://console.developers.google.com/project) o fai clic sul link in alto a destra nella rispettiva scheda nella pagina di configurazione del modulo.
  • Ora fai clic su
  • Inserisci un nome per il tuo progetto e procedi con il passaggio successivo.
  • Ora fai clic su API e autorizzazioni-> 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 del 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 dinamici 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 per fisarmonica (barra di navigazione)

Le app PrestaShop per dispositivi mobili per Android e iOS presentano una corretta categorizzazione dei prodotti disponibili sul sito web. Gli acquirenti mobili possono facilmente sfogliare i prodotti da 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, sulla spedizione e sull'ordine. Gli acquirenti di app PWA possono visualizzare tutti i dati memorizzati ad essi correlati e possono aggiornare anche gli stessi.

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 PrestaShop PWA.

6. Login / Logout
Gli utenti possono facilmente accedere / disconnettersi dall'app PrestaShop PWA tramite questa opzione.

Schermata delle categorie 3.3:categoria-screen

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

1. Informazioni sul prodotto e assistenza
Le informazioni complete sul prodotto disponibili nell'inventario verranno visualizzate qui.

2. breve descrizione
Gli utenti possono leggere la breve descrizione del 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 nel 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 mobile PrestaShop login-screenCreator offre varie opzioni di accesso con un solo tocco e semplifica il processo di accesso / registrazione:

1. Accesso
Gli utenti dell'app possono facilmente autenticarsi e accedere alle app PWA usando le loro credenziali di accesso e-mail precedenti.

2. Iscriviti
Tutti gli utenti della nuova app possono iscriversi e creare il proprio account sullo store dall'app PrestaShop PWA. Il modulo di iscrizione richiede solo i dettagli necessari per creare un account.

3. Accedi con Facebook
Gli utenti possono accedere all'app PWA usando le loro credenziali dell'account Facebook.

4. Accedi con Google+
Gli utenti possono accedere all'app PWA usando le loro credenziali dell'account Google.

Schermata del carrello acquisti 3.6:

La schermata del carrello della tua app PrestaShop per dispositivi mobili 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. Applica il voucher
Questa opzione consente agli utenti di utilizzare coupon per siti 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 al pagamento".

3.7 Checkout Screen

Le app mobili con PrestaShop Mobile App Maker sono semplificate checkout-schermocheckout a schermo singolo con solo informazioni pertinenti. Gli utenti possono visualizzare i dettagli di pagamento completi come i dettagli di spedizione, i dettagli di fatturazione, il riepilogo dell'ordine, il commento dell'ordine, il 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 di analisi relativi all'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 di PrestaShop

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 Web progressiva PrestaShop fornisce i dettagli completi dell'ordine specifico dall'app PWA. Gli utenti possono visualizzare facilmente l'indirizzo di spedizione, il riepilogo del prodotto, il metodo di spedizione e pagamento, il riepilogo dei costi totali, ecc. È anche disponibile 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 *