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 Fähigkeit bewusst sein, die sie als Einkaufsanwendung bieten. Falls nicht, sind Sie an der richtigen Stelle gelandet. Mit der ständig wachsenden Nutzung von Shopping-Apps (sowohl native als auch PWA) stellen Online-Shops für ihre Unternehmen auf die Entwicklung mobiler PWA-Apps um. Das Starten einer Progressive Web App ist heutzutage eine einfachere und erschwinglichere 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 Shop-URL im mobilen Browser öffnet, erhält er eine Aufforderungsmeldung „Zum Startbildschirm hinzufügen“. Die Magento 2 Progressive Web App wird wie jede andere App auf dem Gerät des Benutzers hinzugefügt, und Online-Einkäufe können unterwegs getätigt werden.
1.1 Demo-App ansehen:
Erkunden 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:
URL des Demo-Shops:�https://ma2demo.knowband.com/pwa/manager/
PWA-App-URL:�https://ma2demo.knowband.com/pwa/pwa-app/
[IMP] Hinweise für Magento 2 iOS PWA:
�> iOS-Geräte bieten keine integrierte Aufforderung „Zum Startbildschirm hinzufügen“. Benutzer müssen die Magento 2 PWA Mobile App manuell zum Startbildschirm von iPhone oder iPad hinzufügen. �> iOS unterstützt keine Web-Push-Benachrichtigungen. Die Push-Benachrichtigungen können nur über das Admin-Panel von Magento 2 PWA Mobile App Builder an das Android-Gerät gesendet werden.
[NEUES UPDATE] Magento 2�PWA unterstützt RTL-Sprachen:
Der Magento 2 PWA Mobile App Creator unterstützt jetzt alle weltweiten Sprachen einschließlich RTL (Right To Left). Die PWA Mobile App für Magento 2 kann Sprachen wie Arabisch, Hebräisch, Persisch usw. haben. Der Ladenbesitzer kann alle Website-Sprachen auf der Progressive Web App anbieten und sogar neue hinzufügen.
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. Es ist nur eine Sache von ein paar Klicks und Mausklicks, um Änderungen in den Magento 2 Progressive Web Apps vorzunehmen. Lassen Sie uns einen detaillierten Überblick über die Bildschirme des Admin-Panels geben:
2.1 Allgemeine Einstellungen:
a) Aktivieren Sie die Erweiterung:�Aktivieren Sie das Magento 2�PWA-Modul, damit die Web-App auf den Smartphones der Benutzer funktioniert.
b) Weiterleitung auf der Warenkorbseite beim Hinzufügen zum Warenkorb:�Aktivieren, um Benutzer zum Einkaufswagen umzuleiten, oder deaktivieren, um sie auf dem Produktbildschirm zu belassen.
c) Kurzbeschreibung anzeigen:�Ermöglichen das Hinzufügen und Anzeigen einer kurzen Beschreibung auf dem Produktbildschirm der Progressive Web App.
d) Anforderungsprotokoll-Berichterstellung aktivieren: Aktivieren Sie diese Registerkarte, um die Protokolldatei in der PWA Mobile App zu aktivieren. Diese Protokolldatei kann verwendet werden, um abnormales Verhalten von Progressive Web Application zu korrigieren.
e) App-Vorschau anzeigen: Aktivieren Sie diese Option, um ein Vorschautelefon im Admin-Bereich hinzuzufügen. Alle Änderungen an Farbe, Schriftart und Startbildschirm werden in der Echtzeit-Vorschau des Telefons angezeigt.
f) Registerkartenleiste aktivieren: Fügen Sie der Magento 2 PWA Mobile App eine untere Registerkartenleiste hinzu.
g) Layout für Startseite auswählen:�Wählen Sie die gewünschten Layouts aus den hinzugefügten aus und verbessern Sie das Erscheinungsbild der App.
h) Bild für App-Icon:�Laden Sie das Magento 2 PWA-App-Symbol selbst hoch und ändern Sie es bei Bedarf auch.
i) Name für die PWA-App:�Geben Sie den Namen der Magento 2 Progressive Web App ein.
j) Schriftart für PWA-App auswählen:�Wählen Sie die Schriftart Ihrer PWA-App für Magento 2.
k) Farbe der App-Schaltfläche: Wählen Sie die Schaltflächenfarbe für Ihre PWA Mobile App.
l) Textfarbe der App-Schaltfläche: Wählen Sie die Textfarbe der Schaltfläche für Ihre Magento 2�Progressive Web App.
m) Farbe des App-Designs: Wählen Sie die Designfarbe (Header) Ihrer Webanwendung.
n) App� Hintergrundfarbe:�Wählen Sie die Hintergrundfarbe der Progressive Web Application.
o) Hintergrundfarbe des Startbildschirms: Wählen Sie die richtige Farboption für den Hintergrund des Begrüßungsbildschirms der PWA-App aus.
p) Deaktivierte Versandmethoden: Wählen Sie Versandmethoden aus, die von der Arbeit in der Magento 2 PWA Mobile App ausgeschlossen werden sollen.
q) Logo aktivieren & hochladen: Fügen Sie das Logobild Ihres Shops hinzu, das in der Kopfzeile der PWA Mobile-App angezeigt werden soll.
2.2 Einstellungen für Push-Benachrichtigungen:
Die Magento 2 Progressive Web App bietet unbegrenzte Push-Benachrichtigungen für den Markt und bewirbt Geschäftsangebote und Produkte. Der Store-Administrator erhält ein Leben lang Push-Benachrichtigungen ohne zusätzliche Kosten.
Die verschiedenen Felder auf dieser Einstellungsregisterkarte erfordern die Einrichtung eines Firebase-Kontos. So können Sie einen festlegen:
Wie richte ich ein Firebase-Konto ein?
Schritt 1: Melden Sie sich bei Google Firebase an
Schritt 2: Neues Projekt erstellen Wenn Sie auf Projekt hinzufügen klicken, wird das folgende Dialogfeld angezeigt:
Das Erstellen des Projekts dauert einige Sekunden. Sobald das Projekt fertig ist, klicken Sie auf Weiter.
Schritt 3: Projekteinstellungen verwalten Sobald das Projekt erstellt ist, klicken Sie auf Projekteinstellungen.
Schritt 4: Gehen Sie zu Authentifizierungsoptionen:
Schritt 5: Firebase-Schlüssel finden Klicken Sie in den Projekteinstellungen auf Cloud-Messaging-Einstellungen. Von hier aus können Sie direkt den Serverschlüssel erhalten.
Schritt 6: Fügen Sie Ihre Web-App zu Firebase hinzu
Schritt 7: Holen Sie sich weitere Firebase-bezogene Details und fügen Sie diese in das Admin-Panel des PWA-Moduls ein.
Schritt 8: Holen Sie sich den Firebase-Serverschlüssel von der Registerkarte “Cloud-Messaging” in den Einstellungen:
Schritt 9: Fügen Sie Ihre Domain in Authentifizierung>>Anmeldung hinzu.
2.21 Automatisierte Push-Benachrichtigungen:
Der Store-Administrator kann das automatische Senden von Benachrichtigungen für die folgenden Fälle planen:
a) Neue Auftragseinstellungen:�Jedes Mal, wenn eine neue Bestellung über die Magento 2 PWA Mobile App aufgegeben wird.
b) Einstellungen zum Ändern des Auftragsstatus: Wann immer der Lieferstatus einer Bestellung geändert/aktualisiert wird.
c) Einstellungen für abgebrochene Warenkörbe: Jedes Mal, wenn ein Benutzer ein Produkt im Warenkorb lässt und die Progressive Web App verlässt.
2.22 Manuelle Push-Benachrichtigung:
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 Verkäufe zu erzielen.
2.3-Homepage-Layout:
Der Magento 2 PWA Mobile App Builder bietet ein vollständig anpassbares DIY-Editor-Panel, um das Aussehen und Verhalten der progressiven Webanwendung anzupassen und zu konfigurieren. Verschiedene neue Layouts können basierend auf bevorstehenden Festivals und Anlässen zum Admin-Panel hinzugefügt werden.
2.31 Top-Kategorien:
2.32 Quadratisches Banner:
2.33 Schiebebanner:
2.34 Gitterbanner:
2.35 Countdown-Timer-Banner
2.36 Quadratische Produkte:
2.37 Gleitprodukte:
2.38 Netzprodukte:
Wie erhalte ich Details zur Facebook-App?
Die Facebook-App kann durch die folgenden Schritte erstellt werden:-
Schritt 1:�Gehen Sie zur angegebenen�URL: https://developers.facebook.com/apps/
Schritt 2:�Klicken Sie auf die Schaltfläche „Neue App hinzufügen“.
Schritt 3&4:�Geben Sie Ihren App-Namen und Ihre E-Mail-ID ein und klicken Sie dann auf die Schaltfläche „App-ID erstellen“.
Schritt 5&6:�Nachdem Sie auf „App-ID erstellen“ geklickt haben, müssen Sie eine Sicherheitsüberprüfung wie gezeigt durchlaufen:
Schritt 7:�Klicken Sie auf die Registerkarte „Einstellung“.
Schritt 8-13:In der Dropdown-Liste sind zwei Optionen verfügbar, Basic und Advanced, klicken Sie auf “Basic”. Geben Sie dann Ihre „App-Domäne“, „Kontakt-E-Mail“, „Datenschutz-URL“, „Allgemeine Geschäftsbedingungen-URL“, „Logo hinzufügen“, „Kategorie auswählen“ ein und klicken Sie auf die Schaltfläche „Änderungen speichern“. App-Domains: yourdomain.com ist� korrekt yourdomain.com/store ist� falsch www.domain.com ist� falsch
Schritt 14:�Klicken Sie nun auf „+Plattform hinzufügen“.
Schritt 15:�Und wählen Sie Website als Plattform aus.
Schritt 16:�Geben Sie jetzt Ihre Website-URL ein.
Schritt 17&18:�Klicken Sie auf „Produkte+“ und wählen Sie Facebook-Login aus.
Schritt 19:�Wählen Sie Web als Plattform für die App aus.
Schritt 20:�Klicken Sie nun auf Speichern.
Schritt 21&22:�Klicken Sie auf Einstellungen und fügen Sie gültige OAuth-Umleitungs-URIs hinzu. Gültige OAuth-Umleitungs-URIs: https://example.com/pwa-app/login
Schritt 23&24:�Klicken Sie auf „App-Rezension“. Und markieren Sie “Ihren App-Namen öffentlich machen” auf Ja.
Letzter Schritt:�Kopieren Sie die App-ID und das App-Geheimnis und fügen Sie sie in die dafür vorgesehenen Felder im Modul ein.
Wie bekomme ich Details zur Google App?
- Gehen Sie zur Google Developers Console (https://console.developers.google.com/project) oder klicken Sie auf den Link oben rechts auf der entsprechenden Registerkarte auf der Modulkonfigurationsseite.
- Klicken Sie nun links auf der Seite auf Projekt erstellen.
- 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 and auth-> Credentials, wie unten gezeigt.
- 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 Consent Screen klicken, wie im Bild oben gezeigt.
- Füllen Sie das Popup-Formular mit den folgenden Details aus:
Anwendungstyp:�Webanwendung.
Autorisierte JavaScript-Ursprünge:�Ihr Shop-Domainname (https://www.yourstore.com).
Autorisierte Umleitungs-URI oder URI der Loginizer-Umleitungsseite:
https://example.com/pwa-app/login
- Klicken Sie nun auf die Schaltfläche Client-ID erstellen, um Ihre Client-ID und Ihren geheimen Clientschlüssel zu erhalten.
- 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:
Der Startbildschirm der Magento 2 Progressive Web App ist über das Admin-Panel des Moduls vollständig anpassbar. Sie können das Layout der App-Bildschirme nach Ihren Wünschen gestalten. Benutzerdefinierte Layouts können im Admin-Bereich basierend auf Veranstaltungen, Festen, 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. Shop-Logo:
Fügen Sie das Store-Logo in der Kopfzeile der PWA-App hinzu.
3. Einkaufswagen:
Das Warenkorb-Symbol in der oberen rechten Ecke des Startbildschirms ermöglicht es Benutzern, den Warenkorb-Bildschirm einzuschalten.
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 sind dieselben wie auf der Website. Online-Käufer können problemlos Produkte aus mehreren Kategorien durchsuchen. Über das Admin-Panel können auch verschiedene CMS-Seiten zum linken Navigationsmenü hinzugefügt werden.
1. Mein Konto:
Die Option „Mein Konto“ enthält alle persönlichen Benutzer-, Versand- und Bestellinformationen. Die Käufer der PWA-App können alle gespeicherten Daten einsehen und diese auch aktualisieren.
2. Kategorien
Die im linken Navigationsmenü der PWA-App angezeigten Kategorien sind die gleichen 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. Sprache(n)
Die Sprachoption ermöglicht es PWA-App-Benutzern, die Web-App in ihrer gewünschten Sprache anzuzeigen. Alle verfügbaren Sprachen werden nur unter dieser Option angezeigt.
5. Währung(en)
Alle verfügbaren Währungen auf Ihrer Website werden hier in der Magento 2 PWA-App angezeigt.
6. Anmelden/Abmelden
Benutzer können sich über diese Option ganz einfach bei der Magento 2 PWA-App an- und abmelden.
3.3 Kategoriebildschirm:
1. Mehrere Ansichten:
Die Kategorien in der PWA-App für Magento 2 können sowohl in der Listen- als auch in der Rasteransicht angezeigt werden.
2. Sortierung:
Diese Option ermöglicht es den Online-Käufern, die Sortierreihenfolge zu wählen, um die Suche einzugrenzen und das gewünschte Produkt mit Leichtigkeit zu erhalten.
3. Filter:
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 notwendigen Produktinformationen, genau wie in Ihrem Geschäft. Von mehreren Produktbildern bis hin zu kurzen und langen Beschreibungen hilft der Benutzer, sich für den Kauf zu entscheiden. Die Produktverfügbarkeit wird basierend auf dem Bestandsstatus als „auf Lager“ oder „nicht auf Lager“ signalisiert.
1. Produktinfo & Pflege
Hier werden die vollständigen Produktinformationen, wie sie im Inventar verfügbar sind, angezeigt.
2. Kurzbeschreibung
Benutzer können die kurze Beschreibung Ihres Produkts lesen, um sich schnell über den Kauf zu entscheiden.
3. Produktoptionen:
Alle produktbezogenen Optionen wie Größe, Farbe usw. werden hier 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 weiterverarbeiten.
6. Teilen von Produkten in sozialen Netzwerken:
Die Freigabeoption für das Produkt ermöglicht es Benutzern, Produkte auf mehreren sozialen Kanälen zu teilen.
3.5-Anmeldebildschirm
Die Magento 2 Progressive Web App bietet schnelle One-Tap-Anmeldeoptionen und macht den Anmelde-/Registrierungsprozess nahtloser: – 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 über die Magento 2 PWA App anmelden und ihr Konto im Store erstellen. Das Anmeldeformular fragt nur nach den notwendigen Details, um ein Konto zu erstellen.
3. Mit Facebook einloggen
Die Benutzer können sich mit ihren Facebook-Kontoanmeldeinformationen bei der PWA-App anmelden.
4. Melden Sie sich mit Google+ an
Die Benutzer können sich mit ihren Google-Kontoanmeldeinformationen bei der PWA-App anmelden.
3.6 Einkaufswagenbildschirm:
Die Einkaufstasche der Magento 2 PWA-Apps zeigt alle hinzugefügten Produkte zusammen mit ihrer Menge und dem zu zahlenden Preis an. Die App-Benutzer können auch Produktdetails anzeigen, um sicherzugehen, bevor sie eines kaufen.
1. Gutschein beantragen:
Mit dieser Option können Benutzer Website-Gutscheine verwenden und Rabattangebote nutzen.
2. Gesamtproduktpreis:
Die Benutzer können die vollständigen Kosten ihrer Einkaufstasche anzeigen, bevor sie fortfahren. Es wird automatisch nach jeder Aktualisierung mit Produktmenge oder Neuzugängen aktualisiert.
3. Produktmenge aktualisieren:
Die Benutzer der PWA-App können sogar die Produktmenge 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. Einkauf fortsetzen:
Die App-Benutzer können den Warenkorb verlassen, um weitere Produkte in Ihrer App zu durchsuchen.
6. Weiter zur Kasse:
Die Benutzer der PWA-App können weiter zu den Kassen- und Zahlungsbildschirmen gehen, indem sie einfach auf die Option „Weiter zur Kasse“ tippen.
3.7 Checkout-Bildschirm:
Die PWA Mobile-Apps für Magento 2 verfügen über einen übersichtlichen Checkout auf einem einzigen Bildschirm, bei dem nur relevante und notwendige Felder erforderlich sind. App-Benutzer erhalten einen vollständigen Überblick über die Bestellung, bevor sie die Zahlung tatsächlich vornehmen, wie Versanddetails, Rechnungsdetails, Bestellübersicht, Bestellkommentar, Zahlungszusammenfassung.
1. Versand- und Rechnungsdetails
Dieser Bildschirm enthält Details zu den vom Benutzer gespeicherten Versand- und Rechnungsadressen. Der Benutzer kann die neue Lieferadresse bei Bedarf auch bearbeiten/speichern.
2. Bestellübersicht
Die App-Benutzer können Produktdetails anzeigen, bevor sie bezahlen.
3. Versandarten
Hier werden alle verfügbaren Versandarten angezeigt. Benutzer können diejenige auswählen, die ihren Bedürfnissen entspricht.
4. Kommentar zur Bestellung
Benutzer können auch einen beliebigen Kommentar zu ihrer Bestellung hinzufügen, der für den Shop-Administrator auf der Bestell-Webseite im Backend sichtbar ist.
6. Zahlungszusammenfassung
Dieser Abschnitt zeigt die vollständigen Zahlungsdetails für den Kauf an.
7. Fahren Sie mit der Zahlung fort
Die Benutzer der PWA-App werden zum Zahlungsbildschirm umgeleitet, nachdem sie auf die Schaltfläche „Weiter zur Zahlung“ getippt haben.
3.8 Zahlungsbildschirm:
Magento 2 PWA App bringt alle Web-View (Website)-Zahlungen in die App. Die App-Benutzer finden hier dieselben Zahlungsoptionen wie in den Anwendungen verfügbar. Der Zahlungsbildschirm der Magento 2 Progressive Web App ist vollständig für die App-Ansicht optimiert.
3.9 Mein Konto-Bildschirm:
Der Bildschirm Mein Konto 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, Lieferadresse, Bestelldetails usw. einsehen.
1. Persönliche Daten
Benutzer können auch ihre vorgespeicherten Profildetails anzeigen und aktualisieren.
2. Versandadresse(n)
Die App-Benutzer können die vollständige Liste der vorab gespeicherten Lieferadressen in der PWA-App einsehen.
3. Bestelldetails
Die App-Benutzer können die vollständige Liste der zuvor aufgegebenen Bestellungen aus der PWA-App und deren Details anzeigen.
4. Nachbestellungsfunktion
Auf dem Bildschirm „Mein Konto“ der PWA-App gibt es eine Schaltfläche zum direkten Nachbestellen. Alle vorherigen Produkte dieser Bestellung werden mit nur einem Knopfdruck 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, Liefer- 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 auch den Lieferstatus verfolgen.
