- \n
- Schnelleres Laden und schnelle Leistung<\/li>\n
- Vollst\u00e4ndig anpassbarer Startbildschirm mit DIY-Editor<\/li>\n
- Alle Versand- und Zahlungsmethoden der Website werden unterst\u00fctzt<\/li>\n
- Unbegrenzte Push-Benachrichtigungen (sowohl automatisierte als auch benutzerdefinierte Benachrichtigungen)<\/li>\n
- Push-Benachrichtigung bei abgebrochenem Warenkorb<\/li>\n
- Zopim- und WhatsApp-Chat-Unterst\u00fctzung<\/li>\n
- Ansprechende benutzerfreundliche Oberfl\u00e4che<\/li>\n
- Keine Abh\u00e4ngigkeit von App-Stores<\/li>\n
- Vollst\u00e4ndig gebrandet f\u00fcr Ihr Gesch\u00e4ft (White Label)<\/li>\n
- E-Mail & Social Login (Google & Facebook)<\/li>\n
- Mehrsprachige & RTL-Unterst\u00fctzung<\/li>\n
- Offline-Modus funktioniert<\/li>\n
- Eingebaute Wunschliste<\/li>\n
- Live-Synchronisation s\/w Website & App<\/li>\n
- Automatische Bestandsaktualisierung<\/li>\n
- Kompatibilit\u00e4t mit mehreren Ger\u00e4ten<\/li>\n
- Einseitiger Checkout<\/li>\n
- Leichte Anwendung<\/li>\n
- Verwaltung von CMS-Seiten<\/li>\n
- Verwandte Produkte auf Progressive Web App<\/li>\n
- Benutzerbewertungen f\u00fcr Produkte auf PWA<\/li>\n
- Unterst\u00fctzung f\u00fcr mehrere W\u00e4hrungen<\/li>\n
- Unterst\u00fctzung f\u00fcr Gutscheine \/ Gutscheine<\/li>\n<\/ul>\n
[IMP] Hinweise f\u00fcr iOS PWA:<\/h3>\n
\ufffd> iOS-Ger\u00e4te (iPhone, iPad usw.) bieten keine integrierte \u201eZum Startbildschirm hinzuf\u00fcgen\u201c-Aufforderung. Daher m\u00fcssen die Benutzer der PWA Mobile App die OpenCart PWA Mobile App manuell zum Startbildschirm des iPhone oder iPad hinzuf\u00fcgen. \ufffd> iOS unterst\u00fctzt keine Web-Push-Benachrichtigungen. Daher kann der Store-Administrator die Push-Benachrichtigungen nur an das Android-Ger\u00e4t senden, nicht an iOS.<\/p>\n
[NEUES UPDATE]\ufffd OpenCart PWA unterst\u00fctzt RTL-Sprachen (Arabisch, Hebr\u00e4isch usw.):<\/h3>\n
Der OpenCart PWA Mobile App Creator unterst\u00fctzt jetzt mehrere Sprachen, einschlie\u00dflich RTL-Skripts (von rechts nach links) wie Arabisch, Hebr\u00e4isch, Persisch usw. Alle Sprachen des OpenCart-Stores werden in der Progressive Web App verf\u00fcgbar sein, und andere erforderliche Sprachen k\u00f6nnen ebenfalls hinzugef\u00fcgt werden. Die Benutzer k\u00f6nnen die Sprache in der Progressive Web App ausw\u00e4hlen und der gesamte App-Inhalt wird entsprechend \u00fcbersetzt.<\/p>\n
Vollst\u00e4ndig kompatibel mit KnowBand Multi-Vendor Marketplace:<\/h2>\n
Unsere OpenCart PWA Mobile App ist kompatibel mit OpenCart Multi-Vendor Marketplace<\/a>. Wandeln Sie Ihren OpenCart E-Commerce-Shop in einen vollwertigen Marktplatz um und starten Sie daf\u00fcr die mobile PWA-App. Die Marktplatzverk\u00e4ufer sind in Ihrer Progressive Web App verf\u00fcgbar und Benutzer k\u00f6nnen sie auch einfach durchsuchen.<\/p>\n
Hinweis:<\/strong> OpenCart PWA Mobile Apps sind nur kundenorientiert, dh die Benutzer k\u00f6nnen die Browse PWA-App zusammen mit Verk\u00e4ufern besuchen. Es wird kein Verk\u00e4ufer-Dashboard oder Management \u00fcber OpenCart Progressive Web App geben. Der Administrator kann die Verk\u00e4ufer \u00fcber das Marketplace-Web verwalten und diese werden automatisch in der PWA Mobile App aktualisiert.<\/p>\n
1.3 OpenCart PWA-Demo anzeigen:<\/h3>\n
<\/p>\n
![\"Home-Bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Category-Of-Home-screen.png\")
<\/a><\/p>\nErkunden Sie die Funktionen von Modulen und PWA-Apps \u00fcber die folgenden Demo-Links:<\/p>\n
Modul-Admin-Panel:\ufffd<\/strong>https:\/\/opencartdemo.knowband.com\/3.0\/pwa\/admin\/<\/a>
\nPWA-Demo-App:<\/strong> ,warhttps:\/\/opencartdemo.knowband.com\/3.0\/pwa\/pwa-app\/<\/a><\/p>\n(URL im mobilen Browser kopieren und einf\u00fcgen und \u201eZum Startbildschirm hinzuf\u00fcgen\u201c)<\/p>\n
2.0 Admin-Panel-Bildschirme:<\/h2>\n
Erkunden Sie alle Einstellungen des Admin-Bereichs der OpenCart PWA Mobile App-Erweiterung zusammen mit der Funktionalit\u00e4t und arbeiten Sie mit den unten geteilten Snapshots:<\/p>\n
2.1 Allgemeine Einstellungen:<\/h3>\n
![\"Allgemein-Einstellungen\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/General-Settings.png\")
<\/p>\na) Vorschau ein-\/ausblenden:<\/strong> Tippen Sie auf die Augen-Schaltfl\u00e4che, um das Vorschautelefon im Admin-Bereich anzuzeigen\/auszublenden.
\nb) Stand:<\/strong> Aktivieren Sie das Modul f\u00fcr die PWA-Arbeit auf Mobilger\u00e4ten.
\nc) Anforderungsprotokoll-Berichterstellung aktivieren:<\/strong> Fehlerprotokoll auf Mobilger\u00e4t aktivieren.
\nd) Name f\u00fcr PWA-App:<\/strong> Geben Sie den Namen f\u00fcr die OpenCart PWA-App ein.
\ne) Layout f\u00fcr Startseite ausw\u00e4hlen:<\/strong> W\u00e4hlen Sie aus dem vorinstallierten Startbildschirm-Layout f\u00fcr OpenCart Progressive Web App.<\/p>\n![\"allgemeine-einstellungen-2\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/General-Settings-2.png\")
<\/p>\nf) Registerkartenleiste aktivieren:<\/strong> Aktivieren Sie die Registerkartenleiste unten in der OpenCart PWA-App f\u00fcr eine nahtlose Navigation.
\ng) Schriftart f\u00fcr PWA-App:<\/strong> W\u00e4hlen Sie eine Schriftart f\u00fcr OpenCart Progressive Web App (PWA).
\nh) Farbe der App-Schaltfl\u00e4che:<\/strong> W\u00e4hlen Sie die Schaltfl\u00e4chenfarbe f\u00fcr die PWA Mobile App.
\ni) Farbe des App-Designs:<\/strong> W\u00e4hlen Sie die Designfarbe f\u00fcr die PWA-App.
\nj) Hintergrundfarbe der App:<\/strong> W\u00e4hlen Sie die Hintergrundfarbe f\u00fcr die PWA-App.
\nk) Farbe des App-Begr\u00fc\u00dfungsbildschirms:<\/strong> W\u00e4hlen Sie einen Begr\u00fc\u00dfungsbildschirm f\u00fcr die PWA Mobile App.
\nl) Logo aktivieren:<\/strong> F\u00fcgen Sie Ihr Markenlogo in die Kopfzeile der OpenCart PWA Mobile App ein.<\/p>\n![\"allgemeine-einstellungen-3\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/General-settings-3.png\")
<\/p>\nm) Bild f\u00fcr App-Icon:<\/strong> F\u00fcgen Sie das App-Symbolbild im Admin-Bereich der OpenCart PWA-Erweiterung hinzu.
\nn) Weiterleitung auf der Warenkorbseite beim Hinzuf\u00fcgen zum Warenkorb:<\/strong> Steuern Sie die Umleitung der Schaltfl\u00e4che \u201eIn den Einkaufswagen\u201c, wenn ein Benutzer auf die Schaltfl\u00e4che \u201eIn den Einkaufswagen\u201c tippt.<\/p>\n2.2 Einstellungen f\u00fcr Push-Benachrichtigungen<\/h3>\n
![\"Push-Benachrichtigungen-Einstellungen\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/3-2.jpg\")
<\/a><\/p>\nPush-Benachrichtigungen sind das beste Marketinginstrument f\u00fcr die Progressive Web App (PWA) f\u00fcr 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:<\/p>\n
Wie richte ich ein Firebase-Konto ein?<\/strong><\/p>\n
Schritt 1:<\/strong>\ufffd Melden Sie sich bei Google Firebase an<\/p>\n
![\"Firebase\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/1.png\")
<\/p>\nSchritt 2:<\/strong>\ufffdNeues Projekt erstellen Wenn Sie auf Projekt hinzuf\u00fcgen klicken, wird das folgende Dialogfeld angezeigt:<\/p>\n
![\"Projekt](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/2.png\")
\nDas Erstellen des Projekts dauert einige Sekunden. Sobald das Projekt fertig ist, klicken Sie auf Weiter.<\/p>\n![\"Continue-Projekt\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/3.png\")
<\/p>\nSchritt 3:<\/strong>\ufffdProjekteinstellungen verwalten Nachdem das Projekt erstellt wurde, klicken Sie auf Projekteinstellungen.<\/p>\n
![\"Projekt](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/4.png\")
<\/p>\nSchritt 4:<\/strong>\ufffdGehen Sie zu Authentifizierungsoptionen:<\/p>\n
![\"Authentifizierungsoptionen\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/5.png\")
\nSchritt 5:<\/strong>\ufffdFinde Firebase Keys Klicken Sie in den Projekteinstellungen auf Cloud-Messaging-Einstellungen. Von hier aus k\u00f6nnen Sie direkt den Serverschl\u00fcssel erhalten.<\/p>\n![\"Firebase-Schl\u00fcssel\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/9.png\")
\nSchritt 6:<\/strong>\ufffdF\u00fcgen Sie Ihre Web-App zu Firebase hinzu<\/p>\n![\"web-app-to-firebase\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/7.png\")
<\/p>\n![\"web-app-to-firebase\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/7-1.png\")
<\/p>\nSchritt 7:<\/strong>Erhalten Sie weitere Details zu Firebase und f\u00fcgen Sie diese in das Admin-Panel des PWA-Moduls ein.<\/p>\n
![\"Firebase-Details\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/8.png\")
<\/p>\nSchritt 8:<\/strong>\ufffd Rufen Sie den Firebase-Serverschl\u00fcssel von der Registerkarte \u201eCloud-Messaging\u201c in den Einstellungen ab:<\/p>\n
![\"Firebase-Schl\u00fcssel\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/9-1.png\")
<\/p>\nSchritt 9:<\/strong>\ufffdF\u00fcgen Sie Ihre Domain in Authentifizierung>>Anmeldung hinzu.<\/p>\n
![\"Firebase-Serverschl\u00fcssel\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/10.png\")
<\/p>\n![\"Firebase-Serverschl\u00fcssel\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/11.png\")
<\/p>\nA) Push-Benachrichtigung \u00fcber erfolgreiche Bestellung:<\/strong><\/p>\n
Aktivieren\/Deaktivieren Sie die automatische Push-Benachrichtigung, die an App-Benutzer gesendet wird, wenn sie eine erfolgreiche Bestellung \u00fcber die OpenCart Progressive Web App (PWA) aufgeben.<\/p>\n
![\"Bestellerfolg\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Order-success-.png\")
<\/p>\nB) Push-Benachrichtigung zur Aktualisierung des Bestellstatus:<\/strong><\/p>\n
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\u00f6nnen die Details fr\u00fcherer Bestellungen im Auge behalten.<\/p>\n
![\"Bestellstatus-Benachrichtigung\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Order-status-notification.png\")
<\/p>\nC) Push-Benachrichtigung \u00fcber abgebrochenen Warenkorb:<\/strong><\/p>\n
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.<\/p>\n
![\"verlassener](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Abandoned-cart.png\")
<\/p>\n2.3 Verlauf der Push-Benachrichtigungen<\/h3>\n
Der vollst\u00e4ndige Push-Benachrichtigungsverlauf von erfolgreich gesendeten Push-Benachrichtigungen wird hier angezeigt. Der Store-Administrator kann von hier aus zuvor gesendete Push-Benachrichtigungen verfolgen.<\/p>\n
![\"Push-Benachrichtigungsverlauf\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/push-notification-history.png\")
<\/p>\nA) Benachrichtigung senden:<\/strong><\/p>\n
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.<\/p>\n
![\"Benachrichtigung](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/send-notification.png\")
<\/p>\n2.4-Homepage-Layout:<\/h3>\n
Entwerfen und speichern Sie mehrere Layouts (Verkauf, Festivals usw.) und w\u00e4hlen Sie einfach das richtige aus dem Admin-Panel aus, um es in der OpenCart Progressive Web App zu aktualisieren<\/em><\/p><\/blockquote>\n
<\/a><\/p>\nDie OpenCart Progressive Web App (PWA) bietet einen anpassbaren Startbildschirm, dessen Layout mit wenigen Mausklicks und Drag-Drop \u00fcber 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.<\/p>\n
![\"Homepage-Layout\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/home-page-layout.png\")
<\/p>\nF\u00fcgen Sie auf dieser Registerkarte ein neues Layout hinzu oder bearbeiten Sie die zuvor hinzugef\u00fcgten. Die Konfigurationseinstellungen der Startseite bieten die folgenden Elemente:<\/p>\n
Top-Kategorien:\ufffd<\/strong><\/p>\n
![\"Top-Kategorie\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Top-category-.png\")
<\/p>\nQuadratisches Banner:<\/strong><\/p>\n
![\"quadratisches](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Square-Banner-.png\")
<\/p>\nHorizontal verschiebbares Banner:<\/strong><\/p>\n
![\"Schiebebanner\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Sliding-Banner.png\")
<\/p>\nGitterbanner:\ufffd<\/strong><\/p>\n
![\"Gitter-Banner\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Grid-Banner.png\")
<\/p>\nCountdown-Timer-Banner:\ufffd<\/strong><\/p>\n
![\"Countdown-Timer-Banner\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Countdown-Timer-Banner.png\")
<\/p>\nQuadratische Produkte:\ufffd<\/strong><\/p>\n
![\"quadratisches](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Square-Product.png\")
<\/p>\nSchiebeprodukte:\ufffd<\/strong><\/p>\n
![\"Schiebeprodukte\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Sliding-Products-.png\")
<\/p>\nNetzprodukte:\ufffd<\/strong><\/p>\n
![\"Grid-Produkte\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Grid-products.png\")
<\/p>\nWie erhalte ich Details zur Facebook-App?<\/h3>\n
Die Facebook-App kann durch die folgenden Schritte erstellt werden:-<\/p>\n
Schritt 1:<\/strong>\ufffdGehen Sie zur angegebenen\ufffdURL: https:\/\/developers.facebook.com\/apps\/<\/p>\n
Schritt 2:<\/strong>\ufffdKlicken Sie auf die Schaltfl\u00e4che \u201eNeue App hinzuf\u00fcgen\u201c.<\/p>\n
![\"neue](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/1.jpg\")
<\/a><\/p>\nSchritt 3&4:<\/strong>\ufffdGeben Sie Ihren App-Namen und Ihre E-Mail-ID ein und klicken Sie dann auf die Schaltfl\u00e4che \u201eApp-ID erstellen\u201c.<\/p>\n
![\"create-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/2.jpg\")
<\/a><\/p>\nSchritt 5&6:<\/strong>\ufffdNachdem Sie auf \u201eApp-ID erstellen\u201c geklickt haben, m\u00fcssen Sie eine Sicherheits\u00fcberpr\u00fcfung wie gezeigt durchlaufen:<\/p>\n
![\"create-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/3.jpg\")
<\/a><\/p>\nSchritt 7:<\/strong>\ufffdKlicken Sie auf die Registerkarte \u201eEinstellung\u201c.<\/p>\n
![\"fb-app-setting\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/4.jpg\")
<\/a><\/p>\nSchritt 8-13:<\/strong>In der Dropdown-Liste sind zwei Optionen verf\u00fcgbar, Basic und Advanced, klicken Sie auf “Basic”. Geben Sie dann Ihre \u201eApp-Dom\u00e4ne\u201c, \u201eKontakt-E-Mail\u201c, \u201eDatenschutz-URL\u201c, \u201eAllgemeine Gesch\u00e4ftsbedingungen-URL\u201c, \u201eLogo hinzuf\u00fcgen\u201c, \u201eKategorie ausw\u00e4hlen\u201c ein und klicken Sie auf die Schaltfl\u00e4che \u201e\u00c4nderungen speichern\u201c. App-Domains: yourdomain.com ist\ufffd korrekt yourdomain.com\/store ist\ufffd falsch www.domain.com ist\ufffd falsch<\/p>\n
![\"fb-app-id\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/5.jpg\")
<\/a><\/p>\nSchritt 14:<\/strong>\ufffdKlicken Sie nun auf \u201e+Plattform hinzuf\u00fcgen\u201c.<\/p>\n
![\"Plattform](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/6.jpg\")
<\/a>
\nSchritt 15:\ufffd<\/strong>Und w\u00e4hlen Sie Website als Plattform aus.<\/p>\n![\"Plattform](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/7.jpg\")
<\/a><\/p>\nSchritt 16:<\/strong>\ufffdGeben Sie jetzt Ihre Website-URL ein.<\/p>\n
![\"Website-URL](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/8.jpg\")
<\/a>
\nSchritt 17&18:<\/strong>\ufffdKlicken Sie auf \u201eProdukte+\u201c und w\u00e4hlen Sie Facebook-Login aus.<\/p>\n![\"Facebook](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/9.jpg\")
<\/a>
\nSchritt 19:<\/strong>\ufffdW\u00e4hlen Sie Web als Plattform f\u00fcr die App aus.<\/p>\n![\"Plattform](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/10.jpg\")
<\/a><\/p>\nSchritt 20:<\/strong>\ufffdKlicken Sie nun auf Speichern.<\/p>\n
![\"Facebook-App-ID\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/11.jpg\")
<\/a>
\nSchritt 21&22:\ufffd<\/strong>Klicken Sie auf Einstellungen und f\u00fcgen Sie g\u00fcltige OAuth-Umleitungs-URIs hinzu. G\u00fcltige OAuth-Umleitungs-URIs: https:\/\/example.com\/pwa-app\/login<\/p>\n![\"Weiterleitungs-URL\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/12.jpg\")
<\/a><\/p>\nSchritt 23&24:<\/strong>\ufffdKlicken Sie auf \u201eApp-Rezension\u201c. Und markieren Sie “Ihren App-Namen \u00f6ffentlich machen” auf Ja.<\/p>\n
![\"App-\u00dcberpr\u00fcfung\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/13.jpg\")
<\/a>
\nLetzter Schritt:<\/strong>\ufffdKopieren Sie die App-ID und das App-Geheimnis und f\u00fcgen Sie sie in die daf\u00fcr vorgesehenen Felder im Modul ein.<\/p>\n![\"letzter](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/14.jpg\")
<\/a><\/p>\nWie bekomme ich Details zur Google App?<\/h3>\n
- \n
- 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.<\/li>\n
- Klicken Sie nun links auf der Seite auf Projekt erstellen.<\/li>\n
- Geben Sie einen Namen f\u00fcr Ihr Projekt ein und fahren Sie mit dem n\u00e4chsten Schritt fort.<\/li>\n
- Klicken Sie nun im linken Men\u00fc auf APIs and auth-> Credentials, wie unten gezeigt.<\/li>\n<\/ul>\n
![\"Google-App-ID\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/a.jpg\")
<\/a><\/p>\n- \n
- Klicken Sie im rechten Bereich des Bildschirms auf die Schaltfl\u00e4che Neue Client-ID erstellen.<\/li>\n
- M\u00f6glicherweise m\u00fcssen Sie das Formular f\u00fcr den Zustimmungsbildschirm ausf\u00fcllen, bevor Sie fortfahren k\u00f6nnen. Dazu m\u00fcssen Sie im linken Men\u00fc auf Consent Screen klicken, wie im Bild oben gezeigt.<\/li>\n
- F\u00fcllen Sie das Popup-Formular mit den folgenden Details aus:<\/li>\n<\/ul>\n
Anwendungstyp:<\/strong>\ufffdWebanwendung.
\nAutorisierte JavaScript-Urspr\u00fcnge:<\/strong>\ufffdIhr Shop-Domainname (https:\/\/www.yourstore.com).
\nAutorisierte Umleitungs-URI oder URI der Loginizer-Umleitungsseite:<\/strong>
\nhttps:\/\/example.com\/pwa-app\/login<\/p>\n![\"Google-App-ID\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/04\/b.jpg\")
<\/a><\/p>\n- \n
- Klicken Sie nun auf die Schaltfl\u00e4che Client-ID erstellen, um Ihre Client-ID und Ihren geheimen Clientschl\u00fcssel zu erhalten.<\/li>\n
- Jetzt k\u00f6nnen Sie das Kundengeheimnis und die Kunden-ID verwenden, damit sich Ihre Kunden mit ihrem Google-Konto in Ihrem Gesch\u00e4ft anmelden k\u00f6nnen.<\/li>\n<\/ul>\n
2.7 Informationsseiten:<\/h3>\n
F\u00fcgen Sie CMS-Seiten zur App hinzu und bieten Sie Benutzern der OpenCart PWA Mobile App informative Inhalte.<\/p>\n
![\"Informationsseiten\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Information-pages-.png\")
<\/p>\n3.0 Front-End-PWA-App-Bildschirme:<\/h2>\n
3.1 Startbildschirm:<\/h3>\n
![\"Home-Bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Home-screen.png\")
<\/a><\/p>\nDer Startbildschirm der OpenCart Progressive Web App (PWA) ist mit einem DIY-Editor vollst\u00e4ndig anpassbar, wie oben in den Admin-Panel-Bildschirmen beschrieben. \u00c4ndern Sie das Erscheinungsbild des App-Startbildschirms jederzeit und bieten Sie ein benutzerfreundlicheres und verkaufsorientierteres Erscheinungsbild.<\/p>\n
1. Benutzerdefiniertes Layout:<\/h4>\n
Mit verschiedenen Bannern, Schiebereglern und Produktelementen kann der Gesch\u00e4ftsadministrator je nach Bedarf ein dynamisches Layout erstellen.<\/p>\n
2. Markenlogo:<\/h4>\n
Verwenden Sie Ihr Gesch\u00e4ftslogo in der oberen Kopfzeile der OpenCart Progressive Web App (PWA).<\/p>\n
3. Einkaufswagentasche:<\/h4>\n
Das Warenkorb-Symbol in der oberen rechten Ecke des Startbildschirms erm\u00f6glicht Benutzern den Zugriff auf den Warenkorb-Bildschirm und die \u00dcberpr\u00fcfung hinzugef\u00fcgter Produkte.<\/p>\n
4. Linkes Navigationsmen\u00fc:<\/h4>\n
Durchsuchen Sie die in der PWA-App angezeigten Kategorien mit dem linken Navigationsmen\u00fc.<\/p>\n
3.2 Akkordeon-Men\u00fc (Navigationsleiste)<\/h3>\n
Die OpenCart PWA Mobile Apps werden mit einer nahtlosen und korrekten Kategorisierung geliefert. Die Benutzer k\u00f6nnen relevante Kategorien im linken Navigationsmen\u00fc finden und Produkte durchsuchen. Au\u00dferdem k\u00f6nnen verschiedene CMS-Seiten zum Men\u00fc hinzugef\u00fcgt werden, die relevante Inhalte in der App anbieten.<\/p>\n
![\"Akkordeon-Men\u00fc-Navigationsleiste\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Accordion-Menu-Navigation-Bar.png\")
<\/a><\/p>\n1. Mein Konto:<\/h4>\n
Die Option Mein Konto enth\u00e4lt alle pers\u00f6nlichen Informationen des Benutzers, einschlie\u00dflich Versand und Bestellung. Die K\u00e4ufer der OpenCart Progressive Web App k\u00f6nnen die gespeicherten Informationen anzeigen und aktualisieren.<\/p>\n
2. Kategorien:<\/h4>\n
Die im linken Navigationsmen\u00fc der OpenCart Progressive Web App angezeigten Kategorien sind die gleichen wie im E-Commerce-Shop verf\u00fcgbar.<\/p>\n
3. CMS-Seiten:<\/h4>\n
Von hier aus k\u00f6nnen Sie auf verschiedene CMS-Seiten wie \u201e\u00dcber uns\u201c, \u201eKontakt\u201c, \u201eAllgemeine Gesch\u00e4ftsbedingungen\u201c usw. zugreifen. Diese Informationsseiten k\u00f6nnen \u00fcber das Admin-Panel der Erweiterung hinzugef\u00fcgt werden.<\/p>\n
4. Sprache(n):<\/h4>\n
Die Sprachoption erm\u00f6glicht es PWA-App-Benutzern, die Web-App in ihrer gew\u00fcnschten Sprache anzuzeigen.<\/p>\n
5. W\u00e4hrung(en):<\/h4>\n
Alle verf\u00fcgbaren W\u00e4hrungen auf Ihrer Website werden hier in der OpenCart Progressive Web App (PWA)-App angezeigt.<\/p>\n
6. Anmelden\/Abmelden:<\/h4>\n
Benutzer k\u00f6nnen sich \u00fcber diese Option einfach bei der OpenCart PWA-App an- und abmelden.<\/p>\n
3.3 Kategoriebildschirm:<\/h3>\n
![\"Kategorie-Bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Category-Screen.png\")
<\/a><\/p>\n\u00dcbersichtliche Kategoriebildschirme mit Listen- und Rasteransicht erm\u00f6glichen es den Benutzern, aus einer bestimmten Kategorie auszuw\u00e4hlen, was f\u00fcr sie am besten ist. Das gesamte Ladeninventar bleibt mit der OpenC Progressive Web App (PWA) Mobile App synchronisiert, und neue Erg\u00e4nzungen und \u00c4nderungen werden sogar in Echtzeit aktualisiert.<\/p>\n
1. Listen- und Rasteransicht:<\/h4>\n
Die Kategorien in der PWA-App f\u00fcr OpenCart k\u00f6nnen sowohl in der Listen- als auch in der Rasteransicht durchsucht werden.<\/p>\n
2. Produktsortierung:<\/h4>\n
Die Sortieroption erm\u00f6glicht es Online-Shoppern, die Produkte in der gew\u00fcnschten Sortierreihenfolge einzugrenzen und das richtige zu finden.<\/p>\n
3. Produktfilter:<\/h4>\n
Die OpenCart PWA Mobile App bietet die M\u00f6glichkeit, Produkte zu filtern, um die Produktsuche zu vereinfachen. Online-Shopper k\u00f6nnen die gew\u00fcnschten Produkte unter Kategorien finden, indem sie Filter f\u00fcr verschiedene Attribute wie Gr\u00f6\u00dfe, Farbe, Preis usw. verwenden.<\/p>\n
3.4 Produktbildschirm:<\/h3>\n
![\"Produkt-Bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Product-Screen-1.png\")
<\/a><\/p>\nDer Produktbildschirm der OpenCart Progressive Web App ist so einfach und faszinierend wie es nur geht. Mit allen notwendigen Optionen und Informationen \u00fcber das Produkt wird es f\u00fcr Benutzer zu einer Sache von Minuten, sich \u00fcber das Produkt, das er kaufen m\u00f6chte, sicher zu sein. F\u00fcr das Produkt sind mehrere Bilder mit den Optionen Auf Lager und Nicht auf Lager verf\u00fcgbar.<\/p>\n
1. Produktinfo & Pflege:<\/h4>\n
Hier werden die vollst\u00e4ndigen Produktinformationen, wie sie im Inventar verf\u00fcgbar sind, angezeigt.<\/p>\n
2. Kurzbeschreibung:<\/h4>\n
Benutzer k\u00f6nnen die kurze Beschreibung Ihres Produkts lesen, um sich schnell \u00fcber den Kauf zu entscheiden.<\/p>\n
3. Produktoptionen:<\/h4>\n
Alle produktbezogenen Optionen wie Gr\u00f6\u00dfe, Farbe usw. werden hier angezeigt.<\/p>\n
4. In den Warenkorb legen:<\/h4>\n
Mit dieser Schaltfl\u00e4che k\u00f6nnen Benutzer Produkte in den Warenkorb legen. Die Benutzer k\u00f6nnen den Warenkorb f\u00fcr den Kauf weiterverarbeiten.<\/p>\n
5. Teilen von Produkten in sozialen Netzwerken:<\/h4>\n
Die Freigabeoption f\u00fcr das Produkt erm\u00f6glicht es Benutzern, Produkte auf mehreren sozialen Kan\u00e4len zu teilen.<\/p>\n
3.5-Anmeldebildschirm<\/h3>\n
![\"Anmeldebildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Login-Screen-1.png\")
<\/a><\/p>\nDie 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.<\/p>\n
1. Anmelden:<\/h4>\n
Die App-Benutzer k\u00f6nnen sich mit ihren vorherigen E-Mail-Anmeldeinformationen einfach bei PWA-Apps authentifizieren und anmelden.<\/p>\n
2. Anmelden:<\/h4>\n
Alle neuen App-Benutzer k\u00f6nnen sich \u00fcber die OpenCart PWA-App anmelden und ihr Konto im Store erstellen. Das Anmeldeformular fragt nur nach den notwendigen Details, um ein Konto zu erstellen.<\/p>\n
3. Mit Facebook anmelden:<\/h4>\n
Die Benutzer k\u00f6nnen sich mit ihren Facebook-Kontoanmeldeinformationen bei der PWA-App anmelden.<\/p>\n
4. Mit Google anmelden:<\/h4>\n
Die Benutzer k\u00f6nnen sich mit ihren Google-Kontoanmeldeinformationen bei der PWA-App anmelden.<\/p>\n
3.6 Einkaufswagenbildschirm:<\/h3>\n
Der Warenkorb-Bildschirm der OpenCart PWA Mobile App zeigt alle Produkte an, die dem Warenkorb hinzugef\u00fcgt wurden. Die App-Benutzer k\u00f6nnen den Produktnamen, die Menge, den Gesamtpreis und die Versandkosten anzeigen. Dieser Bildschirm hat die folgenden Optionen:<\/p>\n
![\"Einkaufswagen-Bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Shopping-Cart-Screen-1.png\")
<\/a><\/p>\n1. Gutschein beantragen:<\/h4>\n
Mit dieser Option k\u00f6nnen Benutzer Website-Gutscheine verwenden und Rabattangebote nutzen.<\/p>\n
2. Gesamtproduktpreis:<\/h4>\n
Die Benutzer k\u00f6nnen die vollst\u00e4ndigen Kosten ihrer Einkaufstasche anzeigen, bevor sie fortfahren. Es wird automatisch nach jeder Aktualisierung mit Produktmenge oder Neuzug\u00e4ngen aktualisiert.<\/p>\n
3. Produktmenge aktualisieren:<\/h4>\n
Die Benutzer der PWA-App k\u00f6nnen sogar die Produktmenge mit der Option \u201eMenge aktualisieren\u201c aktualisieren.<\/p>\n
4. Produkt entfernen:<\/h4>\n
Die App-Benutzer k\u00f6nnen das Produkt einfach aus dem Warenkorb entfernen, indem sie einfach auf die Option \u201eEntfernen\u201c tippen.<\/p>\n
5. Einkauf fortsetzen:<\/h4>\n
Die App-Benutzer k\u00f6nnen den Warenkorb verlassen, um weitere Produkte in Ihrer App zu durchsuchen.<\/p>\n
6. Weiter zur Kasse:<\/h4>\n
Die Benutzer der PWA-App k\u00f6nnen weiter zu den Kassen- und Zahlungsbildschirmen gehen, indem sie einfach auf die Option \u201eWeiter zur Kasse\u201c tippen.<\/p>\n
3.7 Checkout-Bildschirm<\/h3>\n
Die Progressive Web App f\u00fcr OpenCart hat eine vereinfachte Ein-Bildschirm-Kasse mit nur relevanten Informationen. Die App-Benutzer k\u00f6nnen vollst\u00e4ndige Checkout-Details wie Versanddetails, Rechnungsdetails, Bestell\u00fcbersicht, Bestellkommentar, Zahlungs\u00fcbersicht anzeigen.<\/p>\n
![\"Checkout-Bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Checkout-Screen.png\")
<\/a><\/p>\n1. Versand- und Rechnungsdetails:<\/h4>\n
Dieser Bildschirm enth\u00e4lt Details zu den vom Benutzer gespeicherten Versand- und Rechnungsadressen. Der Benutzer kann die neue Lieferadresse bei Bedarf auch bearbeiten\/speichern.<\/p>\n
2. Bestell\u00fcbersicht:<\/h4>\n
Die App-Benutzer k\u00f6nnen Produktdetails anzeigen, bevor sie bezahlen.<\/h4>\n
3. Versandarten: Hier werden alle verf\u00fcgbaren Versandarten angezeigt. Benutzer k\u00f6nnen diejenige ausw\u00e4hlen, die ihren Bed\u00fcrfnissen entspricht.<\/p>\n
4. Kommentar zur Bestellung:<\/h4>\n
Benutzer k\u00f6nnen auch einen beliebigen Kommentar zu ihrer Bestellung hinzuf\u00fcgen, der f\u00fcr den Shop-Administrator auf der Bestell-Webseite im Backend sichtbar ist.<\/p>\n
6. Zahlungszusammenfassung:<\/h4>\n
Dieser Abschnitt zeigt die vollst\u00e4ndigen Zahlungsdetails f\u00fcr den Kauf an.<\/p>\n
7. Fahren Sie mit der Zahlung fort:<\/h4>\n
Die Benutzer der PWA-App werden zum Zahlungsbildschirm umgeleitet, nachdem sie auf die Schaltfl\u00e4che \u201eWeiter zur Zahlung\u201c getippt haben.<\/p>\n
3.8 Zahlungsbildschirm:<\/h3>\n
Der Zahlungsbildschirm der OpenCart PWA-App enth\u00e4lt alle im Gesch\u00e4ft verf\u00fcgbaren Web-View-Zahlungen. Online-K\u00e4ufer k\u00f6nnen \u00e4hnliche Zahlungserfahrungen sowohl auf Websites als auch in Apps finden.<\/p>\n
![\"Zahlungsbildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Payment-Screen-1.png\")
<\/a><\/p>\n3.9 Mein Konto-Bildschirm<\/h3>\n
![\"mein-konto-bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/My-Account-Screen-1.png\")
<\/a><\/p>\n![\"Bestelldetail-Bildschirm\"](\"https:\/\/www.knowband.com\/blog\/wp-content\/uploads\/2020\/06\/Order-Detail-Screen.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"