Magento 2 PWA Mobile App – User Manual


1.0 Einführung

Wenn Sie in der E-Commerce-Einzelhandelsbranche tätig sind, müssen Sie auf das Wort PWA (Progressive Web App) gestoßen sein. Wenn ja, müssen Sie sich auch der Funktionen bewusst sein, die sie als Einkaufsanwendung bieten. Falls nicht, sind Sie am richtigen Ort gelandet. Mit der stetig wachsenden Nutzung von Shopping-Apps (sowohl native als auch PWA) verlagern Online-Shops die PWA Mobile App-Entwicklung für ihre Unternehmen. Das Starten einer Progressive Web App ist heutzutage eine einfachere und kostengünstigere Aufgabe. KnowBand hat die Magento 2 PWA Mobile App gestartet, ein vollständiges No-Code- und automatisiertes Tool zum Starten einer Progressive Web App. Mit einfachen Worten, wenn ein Benutzer Ihre Geschäfts-URL im mobilen Browser öffnet, erhält er die Meldung "Zum Startbildschirm hinzufügen". Die Magento 2 Progressive Web App wird wie jede andere App auf dem Gerät des Benutzers hinzugefügt, und der Online-Kauf kann unterwegs erfolgen.

1.1 Demo-App anzeigen:

Entdecken Sie die Progressive Web App-Demo für Magento 2 und werfen Sie einen Blick darauf, wie Ihre endgültigen Apps aussehen und funktionieren werden:

Demo Store URL:https://ma2demo.knowband.com/pwa/manager/
PWA App URL:https://ma2demo.knowband.com/pwa/pwa-app/

2.0 Admin Panel-Bildschirme:

Mit dem benutzerfreundlichen Admin-Panel-Backend kann der Store-Administrator das Erscheinungsbild und die Funktionsweise der PWA Mobile-Anwendung konfigurieren und anpassen. Mit nur wenigen Klicks und Mausklicks können Sie Änderungen an den Magento 2 Progressive Web Apps vornehmen. Lassen Sie uns einen detaillierten Überblick über die Bildschirme des Admin-Panels geben:

Allgemeine 2.1-Einstellungen:

Allgemein-Einstellungen

a) Aktivieren Sie die Erweiterung:?Enable?Magento 2?PWA module to make web app work on the users’ smartphones.

b) Auf Warenkorbseite umleiten, wenn zum Warenkorb hinzugefügt wird:?Enable to re-direct users to shopping cart or disable to keep them on the product screen.

c) Kurzbeschreibung anzeigen:?Enable to add & display a short description on the product screen of Progressive Web App.

d) Aktivieren Sie das Anforderungsprotokoll-Reporting: Aktivieren Sie diese Registerkarte, um die Protokolldatei in der PWA Mobile App zu aktivieren. Diese Protokolldatei kann verwendet werden, um abnormales Verhalten der progressiven Webanwendung zu korrigieren.

e) App-Vorschau anzeigen: Aktivieren Sie diese Option, um im Admin-Bereich ein Vorschau-Telefon hinzuzufügen. Alle Änderungen an Farbe, Schriftart und Startbildschirm werden im Echtzeit-Vorschau-Telefon angezeigt.

f) Aktivieren Sie die Registerkartenleiste: Fügen Sie der Magento 2 PWA Mobile App eine untere Registerkartenleiste hinzu.

g) Wählen Sie das Layout für die Startseite:?Choose desired layouts from the added ones and improve look and feel of app.

Allgemeine Einstellungen-2

h) Bild für App-Symbol:?Upload Magento 2 PWA app icon on your own and change the same as well if required.

i) Name für PWA App:?Enter the name of the Magento 2 Progressive Web App.

j) Wählen Sie Schriftart für PWA-App:?Choose the font of your PWA app for Magento 2.

k) Farbe der App-Schaltfläche: Wählen Sie die Tastenfarbe für Ihre PWA Mobile App.

l) Textfarbe der App-Schaltfläche: Wählen Sie die Textfarbe der Schaltfläche für Ihr Magento 2

m) Farbe des App-Themas: Wählen Sie die Themenfarbe (Kopfzeile) Ihrer Webanwendung.

n) AppWählen Sie die Hintergrundfarbe der progressiven Webanwendung.

o) Hintergrundfarbe des Begrüßungsbildschirms: Wählen Sie die richtige Farboption für den Hintergrund des Begrüßungsbildschirms der PWA-App.

Allgemeine Einstellungen-3

p) Deaktivierte Versandmethoden: Wählen Sie Versandmethoden aus, deren Verwendung in der mobilen Magento 2 PWA-App eingeschränkt werden soll.

q) Logo aktivieren und hochladen: Fügen Sie das Logo Ihres Shops hinzu, das in der Kopfzeile der PWA Mobile-App angezeigt werden soll.

2.2 Push-Benachrichtigungseinstellungen:

Die Magento 2 Progressive Web App bietet unbegrenzte Push-Benachrichtigungen für den Markt und bewirbt Geschäfte und Produkte. Der Store-Administrator erhält ein Leben lang Push-Benachrichtigungen ohne zusätzliche Kosten.

Mitteilungen

Für die verschiedenen Felder auf dieser Registerkarte muss ein Firebase-Konto eingerichtet werden. So können Sie eine festlegen:

Wie richte ich ein Firebase-Konto ein?

Schritt 1: Melden Sie sich bei Google Firebase an

Firebase

Schritt 2: Neues Projekt erstellen Wenn Sie auf Projekt hinzufügen klicken, wird das folgende Dialogfeld angezeigt:

create-Projekt
Das Erstellen des Projekts dauert einige Sekunden. Sobald das Projekt fertig ist, klicken Sie auf Weiter.

Projekt fortsetzen

Schritt 3: Projekteinstellungen verwalten Klicken Sie nach dem Erstellen des Projekts auf Projekteinstellungen.

Projekt Einstellungen

Schritt 4: Gehen Sie zu Authentifizierungsoptionen:

Authentifizierungsoptionen
Schritt 5: Suchen nach Firebase-Schlüsseln Klicken Sie in den Projekteinstellungen auf Cloud-Messaging-Einstellungen. Von hier aus können Sie den Serverschlüssel direkt abrufen.

Feuerbasis-Schlüssel
Schritt 6: Fügen Sie Ihre Web-App zu Firebase hinzu

Web-App-to-Firebase

Web-App-to-Firebase

Schritt 7: Holen Sie sich andere Details zur Firebase und fügen Sie diese in das PWA-Modul-Admin-Panel ein.

Firebase-Details

Schritt 8: Rufen Sie den Firebase-Serverschlüssel von der Registerkarte Cloud Messaging in den Einstellungen ab:

Feuerbasis-Schlüssel

Schritt 9: Fügen Sie Ihre Domain in Authentifizierung >> Anmeldung hinzu.

Firebase-Server-Schlüssel

Firebase-Server-Schlüssel

2.21 Automatisierte Push-Benachrichtigungen:

Der Store-Administrator kann das automatische Senden von Benachrichtigungen für die folgenden Fälle planen:

Push-Benachrichtigungen-2

a) Neue Auftragseinstellungen:?Whenever any new order is placed from the Magento 2 PWA Mobile App.

b) Einstellungen zur Änderung des Auftragsstatus: Immer wenn der Lieferstatus einer Bestellung geändert / aktualisiert wird.

c) Einstellungen für verlassene Einkaufswagen: Immer wenn ein Benutzer das Produkt im Warenkorb lässt und die Progressive Web App verlässt.

2.22 Manuelle Push-Benachrichtigung:

Benachrichtigung senden

Wie im obigen Schnappschuss gezeigt, kann der Store-Administrator manuelle Push-Benachrichtigungen personalisieren und an Benutzer der PWA Mobile App senden. Die Nachricht, das Bild, der angebotene Rabatt und der Weiterleitungslink können hinzugefügt / bearbeitet werden, um die Effizienz der Benachrichtigung zu verbessern und mehr Umsatz zu erzielen.

2.3-Homepage-Layout:

Der Magento 2 PWA Mobile App Builder bietet ein vollständig anpassbares DIY-Editorfeld zum Anpassen und Konfigurieren des Erscheinungsbilds von Progressive Web Application. Je nach bevorstehenden Festivals und Anlässen können dem Admin-Bereich verschiedene neue Layouts hinzugefügt werden.

Homepage-Layout

Startbildschirm-Layout-3

2.31 Top-Kategorien:

Top-Kategorien

2.32 Quadratisches Banner:

Quadrat-Banner

2.33 Schiebebanner:

Schiebebanner

2.34 Gitterbanner:

Raster-Banner

2.35 Countdown-Timer-Banner

Countdown-Timer-Banner

2.36 Quadratische Produkte:

quadratische Produkte

2.37 Gleitprodukte:

Schiebeprodukte

2.38 Netzprodukte:

Gitterprodukte

Wie erhalte ich Details zur Facebook-App?

Die Facebook-App kann mit den folgenden Schritten erstellt werden: –

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

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

Add-New-App

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

create-app-id

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

create-app-id

Schritt 7:?Click on “Setting” tab.

fb-app-einstellung

Schritt 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

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

Add-Plattform
Schritt 15:
Und wählen Sie Website als Plattform.

Plattform wählen

Schritt 16:?Now Enter your site URL.

enter-website-url
Schritt 17 & 18:?Click on “Products+” and select Facebook login.

Facebook Login
Schritt 19:?Select web as the platform for the app.

Plattform wählen

Schritt 20:?Now click on save.

Facebook-App-ID
Schritt 21 & 22:Klicken Sie auf Einstellungen und fügen Sie gültige OAuth-Umleitungs-URIs hinzu. Gültige OAuth Redirect-URIs: https://example.com/pwa-app/login

Weiterleitungs-URL

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

App-Überprüfung
Letzter Schritt:?Copy the App ID and App Secret and paste it into the fields provided in the module.

letzter Schritt

Wie erhalte ich Google App-Details?

  • Gehen Sie zur Google Developers Console (https://console.developers.google.com/project) oder klicken Sie auf den Link oben rechts auf der jeweiligen Registerkarte auf der Modulkonfigurationsseite.
  • Klicken Sie nun auf
  • Geben Sie einen Namen für Ihr Projekt ein und fahren Sie mit dem nächsten Schritt fort.
  • Klicken Sie nun im linken Menü auf APIs und auth-> Credentials (siehe unten).

Google-App-ID

  • Klicken Sie im rechten Bereich des Bildschirms auf die Schaltfläche Neue Client-ID erstellen.
  • Möglicherweise müssen Sie das Formular für den Zustimmungsbildschirm ausfüllen, bevor Sie fortfahren können. Dazu müssen Sie im linken Menü auf Zustimmungsbildschirm klicken (siehe Abbildung oben).
  • Füllen Sie das Popup-Formular mit den folgenden Angaben aus:

Anwendungstyp:?Web Application.
Autorisierte JavaScript-Ursprünge:?Your store domain name (http://www.yourstore.com).
Autorisierter Weiterleitungs-URI oder URI der Loginizer-Umleitungsseite:
https://example.com/pwa-app/login

Google-App-ID

  • Klicken Sie nun auf die Schaltfläche Client-ID erstellen, um Ihre Client-ID und Ihren geheimen Client-Schlüssel abzurufen.
  • Jetzt können Sie das Kundengeheimnis und die Kunden-ID verwenden, damit sich Ihre Kunden mit ihrem Google-Konto in Ihrem Geschäft anmelden können.

3.0 Front-End-PWA-App-Bildschirme:

Werfen Sie einen kurzen Blick auf nahtlos gestaltete Bildschirme der Progressive Web App für Magento 2:

3.1-Startbildschirm:

Home-Bildschirm

Der Startbildschirm der Magento 2 Progressive Web App kann über das Admin-Panel des Moduls vollständig angepasst werden. Sie können das Layout von App-Bildschirmen nach Ihren Wünschen gestalten. Benutzerdefinierte Layouts können im Admin-Bereich basierend auf Ereignissen, Festivals, Anlässen usw. entworfen und bei Bedarf verwendet werden.

1. Dynamisches Layout:

Mithilfe verschiedener Gestaltungselemente (Banner, Schieberegler, Kategorien usw.) kann der Geschäftsadministrator je nach Bedarf ein dynamisches Layout erstellen.

2. Store Logo:
Fügen Sie das Store-Logo in die Kopfzeile der PWA-App ein.

3. Einkaufswagen:
Über das Warenkorbsymbol in der oberen rechten Ecke des Startbildschirms können Benutzer den Warenkorbbildschirm einschalten.

4. Navigationsmenü:
Durchsuchen Sie die Kategorien in den Apps mit dem linken Navigationsmenü auf dem Startbildschirm.

3.2 Linkes Navigationsmenü:

Die Magento 2 PWA Mobile Apps bieten eine nahtlose Kategorisierung von Produkten. Die Kategorien in der PWA Mobile App entsprechen denen auf der Website. Online-Käufer können problemlos Produkte aus mehreren Kategorien durchsuchen. Über das Admin-Panel können dem linken Navigationsmenü auch verschiedene CMS-Seiten hinzugefügt werden.

Navigationsleiste-473x1024

1. Mein Konto:
Die Option Mein Konto enthält alle persönlichen Benutzer-, Versand- und Bestellinformationen. Die PWA-App-Käufer können alle gespeicherten Daten anzeigen und diese ebenfalls aktualisieren.

2. Kategorien
Die im linken Navigationsmenü der PWA-App angezeigten Kategorien sind dieselben wie auf Ihrer Website.

3. CMS-Seiten:
Verschiedene CMS-Seiten wie Über uns, Kontakt, Allgemeine Geschäftsbedingungen usw. können von hier aus aufgerufen werden.

4. Sprachen)
Mit der Sprachoption können PWA-App-Benutzer die Web-App in der gewünschten Sprache anzeigen. Alle verfügbaren Sprachen werden nur unter dieser Option angezeigt.

5. Währung (en)
Alle auf Ihrer Website verfügbaren Währungen werden hier auf angezeigt

6. Einloggen Ausloggen
Benutzer können sich einfach von / abmelden

3.3-Kategoriebildschirm:

Kategorie-Bildschirm

1. Mehrere Ansichten:
Die Kategorien auf PWA App für

2. Sortieren:
Mit dieser Option können die Online-Käufer die Sortierreihenfolge auswählen, um die Suche einzugrenzen und das gewünschte Produkt mühelos zu erhalten.

3. Filter:
Die Option zum Filtern von Produkten vereinfacht die Produktsuche. Benutzer können alle Produkte unter Kategorien anhand verschiedener Attribute wie Größe, Farbe, Preis usw. filtern.

3.4-Produktbildschirm:

Der Produktbildschirm der Magento 2 Progressive Web App enthält alle erforderlichen Produktinformationen wie in Ihrem Geschäft. Von mehreren Produktbildern bis hin zu kurzen und langen Beschreibungen hilft es dem Benutzer, sich für den Kauf zu entscheiden. Die Produktverfügbarkeit wird basierend auf dem Bestandsstatus als "Auf Lager" oder "Nicht auf Lager" angezeigt.

Produkt-Bildschirm-473x1024

1. Produktinfo & Pflege
Die vollständigen Produktinformationen, wie sie im Inventar verfügbar sind, werden hier angezeigt.

2. kurze Beschreibung
Benutzer können die kurze Beschreibung Ihres Produkts lesen, um sich schnell über den Kauf zu entscheiden.

3. Produktoptionen:
Hier werden alle produktbezogenen Optionen wie Größe, Farbe usw. angezeigt.

5. In den Warenkorb legen:
Mit dieser Schaltfläche können Benutzer Produkte in den Warenkorb legen. Die Benutzer können den Warenkorb für den Kauf weiter bearbeiten.

6. Produkt-Social-Sharing:
Mit der Freigabeoption für das Produkt können Benutzer Produkte auf mehreren sozialen Kanälen freigeben.

3.5-Anmeldebildschirm

Login-Bildschirm-473x1024

Die Magento 2 Progressive Web App bietet schnelle Anmeldeoptionen mit einem Fingertipp und vereinfacht den Anmelde- / Registrierungsprozess: – E-Mail-Anmeldung – Google-Anmeldung – Facebook-Anmeldung

1. Anmeldung
Die App-Benutzer können sich mit ihren vorherigen E-Mail-Anmeldeinformationen einfach bei PWA-Apps authentifizieren und anmelden.

2. Anmelden
Alle neuen App-Benutzer können sich im Store anmelden und ihr Konto im Store erstellen

3. Mit Facebook einloggen
Die Benutzer können sich mit ihren Facebook-Kontoanmeldeinformationen bei der PWA-App anmelden.

4. Mit Google+ anmelden
Die Benutzer können sich mit ihren Anmeldeinformationen für das Google-Konto bei der PWA-App anmelden.

3.6-Warenkorb-Bildschirm:

In der Einkaufstasche der Magento 2 PWA-Apps werden alle hinzugefügten Produkte zusammen mit der Menge und dem zu zahlenden Preis angezeigt. Die App-Benutzer können vor dem Kauf auch Produktdetails anzeigen, um sicherzugehen.

Warenkorb-Bildschirm-473x1024

1. Gutschein einlösen:
Mit dieser Option können Benutzer Website-Gutscheine verwenden und Rabattangebote erhalten.

2. Gesamtproduktpreis:
Die Benutzer können die vollständigen Kosten ihrer Einkaufstasche anzeigen, bevor sie fortfahren. Es wird automatisch entsprechend jeder Aktualisierung mit Produktmenge oder Neuzugang aktualisiert.

3. Produktmenge aktualisieren:
Die Benutzer der PWA-App können die Produktmenge sogar mit der Option "Menge aktualisieren" aktualisieren.

4. Produkt entfernen:
Die App-Benutzer können das Produkt einfach aus dem Warenkorb entfernen, indem sie einfach auf die Option "Entfernen" tippen.

5. Weiter einkaufen:
Die App-Benutzer können den Warenkorb verlassen, um weitere Produkte in Ihrer App zu durchsuchen.

6. Weiter zur Kasse:
Benutzer der PWA-App können weiter zu den Checkout- und Zahlungsbildschirmen wechseln, indem sie auf die Option "Weiter zur Kasse" tippen.

3.7 Checkout-Bildschirm:

Die PWA Mobile-Apps für Magento 2 verfügen über eine übersichtliche Kasse mit nur einem Bildschirm, für die nur relevante und erforderliche Felder erforderlich sind. App-Benutzer erhalten einen vollständigen Überblick über die Bestellung, bevor sie die Zahlung tatsächlich ausführen, z. B. Versanddetails, Rechnungsdetails, Bestellübersicht, Bestellkommentar, Zahlung

Zahlungsbildschirm-473x1024

1. Versand- und Rechnungsdetails
Dieser Bildschirm enthält Details zu den vom Benutzer gespeicherten Versand- und Rechnungsadressen. Der Benutzer kann bei Bedarf auch die neue Lieferadresse bearbeiten / speichern.

2. Bestellübersicht
Die App-Benutzer können die Produktdetails anzeigen, bevor sie die Zahlung vornehmen.

3. Versandarten
Alle verfügbaren Versandarten werden hier angezeigt. Benutzer können diejenige auswählen, die ihren Anforderungen entspricht.

4. Kommentar bestellen
Benutzer können auch Kommentare zu ihrer Bestellung hinzufügen, die sichtbar sind, um den Administrator auf der Bestellwebseite im Backend zu speichern.

6. Zahlungsübersicht
In diesem Abschnitt werden die vollständigen Details zur Ausfallzahlung angezeigt, die mit dem Kauf verbunden sind.

7. Weiter zur Zahlung
Die Benutzer der PWA-App werden nach dem Tippen auf die Schaltfläche "Weiter zur Zahlung" zum Zahlungsbildschirm weitergeleitet.

3.8-Zahlungsbildschirm:

Die Magento 2 PWA App bringt alle Zahlungen für die Webansicht (Website) in die App. Die App-Benutzer finden hier dieselben Zahlungsoptionen wie in den Anwendungen. Der Zahlungsbildschirm der Magento 2 Progressive Web App ist vollständig für die App-Ansicht optimiert.

Zahlungsbildschirm-473x1024

3.9 Bildschirm "Mein Konto":

Mein-Konto-Bildschirm-473x1024

Mein Kontobildschirm der Magento 2 PWA-App bietet alle Benutzerdetails, die in der Progressive Web App verfügbar sind. Die Online-Käufer können die persönlichen Daten, die Lieferadresse, die Bestelldaten usw. anzeigen.

1. Persönliche Daten
Benutzer können auch ihre vorab gespeicherten Profildetails anzeigen und aktualisieren.

2. Lieferadresse (n)
Die App-Benutzer können die vollständige Liste der vorgespeicherten Versandadressen in der PWA-App anzeigen.

3. Bestelldetails
Die App-Benutzer können die vollständige Liste der zuvor aufgegebenen Bestellungen über die PWA-App und deren Details anzeigen.

4. Nachbestellungsfunktion
Auf dem Bildschirm Mein Konto der PWA-App befindet sich eine Schaltfläche zum direkten Nachbestellen. Alle vorherigen Produkte unter dieser Bestellung werden mit nur einem Knopf in den Warenkorb gelegt.

3.10-Auftragsdetailbildschirm

Die Magento 2 Progressive Web App zeigt vollständige Bestelldetails früherer App-Bestellungen an. Dieser Bildschirm enthält Bestelldetails, Statusverlauf, Versand- und Rechnungsadressen usw. für jede Bestellung, die über die Magento 2 PWA-App aufgegeben wird. Die App-Benutzer können schnell die gesamte Bestellübersicht anzeigen und den Lieferstatus verfolgen.

Mein-Konto-Bildschirm-473x1024

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 *