Knowband Blog | Ecommerce Modules

Opencart One Page Checkout – User Manual

Joe Parker


1.0 Einführung

Die meisten Besucher verlassen die Kasse für das gewünschte Produkt, nur weil sie den Prozess komplex und langwierig finden. Dies führt letztendlich zu immer mehr aufgegebenen Karren. Knowband hat angeboten, die Austritts- und Warenkorbabbruchraten zu kontrollierenOpenCart One Page Checkout Pro Plugin für OpenCart-Shops. Darüber hinaus können Sie durch die Implementierung von One Page Checkout für Ihre E-Commerce-Website die Konversionsraten verbessern, da die mehrstufige Checkout-Seite durch eine Single-Page-Checkout ersetzt wird.

Mobile Ansicht:

Herausragende Merkmale der OpenCart One Page Checkout-Erweiterung:

  1. Die Erweiterung bietet eine Gast-Checkout-Funktion, mit der die Benutzer ihre Bestellungen als Gastkunden einfach und schnell abschließen können, ohne ein neues Konto im Online-Shop zu erstellen.
  2. Die OpenCart Fast Checkout-Erweiterung ermöglicht es den Kunden, sich mit ihren Google-, Facebook- und Paypal-Konten schnell auf der Website anzumelden.
  3. Die Felder auf der Checkout-Seite können vom Administrator einfach über das Backend der OpenCart One Page Checkout Pro-Erweiterung angepasst werden. Der Store-Administrator kann beliebige Felder auf der Checkout-Seite ein- oder ausblenden oder sie optional oder obligatorisch machen, damit die Benutzer sie ausfüllen können. Der Administrator kann die Positionsfelder auch per Drag-and-Drop-Funktion neu anordnen.
  4. Der Ladenbesitzer kann das Erscheinungsbild der Checkout-Seite einfach anpassen, einschließlich der Änderung der Farbe der Schaltflächen, der Hintergrundfarbe der Schaltflächen, der Textfarbe usw.
  5. Der OpenCart One Page Supercheckout bietet Kompatibilität mit mehreren Geschäften und mehreren Sprachen.
  6. Die OpenCart One Step Checkout-Erweiterung unterstützt fast alle wichtigen Versand- und Zahlungsmethoden, die das Vertrauen der Kunden stärken, ihre gewünschte Methode auf der Checkout-Seite auszuwählen.
  7. Der E-Händler kann jedes der Designlayouts aus 3 verschiedenen Checkout-Layouts anwenden, dh 1-spaltig, 2-spaltig oder 3-spaltig. Die Felder können einfach per Drag & Drop neu angeordnet werden.
  8. Das OpenCart Quick Checkout-Modul bietet eine Integration mit MailChimp, Klaviyo und SendinBlue, mit der Sie die Datenbank Ihrer Benutzer ohne manuellen Aufwand automatisch mit diesen Ihren Konten synchronisieren können.
  9. Der E-Händler kann auch das Erscheinungsbild der Erweiterung durch benutzerdefiniertes CSS und JS anpassen.
  10. Das OpenCart Responsive One Step Checkout-Modul bietet die Testmodus-Funktion, mit der der Ladenbesitzer die vorgenommenen Anpassungen überprüfen und anzeigen kann, bevor er die Anpassungen live auf der Website vornimmt.
  11. Das OpenCart Simplified Checkout-Modul bietet die Ship2Pay-Funktion, mit der der Ladenbesitzer bestimmte Zahlungsmethoden mit ausgewählten Liefermethoden abbilden kann. Es blendet alle anderen Zahlungsmethoden bei der Auswahl einer bestimmten Liefermethode aus und zeigt dem Benutzer nur diejenigen Zahlungsmethoden an, die der ausgewählten Liefermethode zugeordnet sind.

2.0�Installationsanleitung von�OpenCart One Page Checkout-Erweiterung

Bevor Sie mit der Installation beginnen, müssen Sie die�OpenCart One Page Checkout-Erweiterung aus dem Knowband-Store. Nach dem Kauf erhalten Sie die folgenden Dateien in Ihrer registrierten E-Mail.

Um nun diesen OpenCart Single Page Checkout in Ihrem Online-Shop zu installieren, befolgen Sie die angegebenen Schritte: 1. Entpacken Sie die ZIP-Datei. Sie erhalten die Ordner wie im Bild unten gezeigt


2. Kopieren Sie alle Ordner der ZIP-Datei in das Stammverzeichnis der OpenCart-Einrichtung über den FTP-Manager.

Schritte zum Installieren der OCMOD-Datei

Also,�OpenCart One Page Checkout Pro ist nun erfolgreich installiert und kann in Ihrem Geschäft verwendet werden. Gehen Sie zum Admin-Menü und klicken Sie auf die Erweiterungen und dann auf Module. Klicken Sie auf die Schaltfläche „Konfigurieren“ neben�Knowband Supercheckout.

3.0 Admin-Oberfläche von�Responsives One-Step-Checkout-Modul von OpenCart

Unmittelbar nach der erfolgreichen Installation der One Page Checkout für OpenCart-Website können Sie die Checkout-Formularfelder gemäß Ihren Anforderungen konfigurieren. Sie müssen in der angegebenen Reihenfolge durch die Einstellungen navigieren: Admin Panel > Erweiterungsoptionen > Module >�Knowband Supercheckout

Die leicht verständliche Administrationsoberfläche von�OpenCart One Page Checkout Pro ist in zehn Abschnitte unterteilt, nämlich: 1. Allgemeine Einstellungen 2. Customizer 3. Login-Einstellungen 4. Zahlungsadresse 5. Lieferadresse 6. Versandart 7. Ship2Pay 8. Zahlungsmethode 9. Warenkorb 10. Design 11. Newsletter Jeder dieser Abschnitte wurde unten besprochen:

3.1 Allgemeine Einstellungen

Konfigurator

Auf der Registerkarte Customizer können Sie die Hintergrundfarbe der Schaltfläche, die Schaltflächenrandfarbe, die Schaltflächenvorschau, die Textfarbe der Schaltfläche, die untere Farbe der Schaltflächenumrandung, die Hintergrundfarbe der Schaltfläche Mein Konto, die Hintergrundfarbe der Anmeldeschaltfläche, die Hintergrundfarbe der Anmeldeschaltfläche, die Hintergrundfarbe der Abmeldeschaltfläche und den Coupon anpassen Hintergrundfarbe der Code-Schaltfläche, Hintergrundfarbe der Gutschein-Code-Schaltfläche usw.

3.2-Login

Auf dieser Registerkarte finden Sie Optionen zum Konfigurieren der Anmeldeoptionen für Facebook, Google und Paypal, wie unten gezeigt.

Detaillierte Anweisungen zum Generieren von App ID, App Secret Key und Client ID finden Sie im nächsten Abschnitt.

3.2.1 Wie richte ich die Facebook-Anmeldung ein?

Die Facebook-App kann durch die folgenden Schritte erstellt werden:-

1:�Gehen Sie zur angegebenen�URL: https://developers.facebook.com/apps/

2:�Klicken Sie auf die Schaltfläche „App erstellen“.

3 & 4: Wähle aus „Vernetzte Erlebnisse schaffen“ Option und klicken Sie auf die Schaltfläche „Weiter“.

5 & 6: Fügen Sie “App-Anzeigename”, “App-Kontakt-E-Mail” hinzu und wählen Sie aus der Frage “Haben Sie ein Business Manager-Konto?” und klicken Sie dann auf die Schaltfläche “App erstellen”.

7 & 8:�Nachdem Sie auf „App-ID erstellen“ geklickt haben, müssen Sie eine Sicherheitsüberprüfung wie gezeigt durchlaufen:

9:�Klicken Sie auf die Registerkarte „Einstellung“.

Freundlich hinzufügen Rückruf-URL löschen. Sie können die Beschreibung der Callback-URL löschen hier überprüfen -�https://developers.facebook.com/docs/development/create-an-app/app-dashboard/data-deletion-callback/

10-15: In der Dropdown-Liste stehen zwei Optionen zur Verfügung, Basic und Advanced, klicken Sie auf „Basic“. Geben Sie dann Ihre „App-Domain“, „Datenschutz-URL“, „URL der Nutzungsbedingungen“, „Symbol hinzufügen“, „Kategorie auswählen“ ein und klicken Sie auf die Schaltfläche „Änderungen speichern“.

App Domains:

yourdomain.com ist�und beseitigen Muskelschwäche

yourdomain.com/store ist�unrichtig

www.domain.com ist�unrichtig

16:�Klicken Sie nun auf „+Plattform hinzufügen“.

17:�Und wählen Sie Website als Plattform aus.

18 & 19:�Geben Sie jetzt Ihre Website-URL ein.

20&21:�Klicken Sie auf “Produkte+” und klicken Sie auf der Registerkarte „Facebook-Anmeldung“ auf die Schaltfläche „Setup“.

22:�Wählen Sie das Web als Plattform für die App aus.

23: Fügen Sie die Site-URL hinzu und klicken Sie auf Speichern.

24-26:�Klicken Sie auf Einstellungen und fügen Sie gültige OAuth-Umleitungs-URIs hinzu.

Gültige OAuth-Umleitungs-URIs:

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout&fblogin=1

27: Wähle aus “In Entwicklung” .

28 & 29: Wählen Sie eine Kategorie aus dem Dropdown-Menü und klicken Sie auf die Schaltfläche „Modus wechseln“.

30:�Kopieren Sie die App-ID und das App-Geheimnis und fügen Sie sie in die im Modul bereitgestellten Felder ein.

Letzter Schritt:

1. Melden Sie sich mit dem JavaScript-SDK an.

Setzen Sie dieses Feld auf Ja.

2. Zugelassene Domänen für das JavaScript-SDK

Legen Sie die Domäne des Geschäfts fest.

Hinweis:- Hier sollte die Domain in den folgenden Typ eingegeben werden.

https://octest.knowband.com

3.2.2 Wie richte ich die Google-Anmeldung ein?

Führen Sie die folgenden Schritte aus, um die Client-ID und das Client-Geheimnis zu erhalten. 1. Gehen Sie auf den Link “ https://console.developers.google.com/project 2. Klicken Sie auf „Projekt erstellen“.

3. Geben Sie Ihren gewünschten Projektnamen und Organisationsnamen ein und klicken Sie auf „Erstellen“.


4. Gehen Sie zu API Manager, klicken Sie auf das linke Menü, klicken Sie auf API & Services und dann auf Credentials erstellen.


5. Wählen Sie die Option OAuth-Client-ID aus.

6. Klicken Sie auf die Schaltfläche „Zustimmungsbildschirm konfigurieren“. Geben Sie “E-Mail-ID”, “Produktname” ein und klicken Sie dann auf die Schaltfläche “Speichern”.


7. Wählen Sie die Option „Extern“ und klicken Sie auf die Schaltfläche „Erstellen“.


Verwenden Sie die folgende Umleitungs-URL https://your_store_url/index.php?route=supercheckout/supercheckout 8. Fügen Sie den App-Namen und die Benutzer-Support-E-Mail hinzu.

9. Klicken Sie auf Domäne hinzufügen und Autorisierte Domäne hinzufügen und klicken Sie dann auf Speichern und fortfahren.

10. Klicken Sie auf die Schaltfläche Speichern und fortfahren.

Klicken Sie auf +Benutzer hinzufügen.

11. Fügen Sie einen Benutzernamen hinzu und klicken Sie auf die Schaltfläche Hinzufügen.

12. Der hinzugefügte Benutzer wird sichtbar und klicken Sie dann auf die Schaltfläche Speichern und fortfahren.

13. Klicken Sie auf den Oath-Inhaltsbildschirm und dann auf die Schaltfläche Veröffentlichen Hinzufügen.

14. Klicken Sie auf Credentials und dann auf die Schaltfläche +Create Credentials und wählen Sie dann Oath Client ID.

15. Fügen Sie den Anwendungstyp und den Namen hinzu und klicken Sie dann auf die Schaltfläche Hinzufügen.

16. Fügen Sie die URLs hinzu und klicken Sie dann auf die Schaltfläche Erstellen.

17. Kopieren Sie die Client-ID und das Client-Geheimnis und fügen Sie sie in das unten gezeigte Textfeld im One-Page-Checkout-Modul von Prestashop ein

So generieren Sie den Google-API-Schlüssel:

1) Gehen Sie zu API Manager, klicken Sie auf das linke Menü, klicken Sie auf API & Services und dann auf Credentials.

2) Klicken Sie auf Anmeldeinformationen erstellen und wählen Sie dann den API-Schlüssel aus.

3) Kopieren Sie den API-Schlüssel und geben Sie ihn in das Feld Google App Id auf der Anmeldeseite des Admin-Endmoduls ein.

3.3 Zahlungsadresse

Diese Registerkarte enthält Einstellungen für die Felder, die im Abschnitt Zahlungs- oder Rechnungsadresse auf der Checkout-Seite wie unten gezeigt angezeigt werden sollen.

  1. Es besteht aus zwei Abschnitten. Der linke ist für Gastkunden und der rechte für eingeloggte Kunden.
  2. Um ein Feld auf der Checkout-Seite anzuzeigen/auszublenden, aktivieren Sie das Kontrollkästchen links neben dem Etikett anzeigen.
  3. Um ein Feld zu einem Pflichtfeld zu machen (erforderliches Feld), aktivieren Sie das Kontrollkästchen links neben Require Label.
  4. Die Felder können auch entsprechend der Anforderung neu angeordnet werden. Um die Anordnung neu anzuordnen, bewegen Sie einfach den Cursor auf das Drag-Symbol und ziehen Sie das Feld per Drag & Drop an die gewünschte Stelle, wie unten gezeigt.
  5. Beim Speichern werden die Felder gemäß den Änderungen neu angeordnet.

3.4 Lieferadresse

Diese Registerkarte enthält Einstellungen für die Felder, die im Abschnitt Lieferadresse auf der Checkout-Seite wie unten gezeigt angezeigt werden sollen.

  1. Es besteht aus zwei Abschnitten. Der linke ist für Gastkunden und der rechte für registrierte Kunden.
  2. Um ein Feld auf der Checkout-Seite anzuzeigen/auszublenden, aktivieren Sie das Kontrollkästchen links neben dem Etikett anzeigen.
  3. Um ein Feld zu einem Pflichtfeld zu machen (erforderliches Feld), aktivieren Sie das Kontrollkästchen links neben Require Label.
  4. Die Felder können auch entsprechend der Anforderung neu angeordnet werden. Um die Anordnung neu anzuordnen, bewegen Sie einfach den Cursor auf das Drag-Symbol und ziehen Sie das Feld per Drag & Drop an die gewünschte Stelle, wie unten gezeigt.
  5. Beim Speichern werden die Felder gemäß den Änderungen neu angeordnet.

3.5 Versandart

Diese Registerkarte enthält Einstellungen für die Versandart, die auf der Checkout-Seite angezeigt wird. Es enthält Einstellungen zum Aktivieren/Deaktivieren und Festlegen der Standardversandmethode, wie unten gezeigt:

3.6 Ship2Pay

Die vom OpenCart Supercheckout-Modul angebotene ship2pay-Funktion deaktiviert automatisch die Zahlungsmethoden basierend auf der vom Kunden ausgewählten Versandmethode. Das heißt, der Administrator kann einige bestimmte Zahlungsoptionen bestimmten Versandoptionen im Geschäft zuordnen.

3.7 Zahlungsmethode

Diese Registerkarte enthält Einstellungen für Zahlungsmethoden, die auf der Checkout-Seite angezeigt werden, z. B. Aktivieren/Deaktivieren oder Auswählen einer Standardmethode.

3.8�Warenkorb

In diesem Abschnitt finden Sie die Einkaufswagenfelder, die in zwei Abschnitte unterteilt sind, der linke ist für Gastkunden und der rechte für registrierte oder eingeloggte Kunden.

  1. Um den Einkaufswagen auf der Checkout-Seite anzuzeigen/auszublenden, deaktivieren Sie das Kontrollkästchen vor dem Etikett „Warenkorb anzeigen“.
  2. Um eine beliebige Spalte im Warenkorb zu aktivieren/deaktivieren, aktivieren/deaktivieren Sie das Kontrollkästchen vor der jeweiligen Spalte.
  3. Um die Popup-Bilder für das Produkt zu aktivieren/deaktivieren, aktivieren/deaktivieren Sie das Kontrollkästchen vor der entsprechenden Spalte.
  4. Um die Größe des Bild-Popups zu ändern, geben Sie die Breite und Höhe des Popups in das Textfeld vor der Bezeichnung Produktbildgröße ein.
  5. Gutschein-, Prämienpunkte- und Gutscheinoptionen können auch deaktiviert oder aktiviert werden, indem das Kontrollkästchen vor dem jeweiligen Feld aktiviert/deaktiviert wird. Bitte beachten Sie, dass das Textfeld für Prämienpunkte nur dann auf der Supercheckout-Seite sichtbar ist, wenn die folgenden drei Bedingungen erfüllt sind. a.) Der Kunde muss eingeloggt sein. b.) Er muss mindestens 1 Prämienpunkt auf seinem Konto haben. c.) Er muss ein Produkt im Warenkorb haben, das mit Prämienpunkten gekauft werden kann.

Bestätigen:

  1. Diese Registerkarte ist wiederum in zwei Abschnitte unterteilt, der linke ist für Gastkunden und der rechte für registrierte oder eingeloggte Kunden.
  2. Um das Kommentarfeld für die Bestellung des Kunden zu aktivieren, aktivieren Sie das Kontrollkästchen davor Hinterlasse einen Kommentar für das Bestelletikett und deaktivieren Sie dasselbe Kontrollkästchen, um es zu deaktivieren.
  3. Aktivieren/deaktivieren Sie das Kontrollkästchen vor Ich stimme den Bedingungen zu, um der Bedingung oder anderen Informationen zuzustimmen, die im Admin für den Shop gespeichert sind.

3.9 Design-Registerkarte

Dieser Reiter enthält die Einstellungen für die Gestaltung von�OpenCart One Page Checkout Pro wie unten gezeigt:

1-Spalte

2-Spalte

3-Spalte

Sie können die Breite jeder Spalte ganz einfach ändern, indem Sie den Schieberegler oben wie unten gezeigt anpassen.

 

Außerdem können Sie verschiedene Blöcke der Checkout-Seite durch einfaches Ziehen und Ablegen neu positionieren. Beim Speichern wird der Block gemäß den Änderungen auf der Checkout-Seite neu angeordnet.

<br>
3.6 Newsletter

Durch Klicken auf die Registerkarte „Newsletter“ der�Responsives One-Step-Checkout-Modul von OpenCart, können Sie die Einstellungen von MailChimp, SendinBlue und Klaviyo Integrator wie unten gezeigt konfigurieren:

Dasselbe gilt für SendinBlue und Klaviyo.

4.0 Frontschnittstelle von�OpenCart One Step Checkout-Erweiterung

Wenn der Benutzer auf die Schaltfläche „In den Einkaufswagen“ klickt, die einem Produkt entspricht, und seinen Checkout durchführt, sieht er den folgenden Supercheckout auf seinem Bildschirm.

OpenCart One Page Checkout-Erweiterung: https://www.knowband.com/opencart-one-supercheckout-pro

OpenCart One Page Checkout Admin-Demo: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=admin&lang=en

OpenCart One Page Checkout Front-Demo: https://opencartdemo.knowband.com/demo/index.php?module=oc_onepagecheckout_knowband&demo=front&lang=en

OpenCart One Page Checkout vom offiziellen OpenCart Marketplace: https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15353