Knowband Blog | Ecommerce Modules

OpenCart Progressive Web App (PWA) – Benutzerhandbuch

Joe Parker


1.0 Einführung

Diese automatisierte OpenCart-Erweiterung wurde mit dem Motiv entwickelt, Online-Shop-Besitzern die Umwandlung ihres Shops in eine progressive Webanwendung zu erleichtern. Der E-Commerce-Shop in PWA ist eine der wichtigsten fortschrittlichen Technologien, nach denen jedes E-Commerce-Unternehmen suchen sollte. Die OpenCart PWA Mobile App ist eigentlich eine Webanwendung, die nicht auf die App Stores von Drittanbietern (Google Play und Apple App Store) angewiesen ist. Online-Käufer können ganz einfach „PWA-App zum Startbildschirm hinzufügen“ und Produkte wie jede andere Anwendung auch unterwegs kaufen.

1.1 Wie funktioniert die OpenCart Progressive Web App (PWA)?

Sobald der E-Commerce-Shop in die OpenCart PWA Mobile App konvertiert ist, werden die Benutzer jedes Mal, wenn ein Benutzer die Shop-URL im mobilen Browser öffnet, aufgefordert, „PWA zum Startbildschirm hinzufügen“. So einfach ist die Installation und Verwendung der OpenCart Progressive Web App.

1.2 Top-Funktionen zur Auswahl von OpenCart PWA:

[IMP] Hinweise für iOS PWA:

�> iOS-Geräte (iPhone, iPad usw.) bieten keine integrierte „Zum Startbildschirm hinzufügen“-Aufforderung. Daher müssen die Benutzer der PWA Mobile App die OpenCart PWA Mobile App manuell zum Startbildschirm des iPhone oder iPad hinzufügen. �> iOS unterstützt keine Web-Push-Benachrichtigungen. Daher kann der Store-Administrator die Push-Benachrichtigungen nur an das Android-Gerät senden, nicht an iOS.

[NEUES UPDATE]� OpenCart PWA unterstützt RTL-Sprachen (Arabisch, Hebräisch usw.):

Der OpenCart PWA Mobile App Creator unterstützt jetzt mehrere Sprachen, einschließlich RTL-Skripts (von rechts nach links) wie Arabisch, Hebräisch, Persisch usw. Alle Sprachen des OpenCart-Stores werden in der Progressive Web App verfügbar sein, und andere erforderliche Sprachen können ebenfalls hinzugefügt werden. Die Benutzer können die Sprache in der Progressive Web App auswählen und der gesamte App-Inhalt wird entsprechend übersetzt.

Vollständig kompatibel mit KnowBand Multi-Vendor Marketplace:

Unsere OpenCart PWA Mobile App ist kompatibel mit OpenCart Multi-Vendor Marketplace. Wandeln Sie Ihren OpenCart E-Commerce-Shop in einen vollwertigen Marktplatz um und starten Sie dafür die mobile PWA-App. Die Marktplatzverkäufer sind in Ihrer Progressive Web App verfügbar und Benutzer können sie auch einfach durchsuchen.

Hinweis: OpenCart PWA Mobile Apps sind nur kundenorientiert, dh die Benutzer können die Browse PWA-App zusammen mit Verkäufern besuchen. Es wird kein Verkäufer-Dashboard oder Management über OpenCart Progressive Web App geben. Der Administrator kann die Verkäufer über das Marketplace-Web verwalten und diese werden automatisch in der PWA Mobile App aktualisiert.

1.3 OpenCart PWA-Demo anzeigen:

 

Erkunden Sie die Funktionen von Modulen und PWA-Apps über die folgenden Demo-Links:

Modul-Admin-Panel:�https://opencartdemo.knowband.com/3.0/pwa/admin/
PWA-Demo-App: ,warhttps://opencartdemo.knowband.com/3.0/pwa/pwa-app/

(URL im mobilen Browser kopieren und einfügen und „Zum Startbildschirm hinzufügen“)

2.0 Admin-Panel-Bildschirme:

Erkunden Sie alle Einstellungen des Admin-Bereichs der OpenCart PWA Mobile App-Erweiterung zusammen mit der Funktionalität und arbeiten Sie mit den unten geteilten Snapshots:

2.1 Allgemeine Einstellungen:

a) Vorschau ein-/ausblenden: Tippen Sie auf die Augen-Schaltfläche, um das Vorschautelefon im Admin-Bereich anzuzeigen/auszublenden.
b) Stand: Aktivieren Sie das Modul für die PWA-Arbeit auf Mobilgeräten.
c) Anforderungsprotokoll-Berichterstellung aktivieren: Fehlerprotokoll auf Mobilgerät aktivieren.
d) Name für PWA-App: Geben Sie den Namen für die OpenCart PWA-App ein.
e) Layout für Startseite auswählen: Wählen Sie aus dem vorinstallierten Startbildschirm-Layout für OpenCart Progressive Web App.

f) Registerkartenleiste aktivieren: Aktivieren Sie die Registerkartenleiste unten in der OpenCart PWA-App für eine nahtlose Navigation.
g) Schriftart für PWA-App: Wählen Sie eine Schriftart für OpenCart Progressive Web App (PWA).
h) Farbe der App-Schaltfläche: Wählen Sie die Schaltflächenfarbe für die PWA Mobile App.
i) Farbe des App-Designs: Wählen Sie die Designfarbe für die PWA-App.
j) Hintergrundfarbe der App: Wählen Sie die Hintergrundfarbe für die PWA-App.
k) Farbe des App-Begrüßungsbildschirms: Wählen Sie einen Begrüßungsbildschirm für die PWA Mobile App.
l) Logo aktivieren: Fügen Sie Ihr Markenlogo in die Kopfzeile der OpenCart PWA Mobile App ein.

m) Bild für App-Icon: Fügen Sie das App-Symbolbild im Admin-Bereich der OpenCart PWA-Erweiterung hinzu.
n) 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.

2.2 Einstellungen für Push-Benachrichtigungen

Push-Benachrichtigungen sind das beste Marketinginstrument für die Progressive Web App (PWA) für OpenCart. 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 OpenCart Progressive Web App (PWA) 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 OpenCart PWA Mobile 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 Benutzer der OpenCart Progressive Web App (PWA). Der Store-Administrator kann diese Benachrichtigungen selbst konfigurieren und an Benutzer von OpenCart Progressive Web App (PWA) senden.

2.4-Homepage-Layout:

Entwerfen und speichern Sie mehrere Layouts (Verkauf, Festivals usw.) und wählen Sie einfach das richtige aus dem Admin-Panel aus, um es in der OpenCart Progressive Web App zu aktualisieren

Die OpenCart Progressive Web App (PWA) 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 OpenCart 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:

Top-Kategorien:�

Quadratisches Banner:

Horizontal verschiebbares Banner:

Gitterbanner:�

Countdown-Timer-Banner:�

Quadratische Produkte:�

Schiebeprodukte:�

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?

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

2.7 Informationsseiten:

Fügen Sie CMS-Seiten zur App hinzu und bieten Sie Benutzern der OpenCart PWA Mobile App informative Inhalte.

3.0 Front-End-PWA-App-Bildschirme:

3.1 Startbildschirm:

Der Startbildschirm der OpenCart Progressive Web App (PWA) ist mit einem 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.

Verwenden Sie Ihr Geschäftslogo in der oberen Kopfzeile der OpenCart Progressive Web App (PWA).

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 OpenCart PWA Mobile Apps werden mit einer nahtlosen und korrekten Kategorisierung geliefert. Die Benutzer können relevante Kategorien im linken Navigationsmenü finden und Produkte durchsuchen. Außerdem können verschiedene CMS-Seiten zum Menü 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 OpenCart Progressive Web App können die gespeicherten Informationen anzeigen und aktualisieren.

2. Kategorien:

Die im linken Navigationsmenü der OpenCart 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 OpenCart Progressive Web App (PWA)-App angezeigt.

6. Anmelden/Abmelden:

Benutzer können sich über diese Option einfach bei der OpenCart 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 OpenC Progressive Web App (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 OpenCart 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 OpenCart 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 OpenCart 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, das er kaufen möchte, sicher zu sein. Für das Produkt sind mehrere Bilder mit den Optionen Auf Lager und Nicht auf Lager verfügbar.

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.

4. 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.

5. 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 OpenCart PWA Mobile App bietet One-Tap-Social-Login-Optionen und macht den Anmelde-/Registrierungsprozess nahtloser. Die OpenCart 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 OpenCart 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 OpenCart 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 OpenCart 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. 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:

Der Zahlungsbildschirm der OpenCart 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

Der Bildschirm „Mein Konto“ der OpenCart 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 OpenCart Progressive Web App (PWA) 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 OpenCart Progressive Web App bietet vollständige Details zu bestimmten Bestellungen aus der PWA-App. Benutzer können auf einfache Weise Lieferadresse, Produktübersicht, Versand- und Zahlungsmethode und Gesamtkostenübersicht usw. anzeigen. Es bietet sogar die Möglichkeit, den Status von Bestellung und Lieferung zu verfolgen.