![\"casa-screen\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Category-Of-Home-screen.png\")
<\/a><\/p>\nPrima di acquistare l’estensione, visualizza l’app demo funzionante aprendo l’URL dell’app PrestaShop PWA Demo sul tuo browser.<\/p>\n
URL del negozio demo:<\/strong> https:\/\/psm.knowband.com\/pwa\/admin1<\/a> –> 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.<\/p>\n 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\u00f2 portare tutte le lingue del proprio negozio sull’app Web progressiva e pu\u00f2 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.<\/p>\n La Mercato multi-vendor PrestaShop<\/a> \u00e8 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.<\/p>\n Nota:<\/strong> L’app mobile PWA multivendor per PrestaShop \u00e8 incentrata solo sul cliente. Ci\u00f2 significa che non ci sar\u00e0 alcuna dashboard o gestione del venditore dall’estremit\u00e0 dell’app. L’amministratore del negozio pu\u00f2 gestire i venditori dal modulo PrestaShop Marketplace e lo stesso verr\u00e0 aggiornato immediatamente sull’app.<\/p>\n L’app mobile PWA di PrestaShop pu\u00f2 essere completamente configurata utilizzando queste pratiche schede e impostazioni di amministrazione. Tutto quello che devi fare \u00e8 fare alcuni clic e pulsanti necessari per apportare le modifiche nella Progressive Web App. Discutiamo ciascuno di essi in dettaglio:<\/p>\n 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.<\/p>\n a) Abilita plugin:<\/strong>Abilita il modulo PWA di PrestaShop per far funzionare l’app sui dispositivi mobili. e) Colore sfondo schermata iniziale:<\/strong> Scegli l’opzione di colore giusta per lo sfondo della schermata iniziale di Progressive Web App (PWA). 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.<\/p>\n I vari dettagli in queste impostazioni saranno ottenuti quando imposterai l’account Firebase. Ecco la procedura passo passo per farlo:<\/p>\n Passo 1:<\/strong> Accedi a Google Firebase<\/p>\n Passo 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 Passo 7:<\/strong> Ottieni altri dettagli relativi a Firebase e incollali nello stesso pannello di amministrazione del modulo PWA.<\/p>\n Passo 8:<\/strong> Ottieni la chiave del server Firebase dalla scheda di messaggistica cloud in Impostazioni:<\/p>\n Passo 9:<\/strong> Aggiungi il tuo dominio nell’autenticazione >> accedi.<\/p>\n Abilita \/ disabilita le notifiche push automatiche inviate agli utenti dell’app per la corretta creazione dell’ordine dall’app PrestaShop PWA.<\/p>\n 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<\/p>\n Abilita \/ Disabilita la notifica push automatica inviata agli utenti che hanno abbandonato il carrello senza aver effettuato l’acquisto. Questa notifica push verr\u00e0 inviata automaticamente agli utenti dopo l’intervallo di tempo inserito.<\/p>\n Qui l’amministratore del negozio pu\u00f2 visualizzare la cronologia completa delle notifiche push inviate a Progressive Web App (PWA). Insieme a ci\u00f2, l’amministratore del negozio pu\u00f2 anche personalizzare la notifica manuale e inviare la stessa agli utenti dell’app Web progressiva.<\/p>\n Cosa c’\u00e8 di meglio per progettare e inviare notifiche push secondo la necessit\u00e0? Questa opzione consente ai proprietari dei negozi di configurare e inviare manualmente una notifica personalizzata agli utenti dell’app PrestaShop PWA.<\/p>\n 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\u00f9 layout e utilizzarli secondo le occasioni in corso e i festival.<\/p>\n Le prime\ufffdcategorie\ufffdvengono\ufffdvisualizzate sotto forma di quadratini nella schermata iniziale di Progressive Web\ufffdApp (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.<\/p>\n 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\u00f2 utilizzare l’immagine desiderata. Il relativo link di reindirizzamento pu\u00f2 essere utilizzato per questi banner.<\/p>\n 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.<\/p>\n 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\u00f2 aggiungere tutti i banner necessari e impostare il collegamento di reindirizzamento.<\/p>\n 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\u00f2 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\u00e0 rimosso automaticamente.<\/p>\n A partire dai banner, le app mobili PWA di PrestaShop consentono di mostrare i prodotti in elenchi di blocchi quadrati. L’amministratore pu\u00f2 scegliere i prodotti per questo elemento.<\/p>\n \u00c8 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.<\/p>\n I prodotti possono anche essere aggiunti sulla schermata iniziale sotto forma di elenchi di blocchi con visualizzazione a griglia. L’amministratore del negozio pu\u00f2 scegliere i prodotti e la quantit\u00e0 desiderati da visualizzare nella schermata principale dell’app PrestaShop PWA.<\/p>\n 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\u00e0 tutti i prodotti che sono stati consultati di recente dagli utenti.<\/p>\n Nota:<\/strong> L’amministratore del negozio pu\u00f2 aggiungere fino a 20 elementi durante la progettazione del layout nel pannello di backend.<\/p>\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 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 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 Passo 7:<\/strong>Fare clic sulla scheda “Impostazioni”.<\/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 Passo 14:<\/strong>Ora fai clic su “+ Aggiungi piattaforma”.<\/p>\n Passo 16:<\/strong>Ora inserisci l’URL del tuo sito.<\/p>\n Passo 20:<\/strong> Ora fai clic su Salva.<\/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 Tipo di applicazione:<\/strong> Applicazione web. 1. Layout dinamico:<\/strong><\/p>\n Utilizzando vari elementi di progettazione, l’amministratore del negozio pu\u00f2 creare layout dinamico secondo le necessit\u00e0.<\/p>\n 2. Logo del negozio:<\/strong><\/p>\n Aggiungi il logo del negozio nell’intestazione dell’app Web progressiva (PWA).<\/p>\n 3. Carrello:<\/strong><\/p>\n L’icona del carrello nell’angolo in alto a destra della schermata principale consente agli utenti di attivare la schermata del carrello.<\/p>\n 4. Menu di navigazione:<\/strong> L’app Web progressiva fornisce una corretta classificazione dei prodotti disponibile sul sito Web. Gli acquirenti mobili possono facilmente sfogliare i prodotti di pi\u00f9 categorie. Tutte le pagine CMS sono disponibili anche nel menu Fisarmonica. Fornisce le seguenti opzioni:<\/p>\n 1. Il mio account:<\/strong> 2. categorie<\/strong> 3. Pagine CMS:<\/strong> 4. Le lingue)<\/strong> 5. Valuta (s)<\/strong> 6. Login \/ Logout<\/strong> 1. Visualizzazioni multiple:<\/strong> 2. Ordinamento:<\/strong> 3. Filtro:<\/strong> La schermata del prodotto della tua app Web progressiva (PWA) \u00e8 semplice e intrigante. Vengono visualizzate pi\u00f9 immagini dello stesso prodotto insieme a nome e prezzo. La disponibilit\u00e0 del prodotto viene visualizzata anche come “Disponibile” o “Non disponibile” in base a 1. Informazioni e cura del prodotto<\/strong> 2. breve descrizione<\/strong> 3. Opzioni del prodotto:<\/strong> 5. Aggiungi al carrello:<\/strong> 6. Condivisione social prodotto:<\/strong> L’app Web progressiva (PWA)\ufffd 1. Accesso<\/strong> 2. Iscriviti<\/strong> 3. Accedi con Facebook<\/strong> 4. Accedi con Google+<\/strong> La schermata del carrello della tua app web progressiva mostrer\u00e0 tutti i prodotti aggiunti al carrello. Gli utenti dell’app possono visualizzare il nome del prodotto, 1. Applicare il buono<\/strong> 2. Prezzo totale del prodotto<\/strong> 3. Aggiorna la quantit\u00e0 del prodotto<\/strong> 4. Rimuovere il prodotto<\/strong> 5. Continua a fare acquisti<\/strong> 6. Continua alla cassa<\/strong>
\nURL app PWA:<\/strong>\u00ef \u00bf\u00bdhttps:\/\/psm.knowband.com\/pwa\/pwa-app\/<\/a><\/p>\n1.2 Principali funzionalit\u00e0 dell’app PrestaShop Progressive Web (PWA):<\/h3>\n
\n
[IMP] Note per iOS:<\/h3>\n
[NUOVO AGGIORNAMENTO] PrestaShop PWA supporta gli script in linguaggio RTL<\/h2>\n
Compatibile con il Marketplace multi-vendor PrestaShop<\/h2>\n
Schermate del pannello di amministrazione 2.0<\/h2>\n
2.1 Impostazioni generali<\/h3>\n
<\/a><\/p>\n
\nb) Reindirizzamento sulla pagina del carrello quando si aggiunge al carrello: <\/strong>Questa funzionalit\u00e0 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”.
\nc) Descrizione breve dell’esposizione:<\/strong>\ufffdAbilita di visualizzare una breve descrizione del prodotto sullo schermo del prodotto di Progressive Web App (PWA).
\nd) Abilita logo:<\/strong> Aggiungi il logo del tuo negozio nell’intestazione di Progressive Web App (PWA) e mostra il tuo marchio agli utenti.<\/p>\n<\/a><\/p>\n
\nf) Nome per l’app PWA:<\/strong> Scegli il nome della tua app PWA secondo la tua scelta.
\ng) Seleziona layout:<\/strong> Scegli il layout della pagina iniziale desiderato per la tua app PrestaShop. \u00c8 possibile creare pi\u00f9 layout della schermata iniziale nel back-end secondo vari festival e temi e utilizzarli secondo i requisiti del negozio.
\nh) Metodi di spedizione disabilitati:<\/strong>\ufffdDisabilita i metodi di spedizione dall’utilizzo in\ufffdProgressive Web App(PWA)\ufffdqualunque cosa non ritieni opportuno. Sul sito web, di solito funzioneranno bene.
\ni) Pagine CMS abilitate:<\/strong>Scegli le pagine CMS desiderate da visualizzare sull’app PrestaShop PWA.
\nj) Abilita report registro richieste:<\/strong>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.
\nk) Abilita la codifica URL dei link immagine:<\/strong>\ufffdAbilita questa funzionalit\u00e0 per supportare i caratteri non ASCII sull’app Web progressiva (PWA).<\/p>\nImpostazioni notifiche push 2.2<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\n2.21 Come impostare un account Firebase?<\/h4>\n
<\/a>
\nPasso 2:<\/strong> Crea nuovo progetto Facendo clic su Aggiungi progetto, verr\u00e0 visualizzata la seguente finestra di dialogo:<\/p>\n<\/a>
\nCi vorranno alcuni secondi per creare il progetto. Una volta che il progetto \u00e8 pronto, fare clic su Continua.<\/p>\n<\/a>
\nPasso 3:<\/strong> Gestisci le impostazioni del progetto Una volta creato il progetto, fare clic su Impostazioni del progetto.<\/p>\n<\/a>
\nPasso 4:<\/strong> Vai alle opzioni di autenticazione:
\n<\/a><\/p>\n<\/a>
\nPasso 6:<\/strong> Aggiungi la tua app Web a Firebase<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\nA) Notifica push ordine riuscita:<\/h4>\n
<\/a><\/p>\nB) Notifica push aggiornamento stato ordine:<\/h4>\n
<\/a><\/p>\nC) Notifica push carrello abbandonata:<\/h4>\n
<\/a><\/p>\n2.2 Cronologia notifiche push<\/h2>\n
<\/a><\/p>\nA) Invia notifica:<\/h3>\n
<\/a>
\nLayout della pagina iniziale 2.3<\/h2>\n<\/a>
\nPer configurare i layout della home page dell’app PWA, nel back-end sono disponibili i seguenti elementi:<\/p>\nA) Categorie principali:<\/h3>\n
<\/a><\/p>\nB) Square Banner:<\/h3>\n
<\/a>
\nC) Banner orizzontale Scorrevole :<\/h3>\n<\/a><\/p>\nD) Griglia Banner:<\/h3>\n
<\/a>
\nE) Conto alla rovescia Banner timer:<\/h3>\n<\/a>
\nF) Square Prodotti:<\/h3>\n<\/a>
\nG) Prodotti a scorrimento orizzontale:<\/h3>\n<\/a>
\nH) Prodotti a griglia:<\/h3>\n<\/a>
\nI) Prodotti acceduti di recente:<\/h3>\n2.4 Come ottenere i dettagli dell’app Facebook?<\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a>
\nPassaggio 15: <\/strong>E seleziona Sito Web come piattaforma.<\/p>\n<\/a><\/p>\n<\/a>
\nPassaggio 17 e 18:<\/strong>Fai clic su “Prodotti +” e seleziona Accesso a Facebook.<\/p>\n<\/a>
\nPasso 19:<\/strong>Seleziona web come piattaforma per l’app.<\/p>\n<\/a><\/p>\n<\/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<\/a><\/p>\n<\/a>
\nPasso finale:<\/strong>Copiare l’ID app e il segreto dell’app e incollarli nei campi forniti nel modulo.<\/p>\n<\/a><\/p>\n2.5 Come ottenere i dettagli dell’app Google?<\/h2>\n
\n
<\/a><\/p>\n\n
\nOrigini JavaScript autorizzate:<\/strong> Il nome di dominio del tuo negozio (https:\/\/www.yourstore.com).
\nURI di reindirizzamento autorizzato o URI della pagina di reindirizzamento di Loginizer:<\/strong>
\nhttps:\/\/example.com\/pwa-app\/login<\/p>\n<\/a><\/p>\n\n
3.0 Schermate dell’app PWA front-end:<\/h2>\n
3.1 Home Screen
<\/a><\/h3>\n
\nSfoglia le categorie nelle app con il menu di navigazione a sinistra nella schermata principale.<\/p>\n3.2 Menu per fisarmonica (barra di navigazione)<\/h3>\n
<\/a><\/p>\n
\nL’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.<\/p>\n
\nLe categorie visualizzate nel menu di navigazione a sinistra dell’app Progressive Web (PWA) sono le stesse del tuo sito web.<\/p>\n
\nVarie pagine CMS come Chi siamo, Contattaci, Termini e condizioni, ecc. \u00c8 possibile accedere da qui.<\/p>\n
\nL’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.<\/p>\n
\nTutte le valute disponibili sul tuo sito web sono visualizzate qui sull’app PrestaShop PWA.<\/p>\n
\nGli utenti possono facilmente accedere \/ disconnettersi dall’app PrestaShop Progressive Web tramite questa opzione.<\/p>\nSchermata delle categorie 3.3:
<\/a><\/h3>\n
\nLe categorie su Progressive Web App (PWA) per PrestaShop possono essere visualizzate sia in visualizzazione elenco che griglia.<\/p>\n
\nQuesta opzione consente agli acquirenti online di scegliere l’ordinamento per restringere la ricerca e ottenere facilmente il prodotto desiderato.<\/p>\n
\nL’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.<\/p>\nSchermata del prodotto 3.4:<\/h3>\n
<\/a>stato dell’inventario. Contiene le seguenti altre opzioni:<\/p>\n
\nLe informazioni complete sul prodotto disponibili nell’inventario verranno visualizzate qui.<\/p>\n
\nGli utenti possono leggere la breve descrizione del tuo prodotto per prendere rapidamente una decisione sull’acquisto.<\/p>\n
\nTutte le opzioni relative al prodotto come dimensioni, colore, ecc. Sono visualizzate qui.<\/p>\n
\nQuesto pulsante consente agli utenti di aggiungere il prodotto al carrello. Gli utenti possono elaborare ulteriormente il carrello per l’acquisto.<\/p>\n
\nL’opzione di condivisione per il prodotto consente agli utenti di condividere il prodotto su pi\u00f9 canali social.<\/p>\nSchermata di accesso 3.5<\/h3>\n
<\/a>Offre varie opzioni di accesso con un solo tocco e rende il processo di accesso \/ registrazione pi\u00f9 semplice:<\/p>\n
\nGli utenti dell’app possono autenticarsi e accedere facilmente alle app PWA utilizzando le loro precedenti credenziali di accesso e-mail.<\/p>\n
\nTutti 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.<\/p>\n
\nGli utenti possono accedere all’app PWA utilizzando le credenziali dell’account Facebook.<\/p>\n
\nGli utenti possono accedere all’app Web progressiva (PWA) utilizzando le credenziali dell’account Google.<\/p>\nSchermata del carrello acquisti 3.6:<\/h3>\n
<\/a>quantit\u00e0, prezzo totale e costi di spedizione. Questa schermata ha le seguenti opzioni:<\/p>\n
\nQuesta opzione consente agli utenti di utilizzare coupon del sito Web e ottenere offerte di sconto.<\/p>\n
\nGli 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\u00e0 di prodotto o nuova aggiunta.<\/p>\n
\nGli utenti dell’app PWA possono persino aggiornare la quantit\u00e0 del prodotto con l’opzione “Aggiorna quantit\u00e0”.<\/p>\n
\nGli utenti dell’app possono semplicemente rimuovere il prodotto dal carrello semplicemente toccando l’opzione “Rimuovi”.<\/p>\n
\nGli utenti possono lasciare il carrello per sfogliare pi\u00f9 prodotti sulla tua app web progressiva.<\/p>\n
\nGli utenti dell’app PWA possono procedere ulteriormente alle schermate di pagamento e pagamento semplicemente toccando l’opzione “Continua per il pagamento”.<\/p>\n3.7 Checkout Screen<\/h3>\n