1.0 Einführung
Dieses vorgefertigte Plugin wurde von KnowBand entworfen und entwickelt, um Ihren laufenden WooCommerce-Shop in eine funktionsreiche progressive Webanwendung umzuwandeln. Sobald der E-Commerce-Shop in eine PWA-Anwendung umgewandelt wurde, wird die betreffende Person jedes Mal, wenn ein Benutzer die Shop-URL im mobilen Browser öffnet, aufgefordert, „PWA zum Startbildschirm hinzuzufügen“. Sobald die WooCommerce PWA Mobile App zum Startbildschirm des Mobilgeräts hinzugefügt wurde, kann der Benutzer den Store in der App wie jede andere Anwendung durchsuchen. Die WooCommerce PWA Mobile App ist eine Webanwendung, die eigentlich nicht auf die Veröffentlichung von Apps bei Google Play und im Apple App Store angewiesen ist. Die Benutzer können die Progressive Web App einfach zum mobilen Gerät hinzufügen und wie jede andere Anwendung verwenden.
1.1 Überzeugende Funktionen für WooCommerce PWA:
– Schnelleres Laden und schnelle Leistung – Vollständig anpassbarer Startbildschirm mit dem DIY-Editor – Alle Website-Versand- und Zahlungsmethoden werden unterstützt – Ansprechende, benutzerfreundliche Oberfläche – Keine Abhängigkeit von App-Stores – Vollständiges Branding für Ihren Shop – E-Mail- und Social-Login (Google & Facebook ) – Mehrsprachige & RTL-Unterstützung – Funktioniert im Offline-Modus – Live-Synchronisation s/w Website & App – Android- und iOS-kompatibel – Checkout auf einer Seite – Leichte Anwendung – Verwaltung von CMS-Seiten
1.2 WooCommerce PWA-Demo ansehen
Erkunden Sie die Funktionen von Modulen und PWA-Apps über die folgenden Demo-Links:
Modul-Admin-Panel: https://wcdemo1.knowband.com/pwa/wp-login.php
PWA-Demo-App: ,warhttps://wcdemo1.knowband.com/pwa/pwa-app/
Hinweis-�Kopieren Sie die URL im mobilen Browser und fügen Sie sie ein und klicken Sie auf „Zum Startbildschirm hinzufügen“.
[IMP] Hinweise für iOS:
�> iOS-Geräte bieten keine integrierte Eingabeaufforderung „Zum Startbildschirm hinzufügen“, sodass Benutzer die PWA Mobile App manuell zum Startbildschirm von iPhone oder iPad hinzufügen müssen. �> iOS unterstützt keine Web-Push-Benachrichtigungen. Daher werden die Push-Benachrichtigungen nicht auf der auf dem iPhone oder iPad installierten PWA empfangen.
[NEUES UPDATE]�WooCommerce�PWA unterstützt RTL-Sprachskripte:
Der „WooCommerce Progressive Web App“ Creator unterstützt jetzt alle weltweiten Sprachen, einschließlich RTL (von rechts nach links) wie Arabisch, Hebräisch, Persisch usw. Der Store-Administrator kann jetzt sogar RTL-Sprachen in der WooCommerce PWA Mobile App hinzufügen.
2.0 Admin-Panel-Bildschirme:
Erkunden Sie alle Einstellungen im Admin-Bereich der WooCommerce PWA Mobile App und überprüfen Sie, wie sie mit der Hilfe der folgenden detaillierten Screenshots funktionieren:
2.1 Allgemeine Einstellungen:
a) Vorschau ein-/ausblenden: Tippen Sie auf die Augen-Schaltfläche, um das Vorschautelefon im Admin-Bereich anzuzeigen/auszublenden.
b) Aktivieren/Deaktivieren: Aktivieren Sie das Modul für die PWA-Arbeit auf Mobilgeräten.
c) Anforderungsprotokoll-Berichterstellung aktivieren: Fehlerprotokoll auf Mobilgerät aktivieren.
d) Weiterleitung auf der Warenkorbseite beim Hinzufügen zum Warenkorb: Steuern Sie die Umleitung der Schaltfläche „In den Einkaufswagen“, wenn ein Benutzer auf die Schaltfläche „In den Einkaufswagen“ tippt.
e) Kurzbeschreibung anzeigen: Aktivieren und zeigen Sie eine kurze Beschreibung für das Produkt an (falls auf der Produktseite der Website hinzugefügt).
f) Zeigen Sie das Popup „Zum Startbildschirm hinzufügen“ an: Bieten Sie die Popup-Meldung „Zum Startbildschirm hinzufügen“ an und ermöglichen Sie Benutzern, die PWA-App auf den Mobilgeräten hinzuzufügen.
g) Logo aktivieren: Fügen Sie Ihr Markenlogo in die Kopfzeile der WooCommerce PWA Mobile App ein.
h) Hintergrundfarbe des Startbildschirms: Wählen und legen Sie die Farbe für den Begrüßungsbildschirm der WooCommerce Progressive Web App fest.
i) Name für PWA-App: Geben Sie den gewünschten Namen für die WooCommerce PWA App ein. Es wird angezeigt, sobald der Benutzer die App auf den Mobilgeräten hinzufügt.
j) Bild für App-Icon: Fügen Sie das App-Symbolbild im Admin-Bereich hinzu.
k) Schriftart der App auswählen: Wählen Sie die Schriftart für Ihre WooCommerce PWA Mobile App.
l) Layout für Startseite auswählen: Wählen Sie aus dem vorab hinzugefügten Startbildschirm-Layout für die WooCommerce PWA-App.
m) Farbe der App-Schaltfläche: Wählen Sie die Schaltflächenfarbe für die PWA Mobile App.
n) Farbe des App-Designs: Wählen Sie die Designfarbe für die PWA-App.
o) Hintergrundfarbe der App: Wählen Sie die Hintergrundfarbe für die PWA-App.
p) Registerkartenleiste aktivieren: Aktivieren Sie die Registerkartenleiste unten in der PWA-App für eine schnelle und einfachere Navigation.
q) Benutzerdefiniertes CSS: Geben Sie den CSS-Code ein, um das Erscheinungsbild von Webansichtsseiten der PWA-App wie Webansichtszahlung, CMS-Seiten usw. zu verbessern.
2.2 Einstellungen für Push-Benachrichtigungen
Push-Benachrichtigungen sind das beste Marketinginstrument für die PWA-App für WooCommerce. Der Store-Administrator kann die Store-Produkte und -Angebote einfach bei App-Benutzern bewerben und mehr Umsatz und Einnahmen erzielen. Geben Sie alle Details in den Push-Benachrichtigungseinstellungen ein, indem Sie ein Firebase-Projekt erstellen:
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 Nachdem das Projekt erstellt wurde, klicken Sie auf Projekteinstellungen.
Schritt 4:�Gehen Sie zu Authentifizierungsoptionen:
Schritt 5:�Finde Firebase Keys 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:Erhalten Sie weitere Details zu Firebase und fügen Sie diese in das Admin-Panel des PWA-Moduls ein.
Schritt 8:� Rufen Sie den Firebase-Serverschlüssel von der Registerkarte „Cloud-Messaging“ in den Einstellungen ab:
Schritt 9:�Fügen Sie Ihre Domain in Authentifizierung>>Anmeldung hinzu.
A) Push-Benachrichtigung über erfolgreiche Bestellung:
Aktivieren/Deaktivieren Sie die automatische Push-Benachrichtigung, die an App-Benutzer gesendet wird, wenn sie eine erfolgreiche Bestellung über die WooCommerce PWA-App aufgeben.
B) Push-Benachrichtigung zur Aktualisierung des Bestellstatus:
Aktivieren/Deaktivieren Sie die automatische Push-Benachrichtigung, die gesendet wird, wenn der Bestellstatus von der App aktualisiert wird. Die Benutzer der mobilen WooCommerce PWA-App können die Details früherer Bestellungen im Auge behalten.
C) Push-Benachrichtigung über abgebrochenen Warenkorb:
Aktivieren/Deaktivieren Sie die automatische Push-Benachrichtigung, die an Benutzer gesendet wird, die Produkte ohne erfolgreichen Kauf im Einkaufswagen verlassen. Diese Push-Benachrichtigung wird automatisch nach dem eingegebenen Zeitintervall an die Benutzer gesendet.
2.3 Verlauf der Push-Benachrichtigungen
Der vollständige Push-Benachrichtigungsverlauf von erfolgreich gesendeten Push-Benachrichtigungen wird hier angezeigt. Der Store-Administrator kann von hier aus zuvor gesendete Push-Benachrichtigungen verfolgen.
A) Benachrichtigung senden:
Personalisieren und senden Sie Push-Benachrichtigungen je nach Bedarf manuell an PWA-App-Benutzer. Der Store-Administrator kann diese Benachrichtigungen selbst konfigurieren und an Benutzer der WooCommerce PWA-App senden.
2.4-Homepage-Layout:
Die WooCommerce PWA Mobile App bietet einen anpassbaren Startbildschirm, dessen Layout mit wenigen Mausklicks und Drag-Drop über das Admin-Panel gestaltet werden kann. Das attraktive Layout nach Lauffest, Verkauf, Anlass usw. kann sicherlich dazu beitragen, den Verkauf durch WooCommerce PWA Mobile Apps zu verbessern.
Fügen Sie auf dieser Registerkarte ein neues Layout hinzu oder bearbeiten Sie die zuvor hinzugefügten. Die Konfigurationseinstellungen der Startseite bieten die folgenden Elemente:
a) Top-Kategorien:�
b) Quadratisches Banner:�
c) Horizontales Schiebebanner:�
d) Gitterbanner:�
e) Countdown-Timer-Banner:�
f) Quadratische Produkte:�
g) Gleitprodukte:�
h) Netzprodukte:�
2.5 Informationsseiten:
Fügen Sie CMS-Seiten zur App hinzu und bieten Sie Benutzern der WooCommerce PWA Mobile App informative Inhalte.
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-Bildschirme:
3.1 Startbildschirm:
Der Startbildschirm der WooCommerce PWA Mobile App ist mit dem DIY-Editor vollständig anpassbar, wie oben in den Admin-Panel-Bildschirmen beschrieben. Ändern Sie das Erscheinungsbild des App-Startbildschirms jederzeit und bieten Sie ein benutzerfreundlicheres und verkaufsorientierteres Erscheinungsbild.
1. Benutzerdefiniertes Layout:
Mit verschiedenen Bannern, Schiebereglern und Produktelementen kann der Geschäftsadministrator je nach Bedarf ein dynamisches Layout erstellen.
2. Markenlogo:
Verwenden Sie Ihr Shop-Logo in der oberen Kopfzeile der WooCommerce PWA-App.
3. Einkaufswagentasche:
Das Warenkorb-Symbol in der oberen rechten Ecke des Startbildschirms ermöglicht Benutzern den Zugriff auf den Warenkorb-Bildschirm und die Überprüfung hinzugefügter Produkte.
4. Linkes Navigationsmenü:
Durchsuchen Sie die in der PWA-App angezeigten Kategorien mit dem linken Navigationsmenü.
3.2 Akkordeon-Menü (Navigationsleiste):
Die WooCommerce PWA Mobile Apps verfügen über eine nahtlose und korrekte Kategorisierung. Die Benutzer können relevante Kategorien im linken Navigationsmenü finden und Produkte durchsuchen. Im Menü können auch verschiedene CMS-Seiten hinzugefügt werden, die relevante Inhalte in der App anbieten.
1. Mein Konto
Die Option Mein Konto enthält alle persönlichen Informationen des Benutzers, einschließlich Versand und Bestellung. Die Käufer der WooCommerce Progressive Web App können die gespeicherten Informationen anzeigen und aktualisieren.
2. Kategorien
Die im linken Navigationsmenü der WooCommerce Progressive Web App angezeigten Kategorien sind die gleichen wie im E-Commerce-Shop verfügbar.
3. CMS-Seiten
Von hier aus können Sie auf verschiedene CMS-Seiten wie „Über uns“, „Kontakt“, „Allgemeine Geschäftsbedingungen“ usw. zugreifen. Diese Informationsseiten können über das Admin-Panel der Erweiterung hinzugefügt werden.
4. Sprache(n)
Die Sprachoption ermöglicht es PWA-App-Benutzern, die Web-App in ihrer gewünschten Sprache anzuzeigen.
5. Währung(en)
Alle verfügbaren Währungen auf Ihrer Website werden hier in der WooCommerce PWA-App angezeigt.
6. Anmelden/Abmelden
Benutzer können sich über diese Option einfach bei der WooCommerce PWA-App an- und abmelden.
3.3 Kategoriebildschirm:
Übersichtliche Kategoriebildschirme mit Listen- und Rasteransicht ermöglichen es den Benutzern, aus einer bestimmten Kategorie auszuwählen, was für sie am besten ist. Das gesamte Ladeninventar bleibt mit der WooCommerce PWA Mobile App synchronisiert und neue Ergänzungen und Änderungen werden sogar in Echtzeit aktualisiert.
1. Listen- und Rasteransicht:
Die Kategorien in der PWA-App für WooCommerce können sowohl in der Listen- als auch in der Rasteransicht durchsucht werden.
2. Produktsortierung:
Die Sortieroption ermöglicht es Online-Shoppern, die Produkte in der gewünschten Sortierreihenfolge einzugrenzen und das richtige zu finden.
3. Produktfilter:
Die WooCommerce PWA Mobile App bietet die Möglichkeit, Produkte zu filtern, um die Produktsuche zu vereinfachen. Online-Shopper können die gewünschten Produkte unter Kategorien finden, indem sie Filter für verschiedene Attribute wie Größe, Farbe, Preis usw. verwenden.
3.4 Produktbildschirm:
Der Produktbildschirm der WooCommerce Progressive Web App ist so einfach und faszinierend wie es nur geht. Mit allen notwendigen Optionen und Informationen über das Produkt wird es für Benutzer zu einer Sache von Minuten, sich über das Produkt sicher zu sein
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 WooCommerce PWA Mobile App bietet One-Tap-Social-Login-Optionen und macht den Anmelde-/Registrierungsprozess nahtloser. Die WooCommerce Progressive Web App bietet Google- und Facebook-Login.
1. Anmelden:
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 WooCommerce 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 anmelden:
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 Google-Kontoanmeldeinformationen bei der PWA-App anmelden.
3.6 Einkaufswagenbildschirm:
Der Warenkorb-Bildschirm der WooCommerce PWA Mobile App zeigt alle Produkte an, die dem Warenkorb hinzugefügt wurden. Die App-Benutzer können den Produktnamen, die Menge, den Gesamtpreis und die Versandkosten anzeigen. Dieser Bildschirm hat die folgenden Optionen:
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 Progressive Web App für WooCommerce hat eine vereinfachte Ein-Bildschirm-Kasse mit nur relevanten Informationen. Die App-Benutzer können vollständige Checkout-Details wie Versanddetails, Rechnungsdetails, Bestellübersicht, Bestellkommentar, Zahlungsübersicht anzeigen.
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. Versandmethoden:
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.
5. Zahlungszusammenfassung:
Dieser Abschnitt zeigt die vollständigen Zahlungsdetails für den Kauf an.
6. 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:
Der Zahlungsbildschirm der WooCommerce PWA-App enthält alle im Geschäft verfügbaren Web-View-Zahlungen. Online-Käufer können ähnliche Zahlungserfahrungen sowohl auf Websites als auch in Apps finden.
3.9 Mein Konto-Bildschirm
Mein Kontobildschirm der WooCommerce PWA Mobile App ermöglicht es Online-Käufern, ihre vollständigen Details anzuzeigen, die in der Progressive Web App gespeichert sind. Dieser Bildschirm zeigt auch eine Liste früherer App-Bestellungen an.
1. Persönliche Daten:
Benutzer können ihre vorab gespeicherten persönlichen Daten in der PWA Mobile App 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.91 Auftragsdetailbildschirm
Der Bestelldetails-Bildschirm der WooCommerce Progressive Web App bietet vollständige Details zu bestimmten Bestellungen aus der PWA-App. Benutzer können auf einfache Weise die Lieferadresse, die Produktübersicht, die Versand- und Zahlungsmethode sowie die Gesamtkostenübersicht usw. anzeigen. Es bietet sogar die Möglichkeit, den Status der Bestellung und Lieferung zu verfolgen.