PrestaShop PWA Mobile App – User Manual


1.0 Einführung

Das schnelle Wachstum in der mCommerce-Branche hat zu der Dringlichkeit einer mobilen E-Commerce-App geführt. Das Erstellen mobiler Apps erfordert jedoch viel 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, 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 anzeigen:

Zeigen Sie 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 Startbildschirm-Oberfläche (DIY Editor)
  • Unbegrenzte Push-Benachrichtigungen (manuelle und automatisierte Benachrichtigungen)
  • Zopim- und WhatsApp-Chat-Unterstützung
  • Unterstützung für alle Zahlungs- und Versandmethoden
  • Echtzeitsynchronisation
  • Automatische Bestandsaktualisierung
  • Leichte App mit schnellerem Laden
  • Mehrsprachige und RTL-Unterstützung
  • E-Mail- und soziale Anmeldeoptionen (Google & Facebook)
  • Intuitive Schnittstelle mit geschichteter Navigation
  • Keine Abhängigkeit von Google Play oder Apple App Store
  • Komplette White-Label-Lösung
  • Barrierefreiheit im Offline-Modus
  • Vereinfachte einseitige Kaufabwicklung
  • Steuerung von CMS-Seiten (Informationsseiten)
  • Präsentieren Sie verwandte Produkte
  • Benutzerbewertungen anzeigen
  • Eingebaute Wunschliste-Funktionalität
  • Unterstützung für Gutscheine / Gutscheine
  • Unterstützung für mehrere Währungen

Kompatibel mit PrestaShop Multi-Vendor Marketplace

Der PrestaShop Multi-Vendor Marketplace Das Modul ist vollständig kompatibel mit der 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 in der PrestaShop PWA-Anwendung automatisch aktualisiert.

Hinweis: Die mobile PWA-App für mehrere Anbieter für PrestaShop ist nur kundenorientiert. Dies bedeutet, dass es vom App-Ende aus kein Verkäufer-Dashboard oder Management gibt. Der Store-Administrator kann die Verkäufer über das 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 Administratorregisterkarten und -einstellungen vollständig konfiguriert werden. Alles, was Sie tun müssen, ist, einige notwendige Klicks und Schaltflächen zu machen, um die Änderungen in der Progressive Web App vorzunehmen. Lassen Sie uns jeden einzelnen im Detail besprechen:

2.1 Allgemeine Einstellungen

Wie der Name schon sagt, gelten diese allgemeinen Konfigurationseinstellungen für alle Arten von regelmäßigen Änderungen in progressiven Webanwendungen. Mit den Optionen auf dieser Registerkarte funktioniert die App auf den Geräten des Online-Käufers.

general-settings-1

a) Plugin aktivieren: Ermöglichen Sie das PrestaShop PWA-Modul, damit die App auf Mobilgeräten funktioniert.
b) Weiterleiten auf Warenkorbseite beim Hinzufügen zum Warenkorb: Mit dieser Funktion kann der Administrator die Umleitung der Schaltfläche “In den Warenkorb” steuern. Die Benutzer können zum Warenkorb weitergeleitet oder beim Tippen auf “In den Warenkorb” auf dem Produktbildschirm angezeigt werden.
c) Kurzbeschreibung anzeigen: Eine kurze Produktbeschreibung kann auf dem Produktbildschirm von Progressive Web App angezeigt werden.
d) Logo aktivieren: Fügen Sie das Logo Ihres Shops in die Kopfzeile der PWA-App ein und präsentieren Sie Ihre Marke den Benutzern.

general-settings-2

e) Hintergrundfarbe des Begrüßungsbildschirms: Wählen Sie die richtige Farboption für den Hintergrund des PWA-App-Begrüßungsbildschirms.
f) Name für PWA App: Wählen Sie den Namen Ihrer PWA-App nach Ihrer Wahl.
g) Wählen Sie Layout: 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) Versandmethoden für Behinderte: Deaktivieren Sie die Versandmethoden für die Arbeit in der PWA-App, je nachdem, was Sie nicht richtig finden. 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) Aktivieren Sie das Anforderungsprotokoll-Reporting: Eine Option zum Freigeben von Protokolldateien für die progressiven Webanwendungen aktivieren, um Details zu abnormalen Verhaltensweisen von der App abzurufen.
k) Aktivieren Sie die URL-Codierung von Bildlinks: Ermöglichen Sie diese Funktion, um Nicht-ASCII-Zeichen in der Progressive-Webanwendung zu unterstützen.

2.2 Push-Benachrichtigungseinstellungen

Push-Benachrichtigungen sind das praktische Tool, um Ihre Geschäftsprodukte, Angebote und Verkaufsangebote zu vermarkten und zu bewerben. Mit den Einstellungen auf dieser Registerkarte können Benutzer unbegrenzt Push-Benachrichtigungen in der PrestaShop PWA-App konfigurieren und senden.

Push-Benachrichtigungen-1

Die verschiedenen Details unter diesen Einstellungen erhalten Sie, wenn Sie das Firebase-Konto einrichten. Hier ist ein schrittweiser Prozess, um dies zu tun:

2.21 Wie richte ich ein Firebase-Konto ein?

Schritt 1: Login Google Firebase

Firebase-Projekt
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-Schlüssel

A) Erfolgreiche Push-Benachrichtigung für Bestellungen:

Aktivieren / Deaktivieren der automatisierten Push-Benachrichtigung, die an die App-Benutzer gesendet wird, um eine erfolgreiche Auftragserstellung über die PrestaShop PWA-App zu erhalten.

Mitteilungen

B) Push-Benachrichtigung zur Aktualisierung des Bestellstatus:

Aktivieren / Deaktivieren Sie die automatische Push-Benachrichtigung, die an die App-Benutzer gesendet wird, um Informationen zu ihrem vorherigen Lieferstatus zu erhalten. Die Benutzer können diesen Status auf der Registerkarte “Bestelldetails” der PWA-App anzeigen

Mitteilungen

C) Push-Benachrichtigung für verlassenen Einkaufswagen:

Aktivieren / Deaktivieren Sie die automatische Push-Benachrichtigung, die an Benutzer gesendet wird, die den Warenkorb ohne erfolgreichen Kauf verlassen haben. Diese Push-Benachrichtigung wird nach dem eingegebenen Zeitintervall automatisch an die Benutzer gesendet.

Mitteilungen

2.2 Push-Benachrichtigungsverlauf

Hier kann der Store-Administrator den vollständigen Verlauf der an die PWA-App gesendeten Push-Benachrichtigungen anzeigen. Darüber hinaus kann der Store-Administrator die manuelle Benachrichtigung sogar personalisieren und an Benutzer von Progressive Web App senden.

Push-Benachrichtigungen-Geschichte

A) Benachrichtigung senden:

Was ist besser, um Push-Benachrichtigungen 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.

Push-Benachrichtigungen-Geschichte
2.3-Homepage-Layout

Mit dem PrestaShop PWA-Modul kann der Store-Administrator die Einschränkungen einer festen Benutzeroberfläche für den Startbildschirm umgehen und die für seine geschäftlichen Anforderungen geeignete entwerfen. Auf dieser Registerkarte kann der Store-Administrator mehrere Layouts erstellen, speichern und gemäß den laufenden Anlässen und Festivals verwenden.

Homepage-Layout
Um die Homepage-Layouts der PWA-App zu konfigurieren, stehen im Backend folgende Elemente zur Verfügung:

A) Top Kategorien:

Top-Kategorien werden in Form kleiner Quadrate auf dem Startbildschirm der Progressive Web-App angezeigt. Ihre Bilder und Weiterleitungslinks können hier konfiguriert werden. Diese Kategorien können zum Hervorheben von Top-Marken auf dem App-Startbildschirm verwendet werden. Das PrestaShop PWA-Modul erlaubt maximal 8 Kategorien, in denen mindestens 4 obligatorisch sind.

Top-Kategorien

B) Square Banner:

Die quadratische Bannerliste auf dem Startbildschirm der PWA-App 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.

Quadrat-Banner
C) Horizontal – Sliding – Banner:

Dies sind die rechteckigen Bannerblöcke, die auf dem Startbildschirm der PrestaShop PWA-App horizontal verschoben werden können. Auch hierfür ist der Bild- und Umleitungslink vollständig konfigurierbar.

Sliding-Banner

D) Grid Banner:

Hierbei handelt es sich um quadratische Banner, die auf dem Startbildschirm der PWA-App in Form einer Rasteransicht aufgelistet sind. Der Store-Administrator kann beliebig viele Banner hinzufügen und den Weiterleitungslink festlegen.

Raster-Banner
E) Countdown Timer-Banner:

Mit dem PWA-Modul „RestaShop“ kann der Store-Administrator ein Timer-basiertes Banner auf dem Startbildschirm der Web-App konfigurieren und hinzufügen. Der Store-Administrator kann Bannerbild und Landebildschirm zusammen mit dem Timer hinzufügen, bis das Banner auf dem Startbildschirm der progressiven Web-App angezeigt wird. Sobald der Timer abgelaufen ist, wird das Banner automatisch entfernt.

Countdown-Timer-Banner
F) Square Produkte:

Mit den mobilen PrestaShop PWA-Apps können Banner in Form von quadratischen Blocklisten präsentiert werden. Der Administrator kann die Produkte für dieses Element auswählen.

quadratische Produkte
G) Horizontalgleitprodukte:

Sie können die Produkte in Form eines horizontalen Schiebens hinzufügen. Die ausgewählten Produkte können vom Store-Administrator ausgewählt werden, z. B. Neuheiten, Bestseller, benutzerdefinierte Produkte usw.

Schiebeprodukte
H) Gitterprodukte:

Produkte können auch auf dem Startbildschirm in Form von Blocklisten für die Rasteransicht hinzugefügt werden. Der Store-Administrator kann die gewünschten Produkte und Mengen auswählen, die auf dem Startbildschirm der PrestaShop PWA-App angezeigt werden sollen.

Gitterprodukte
I) Kürzlich aufgerufene Produkte:

Mit dem PrestaShop Mobile PWA-Modul kann der Ladenbesitzer ein aktuelles Registerkartenelement auf dem Startbildschirm der Webanwendung hinzufü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 mit den folgenden Schritten erstellt werden: –

Schritt 1: Gehen Sie zu L: https://developers.facebook.com/apps/

Schritt 2:Klicken Sie auf die Schaltfläche “Neue App hinzufügen”.

Add-New-App

Schritt 3 & 4:Geben Sie Ihren App-Namen und Ihre E-Mail-ID ein und klicken Sie auf die Schaltfläche “App-ID erstellen”.

create-app-id

Schritt 5 & 6: Nach dem Klicken auf App-ID erstellen müssen Sie eine Sicherheitsüberprüfung wie folgt durchführen:

create-app-id

Schritt 7:Klicken Sie auf die Registerkarte “Einstellungen”.

fb-app-einstellung

Schritt 8-13:Zwei Optionen sind in der Dropdown-Liste “Basic” und “Erweitert” verfügbar. Klicken Sie auf “Basic”. Geben Sie dann Ihre “App Domain”, “Kontakt-E-Mail”, “Datenschutz” URL “,” Allgemeine Geschäftsbedingungen “URL”, “Logo hinzufügen”, “Kategorie auswählen” ein und klicken Sie auf “Änderungen speichern”. App-Domains: yourdomain.com ist korrekt yourdomain.com/store ist falsch www.domain.com ist falsch

fb-app-id

Schritt 14:Klicken Sie jetzt auf “+ Plattform hinzufügen”.

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

Plattform wählen

Schritt 16: Nun Geben Sie Ihre Site-URL ein.

enter-website-url
Schritt 17 & 18:Klicken Sie auf “Produkte +” und wählen Sie Facebook-Login.

Facebook Login
Schritt 19: Wählen Sie Web als Plattform für die App.

Plattform wählen

Schritt 20: Klicken Sie jetzt auf Speichern.

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:Klicken Sie auf “App Review”. Und markieren Sie “Machen Sie ‘Ihren App-Namen’ öffentlich” mit “Ja”.

App-Überprüfung
Letzter Schritt: Kopieren Sie die App-ID und das App-Geheimnis und fügen Sie sie in die Felder des Moduls ein.

letzter Schritt

2.5 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 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 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: Internetanwendung.
Autorisierte JavaScript-Ursprünge: Ihr Shop-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:

3.1-StartbildschirmHome-Bildschirm

1. Dynamisches Layout:

Mithilfe verschiedener Gestaltungselemente kann der Geschäftsadministrator je nach Bedarf ein dynamisches Layout erstellen.

2. Store Logo:

Fügen Sie in der Kopfzeile der App “Progressive Web” ein Store-Logo hinzu.

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-Akkordeonmenü (Navigationsleiste)

Die “Progressive Web App” bietet eine ordnungsgemäße Kategorisierung der auf der Website verfügbaren Produkte. 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:

Navigationsleiste

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

2. Kategorien
Die im linken Navigationsmenü von “Progressive Web” 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 in der PrestaShop PWA-App angezeigt.

6. Einloggen Ausloggen
Benutzer können sich über diese Option einfach über die PrestaShop Progressive Web App anmelden / abmelden.

3.3-Kategoriebildschirm:Kategorie-Bildschirm

1. Mehrere Ansichten:
Die Kategorien in der PWA-App für PrestaShop können sowohl in der Listen- als auch in der Rasteransicht angezeigt werden.

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 Ihrer “Progressive Web App” ist einfach und faszinierend. Es werden mehrere Bilder desselben Produkts zusammen mit Name und Preis angezeigt. Die Produktverfügbarkeit wird auch als “Auf Lager” oder “Nicht auf Lager” angezeigt Produkt-BildschirmInventarstatus. Es enthält die folgenden anderen Optionen:

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

Die progressive Web-App Anmeldebildschirm bietet verschiedene Anmeldeoptionen mit einem Tastendruck und vereinfacht den Anmelde- / Registrierungsprozess:

1. Anmeldung
Die App-Benutzer können sich einfach mit ihren vorherigen E-Mail-Anmeldeinformationen 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. Im Anmeldeformular werden nur die erforderlichen Details zum Erstellen eines Kontos abgefragt.

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 “Progressive Web” anmelden.

3.6-Warenkorb-Bildschirm:

Auf dem Warenkorbbildschirm Ihrer Progressive-Webanwendung werden alle Produkte angezeigt, die dem Warenkorb hinzugefügt wurden. Die App-Benutzer können den Produktnamen anzeigen. Warenkorb-BildschirmMenge, Gesamtpreis & Versandkosten. Dieser Bildschirm bietet folgende Optionen:

1. Gutschein anwenden
Mit dieser Option können Benutzer Website-Gutscheine verwenden und Rabattangebote abrufen.

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
Benutzer können den Warenkorb verlassen, um weitere Produkte in Ihrer progressiven Web-App zu durchsuchen.

6. Fahren Sie mit der Kasse fort
Die 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 progressiven Web-Apps mit PrestaShop PWA-Modul sind vereinfacht Checkout-BildschirmSingle-Screen-Checkout mit nur relevanten Informationen. Die Benutzer können vollständige Checkout-Details wie Versanddetails, Rechnungsdetails, Bestellübersicht, Bestellkommentar und Zahlungszusammenfassung anzeigen.

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 progressiven Web-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 Pannenzahlung für den Kauf angezeigt.

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:

Auf dem Zahlungsbildschirm der PrestaShop PWA-App sind alle Zahlungen im Internet verfügbar. Die Online-Käufer finden ähnliche Zahlungserfahrungen sowohl auf der Website als auch in progressiven Web-Apps.

Zahlungsbildschirm

3.9 Mein Konto-Bildschirm

Auf meinem Konto-Bildschirm der PrestaShop PWA-App können Benutzer ihre vollständigen Details anzeigen, die in der App gespeichert sind, einschließlich einer Liste früherer Bestellungen.Mein-Konto-Bildschirm

3.10-Auftragsdetailbildschirm

Der Bildschirm mit den Bestelldetails der PrestaShop Progressive Web App enthält vollständige Details zu einer bestimmten Bestellung in der PWA-App. Benutzer können auf einfache Weise die Versandadresse, die Produktübersicht, die Versand- und Zahlungsmethode sowie die Gesamtkostenübersicht usw. anzeigen. Es besteht sogar die Möglichkeit, den Bestellstatus und dessen Lieferung zu verfolgen.

Bestelldetails

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 *