1.0 Einführung
Das schnelle Wachstum in der mCommerce-Branche hat dazu geführt, dass eine mobile E-Commerce-App dringend erforderlich ist. Das Erstellen mobiler Apps erfordert jedoch eine Menge Codierung und andere technische Details. Warum verwandeln Sie Ihre Online-Website nicht stattdessen in eine Web-App? Das Anbieten einer optimierten PrestaShop PWA-App würde das mobile Einkaufserlebnis für die Benutzer verbessern. Dieses PrestaShop PWA-App-Modul wurde entwickelt und gebaut, um Ihren Shop in eine Webanwendung zu verwandeln, die über ein benutzerfreundliches Backend-Panel verwaltet werden kann. Diese Apps bieten verschiedene erweiterte Funktionen als native Apps, wie Offline-Modus und Plattformunabhängigkeit, was sie zu einer problemlosen und nahtlosen Einkaufslösung für Benutzer macht.
1.1 Demo-App ansehen:
Sehen Sie sich vor dem Kauf der Erweiterung die Funktionsweise der Demo-App an, indem Sie die URL der PrestaShop PWA-Demo-App in Ihrem Browser öffnen.
Demo-Store-URL: https://psm.knowband.com/pwa/admin1
PWA-App-URL: ,warhttps://psm.knowband.com/pwa/pwa-app/
1.2 Hauptfunktionen der PrestaShop Progressive Web App (PWA):
- Anpassbare Benutzeroberfläche des Startbildschirms (DIY-Editor)
- Unbegrenzte Push-Benachrichtigungen (manuelle und automatisierte Benachrichtigungen)
- Zopim- und WhatsApp-Chat-Unterstützung
- Unterstützung aller Zahlungs- und Versandmethoden
- Echtzeitsynchronisation
- Automatische Bestandsaktualisierung
- Leichte App mit schnellerem Laden
- Mehrsprachige und RTL-Unterstützung
- E-Mail- und Social-Login-Optionen (Google & Facebook)
- Intuitive Benutzeroberfläche mit mehrschichtiger Navigation
- Keine Abhängigkeit von Google Play oder Apple App Store
- Komplette White-Label-Lösung
- Barrierefreiheit im Offline-Modus
- Vereinfachte Kaufabwicklung auf einer Seite
- Steuerung der CMS-Seiten (Informationsseiten).
- Präsentieren Sie verwandte Produkte
- Benutzerbewertungen anzeigen
- Eingebaute Wunschliste
- Unterstützung für Gutscheine / Gutscheine
- Unterstützung für mehrere Währungen
[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 können die Push-Benachrichtigungen nur vom Admin-Panel des PrestaShop PWA Mobile App Builder an das Android-Gerät gesendet werden.
[NEUES UPDATE] PrestaShop PWA unterstützt RTL-Sprachskripte
Der PrestaShop PWA Mobile App Creator unterstützt jetzt alle weltweiten Sprachen, einschließlich RTL (von rechts nach links) wie Arabisch, Hebräisch, Persisch usw. Der Shop-Administrator kann alle Sprachen seines Shops in die Progressive Web App bringen und sogar beliebige RTL-Sprachen hinzufügen gemäß der Anforderung. Auf der anderen Seite haben die mobilen Käufer keine Probleme beim Zugriff auf die PrestaShop PWA Mobile App in ihrer bevorzugten Sprache.
Kompatibel mit PrestaShop Multi-Vendor Marketplace
Die PrestaShop Multi-Vendor Marketplace Modul ist vollständig kompatibel mit PrestaShop PWA Mobile App. Die Progressive Web App zeigt den Verkäuferbereich mit allen Marktplatzverkäufern in derselben Anwendung an. Die Verkäuferdetails bleiben in Echtzeit mit dem Marktplatz-Web synchronisiert und werden automatisch in der PrestaShop PWA-Anwendung aktualisiert.
Hinweis: Die mobile Multivendor-PWA-App für PrestaShop ist nur kundenorientiert. Dies bedeutet, dass es kein Verkäufer-Dashboard oder Management vom App-Ende aus geben wird. Der Store-Administrator kann die Verkäufer aus dem PrestaShop Marketplace-Modul verwalten und diese werden sofort in der App aktualisiert.
2.0 Admin-Panel-Bildschirme
Die PrestaShop PWA Mobile App kann mithilfe dieser praktischen Admin-Registerkarten und -Einstellungen vollständig konfiguriert werden. Alles, was Sie tun müssen, ist, einige notwendige Klicks und Schaltflächen umzuschalten, um die Änderungen in der Progressive Web App vorzunehmen. Lassen Sie uns jeden von ihnen im Detail besprechen:
2.1 Allgemeine Einstellungen
Wie der Name schon sagt, sind diese allgemeinen Konfigurationseinstellungen für alle Arten von regelmäßigen Änderungen in Progressive Web Applications (PWA) vorgesehen. Die Optionen auf dieser Registerkarte sorgen dafür, dass die App auf den Geräten von Online-Käufern funktioniert.
a) Plugin aktivieren:�Aktivieren Sie das PrestaShop PWA-Modul, damit die App auf Mobilgeräten funktioniert.
b) Weiterleitung auf Warenkorbseite, wenn „In den Warenkorb“ gelegt wird:�Diese Funktion ermöglicht es dem Administrator, die Umleitung der Schaltfläche „In den Warenkorb“ zu steuern. Die Benutzer können zum Warenkorb weitergeleitet oder auf dem Produktbildschirm gehalten werden, wenn sie auf „In den Warenkorb“ tippen.
c) Kurzbeschreibung anzeigen:�Aktivieren Sie die Anzeige einer kurzen Produktbeschreibung auf dem Produktbildschirm der Progressive Web App (PWA).
d) Logo aktivieren: Fügen Sie das Logo Ihres Shops in die Kopfzeile der Progressive Web App (PWA) ein und präsentieren Sie Ihre Marke den Benutzern.
e) Hintergrundfarbe des Startbildschirms: Wählen Sie die richtige Farboption für den Hintergrund des Begrüßungsbildschirms der Progressive Web App (PWA).
f) Name für die PWA-App: Wählen Sie den Namen Ihrer PWA-App nach Ihrer Wahl.
g) Layout auswählen:�Wählen Sie das gewünschte Homepage-Layout für Ihre PrestaShop-App. Sie können im Backend mehrere Startbildschirm-Layouts gemäß verschiedenen Festivals und Themen erstellen und diese gemäß Ihren Geschäftsanforderungen verwenden.
h) Deaktivierte Versandmethoden:�Deaktivieren Sie Versandmethoden für die Arbeit in�Progressive Web App (PWA)�je nachdem, was Sie nicht für richtig halten. Auf der Website funktionieren sie normalerweise einwandfrei.
i) Aktivierte CMS-Seiten:�Wählen Sie die gewünschten CMS-Seiten aus, die in der PrestaShop PWA-App angezeigt werden sollen.
j) Anforderungsprotokoll-Berichterstellung aktivieren:�Aktivieren Sie die Option zum Freigeben von Protokolldateien in den progressiven Web-Apps, um Details zu ungewöhnlichem Verhalten der App zu erhalten.
k) Aktivieren Sie die URL-Codierung von Bildlinks:�Aktivieren Sie diese Funktion, um Nicht-ASCII-Zeichen in der Progressive Web App (PWA) zu unterstützen.
2.2 Einstellungen für Push-Benachrichtigungen
Push-Benachrichtigungen sind das praktische Tool, um Ihre Shop-Produkte, Angebote und Verkaufsangebote zu vermarkten und zu bewerben. Die Einstellungen auf dieser Registerkarte ermöglichen es Benutzern, unbegrenzte Push-Benachrichtigungen in der PrestaShop PWA-App zu konfigurieren und zu senden.
Die verschiedenen Details unter diesen Einstellungen werden abgerufen, wenn Sie das Firebase-Konto einrichten. Hier ist der Schritt-für-Schritt-Prozess, um dies zu tun:
2.21 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 „Fortfahren“.
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.
A) Push-Benachrichtigung über erfolgreiche Bestellung:
Aktivieren/Deaktivieren Sie die automatische Push-Benachrichtigung, die an die App-Benutzer gesendet wird, wenn die Bestellung von der PrestaShop PWA-App erfolgreich erstellt wurde.
B) Push-Benachrichtigung zur Aktualisierung des Bestellstatus:
Aktivieren/Deaktivieren Sie die automatische Push-Benachrichtigung, die an die App-Benutzer gesendet wird, um Aktualisierungen bezüglich des Lieferstatus ihrer vorherigen Bestellung zu erhalten. Die Benutzer können diesen Status auf der Registerkarte „Bestelldetails“ der PWA-App anzeigen
C) Push-Benachrichtigung über abgebrochenen Warenkorb:
Aktivieren/Deaktivieren Sie die automatische Push-Benachrichtigung, die an Benutzer gesendet wird, die den Warenkorb ohne erfolgreichen Kauf verlassen haben. Diese Push-Benachrichtigung wird automatisch nach dem eingegebenen Zeitintervall an die Benutzer gesendet.
2.2 Verlauf der Push-Benachrichtigungen
Hier kann der Store-Administrator den vollständigen Verlauf der an Progressive Web App (PWA) gesendeten Push-Benachrichtigungen anzeigen. Darüber hinaus kann der Store-Administrator sogar die manuelle Benachrichtigung personalisieren und dieselbe an Benutzer der Progressive Web App senden.
A) Benachrichtigung senden:
Was ist besser, um Push-Benachrichtigungen je nach Bedarf zu entwerfen und zu senden? Mit dieser Option können Ladenbesitzer eine benutzerdefinierte Benachrichtigung manuell konfigurieren und an Benutzer der PrestaShop PWA-App senden.
2.3-Homepage-Layout
Das PrestaShop PWA-Modul ermöglicht es dem Store-Administrator, die Einschränkungen einer festen Startbildschirm-Benutzeroberfläche zu umgehen und diejenige zu entwerfen, die seinen Geschäftsanforderungen entspricht. Auf dieser Registerkarte kann der Store-Administrator mehrere Layouts erstellen und speichern und sie gemäß den laufenden Anlässen und Festivals verwenden.
Um die Homepage-Layouts der PWA-App zu konfigurieren, stehen im Backend folgende Elemente zur Verfügung:
A) Top-Kategorien:
Die Top-Kategorien werden in Form kleiner Quadrate auf dem Startbildschirm der Progressive Web-App (PWA) angezeigt. Ihre Bilder und Weiterleitungslinks können von hier aus konfiguriert werden. Diese Kategorien können verwendet werden, um Top-Marken auf dem Startbildschirm der App hervorzuheben. Das PrestaShop PWA-Modul erlaubt maximal 8 Kategorien, von denen mindestens 4 obligatorisch sind.
B) Quadratisches Banner:
Die Auflistung des quadratischen Banners auf dem Startbildschirm der Progressive Web App (PWA) bietet einen quadratischen Bannerblock, in dem der Store-Administrator das gewünschte Bild verwenden kann. Für diese Banner kann der entsprechende Weiterleitungslink verwendet werden.
C) Horizontales Schiebebanner:
Dies sind die rechteckigen Bannerblöcke, die auf dem Startbildschirm der PrestaShop PWA-App horizontal verschiebbar sind. Auch hierfür sind Bild und Weiterleitungslink vollständig konfigurierbar.
D) Rasterbanner:
Dies sind quadratische Banner, die auf dem Startbildschirm der Progressive Web App (PWA) in Form einer Rasteransicht aufgeführt sind. Der Store-Administrator kann beliebig viele Banner hinzufügen und deren Weiterleitungslink festlegen.
E) Countdown-Timer-Banner:
Das PWA-Modul von PrestaShop ermöglicht es dem Shop-Administrator, ein zeitgesteuertes Banner auf dem Startbildschirm der Web-App zu konfigurieren und hinzuzufügen. Der Store-Administrator kann ein Bannerbild und einen Zielbildschirm zusammen mit einem Timer hinzufügen, bis das Banner auf dem Startbildschirm der progressiven Web-App angezeigt werden soll. Sobald der Timer abgelaufen ist, wird das Banner automatisch entfernt.
F) Quadratische Produkte:
Ab Bannern ermöglichen die mobilen PrestaShop PWA-Apps die Präsentation von Produkten in quadratischen Blocklisten. Der Administrator kann die Produkte für dieses Element auswählen.
G) Horizontal verschiebbare Produkte:
Sie können die Produkte in Form von horizontalem Schieben hinzufügen. Die ausgewählten Produkte können vom Shop-Administrator ausgewählt werden, z. B. Neuankömmlinge, Bestseller, kundenspezifische Produkte usw.
H) Netzprodukte:
Produkte können auch auf dem Startbildschirm in Form von Blocklisten in der Rasteransicht hinzugefügt werden. Der Shop-Administrator kann die gewünschten Produkte und Mengen auswählen, die auf dem Startbildschirm der PrestaShop PWA-App angezeigt werden sollen.
I) Kürzlich aufgerufene Produkte:
Das PrestaShop Mobile PWA-Modul ermöglicht es dem Ladenbesitzer, ein aktuelles Registerkartenelement auf dem Startbildschirm der Webanwendung hinzuzufügen. Es werden alle Produkte angezeigt, die kürzlich von Benutzern durchsucht wurden.
Hinweis: Der Store-Administrator kann beim Entwerfen des Layouts im Backend-Bereich bis zu 20 Elemente hinzufügen.
2.4 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.
2.5 Wie erhalte 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: Internetanwendung.
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:
3.1-Startbildschirm
1. Dynamisches Layout:
Mithilfe verschiedener Gestaltungselemente kann der Geschäftsadministrator je nach Bedarf ein dynamisches Layout erstellen.
2. Shop-Logo:
Fügen Sie das Store-Logo in der Kopfzeile der „Progressive Web“-App (PWA) 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 Akkordeon-Menü (Navigationsleiste)
Die „Progressive Web App“ bietet die richtige Kategorisierung von Produkten, wie sie auf der Website verfügbar sind. Mobile Käufer können problemlos Produkte aus mehreren Kategorien durchsuchen. Alle CMS-Seiten sind auch im Akkordeon-Menü verfügbar. Es bietet die folgenden Optionen:
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 „Progressive Web“-App (PWA) 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 PrestaShop PWA-App angezeigt.
6. Anmelden/Abmelden
Benutzer können sich über diese Option einfach bei der PrestaShop Progressive Web App an- und abmelden.
3.3 Kategoriebildschirm:
1. Mehrere Ansichten:
Die Kategorien in der Progressive Web App (PWA) für PrestaShop 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 Ihrer Progressive Web App (PWA) ist einfach und faszinierend. Mehrere Bilder desselben Produkts werden zusammen mit Name und Preis angezeigt. Die Produktverfügbarkeit wird auch anhand von „In Stock“ oder „Out Of Stock“ angezeigt 
Bestandsstatus. Es enthält die folgenden anderen Optionen:
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, das Produkt auf mehreren sozialen Kanälen zu teilen.
3.5-Anmeldebildschirm
Die Progressive Web App (PWA)�
bietet verschiedene One-Tap-Login-Optionen und macht den Anmelde-/Registrierungsprozess nahtloser:
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 PrestaShop 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 „Progressive Web“-App (PWA) anmelden.
3.6 Einkaufswagenbildschirm:
Der Warenkorb-Bildschirm Ihrer progressiven Web-App zeigt alle Produkte an, die dem Warenkorb hinzugefügt wurden. Die App-Benutzer können den Produktnamen anzeigen, 
Menge, Gesamtpreis und Versandkosten. Dieser Bildschirm hat die folgenden Optionen:
1. Gutschein beantragen
Diese Option ermöglicht es den Benutzern, Website-Gutscheine zu verwenden und Rabattangebote zu erhalten.
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. Weiter einkaufen
Benutzer können den Warenkorb verlassen, um weitere Produkte in Ihrer progressiven Web-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 progressiven Web-Apps mit PrestaShop� Progressive Web App (PWA)-Modul haben eine vereinfachte 
Single-Screen-Checkout mit nur relevanten Informationen. Die Benutzer können vollständige Checkout-Details wie Versanddetails, Rechnungsdetails, Bestellübersicht, Bestellkommentar, Zahlungszusammenfassung 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 Benutzer der progressiven Web-App 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 Progressive Web App (PWA)-App werden zum Zahlungsbildschirm umgeleitet, nachdem sie auf die Schaltfläche „Weiter zur Zahlung“ getippt haben.
3.8 Zahlungsbildschirm:
Der Zahlungsbildschirm der PrestaShop�PWA-App enthält alle im Geschäft verfügbaren Web-View-Zahlungen. Online-Käufer können sowohl auf der Website als auch in progressiven Web-Apps ein ähnliches Zahlungserlebnis finden.
3.9 Mein Konto-Bildschirm
Der Bildschirm Mein Konto der PrestaShop Progressive Web App (PWA) ermöglicht es Benutzern, ihre vollständigen in der App gespeicherten Details anzuzeigen, einschließlich einer Liste früherer Bestellungen.
3.10 Auftragsdetailbildschirm
Der Bestelldetails-Bildschirm der PrestaShop Progressive Web App bietet vollständige Details einer bestimmten Bestellung 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 besteht sogar die Möglichkeit, den Bestellstatus und die Lieferung zu verfolgen.
