Knowband Blog | Ecommerce Modules

OpenCart One Page Advanced Checkout Extension – Benutzerhandbuch

Joe Parker

 

1.0 Einführung

Jeder 1 von 10 Online-Benutzern muss seinen Warenkorb nur wegen des langen und komplizierten Bezahlvorgangs verlassen. Darüber hinaus können Sie den Checkout Ihrer Website zu einem interessanten Checkout optimieren, indem Sie die OpenCart One Page Advanced Checkout Extension von Knowband integrieren. Tatsächlich verwandelt das responsive Checkout-Popup-Modul von OpenCart den gesamten Checkout-Prozess in ein einziges Ajax-basiertes Popup. Darüber hinaus wird es über den Bildschirm ausgelöst, wenn der Kunde sich entscheidet, ein Produkt im Geschäft zu kaufen. Somit reduziert dieser One Page Checkout für OpenCart das Verlassen des Warenkorbs, indem der gesamte Kaufvorgang in einem einzigen Popup angeboten wird, ohne die nächste Seite zu laden.

1.1 Funktionen von One Page Checkout für OpenCart

Die Integration von One Page Checkout für den OpenCart Store ist keine große Sache, da es eine einfache Anpassung bietet, ohne dass technische Kenntnisse oder bestehende Codeänderungen erforderlich sind. Ermöglichen Sie Ihren Kunden also schnell, das Produkt über ein einziges Popup zu kaufen, und geben Sie ihnen so einen schnelleren Checkout. Darüber hinaus ein weniger Unterbrechungserlebnis. Nachfolgend sind die auffälligen Highlights dieser OpenCart One Page Checkout-Erweiterung aufgeführt. 1. Das OpenCart One Page Checkout-Modul zeigt die gesamten Checkout-Felder in Form eines responsiven Ajax-basierten Checkout-Popups im Frontend an. Des Weiteren von der Website, ohne auf eine andere URL umzuleiten. 2. Dieser One Page Checkout für OpenCart bietet eine nahtlose Möglichkeit, die Newsletter-Abonnements für das Online-Geschäft zu steigern. 3. Das reaktionsschnelle Checkout-Popup, das mit dem vereinfachten Checkout-Modul von OpenCart integriert wurde, kann mithilfe der Umschalttaste im Backend einfach aktiviert oder deaktiviert werden. 4. Die Gastregistrierungsfunktion des reaktionsschnellen Checkout-Popups von OpenCart registriert den Kunden automatisch auf der Website. Senden Sie ihnen außerdem das Login-Passwort per E-Mail. 5. Sie haben die Flexibilität, die Gast-Checkout-Funktion des OpenCart One Page Checkout-Moduls zu aktivieren oder zu deaktivieren. 6. Mit dieser OpenCart Single Page Checkout-Erweiterung können Sie der erweiterten Checkout-Seite CSS-Code hinzufügen. 7. Das Einzelseiten-Checkout-Modul von OpenCart bietet eine Testmodusfunktion, mit der Sie die erweiterte Funktionalität der Checkout-Seite auf einer bestimmten IP testen können. 8. Bieten Sie Ihren Kunden mit dem vereinfachten Checkout-Modul von OpenCart die Vorteile sozialer Anmeldeoptionen. Zum Beispiel Google und Facebook über die Checkout-Seite. 9. Mit der OpenCart Fast Checkout-Erweiterung können Sie Zahlungs- und Lieferadressenfelder für eingeloggte und Gastkunden des Geschäfts unterschiedlich anzeigen / ausblenden. 10. Die benutzerdefinierten Adressfeldmarkierungen sind erforderlich oder optional mit Hilfe dieses OpenCart One Page Supercheckout-Moduls. 11. Mit One Page Checkout für die OpenCart-Website können Sie den Kunden mehrere Versand- und Zahlungsmethoden anbieten, die über das Backend konfigurierbar sind. 12. Das reaktionsschnelle Checkout-Popup-Modul von OpenCart erleichtert Ihnen das Festlegen eines gewünschten Logobilds und Titels für jede der Zahlungs- und Versandmethoden, die auf der Supercheckout-Seite angezeigt werden. 13. Die ship2pay-Funktion der OpenCart Quick Checkout-Erweiterung wählt automatisch die Zahlungsmethode aus, die jeder vom Kunden ausgewählten Versandmethode entspricht. 14. OpenCart responsive Checkout-Popup-Erweiterung bietet einen konfigurierbaren Warenkorb, dessen Felder gemäß den Geschäftsanforderungen festgelegt werden können. 15. Das OpenCart One Page Checkout-Modul ist mit mehreren Geschäften und mehrsprachig kompatibel. 16. Die Quick-Checkout-Erweiterung von OpenCart bietet den Kunden ein responsives Layout für Mobilgeräte. 17. Die MailChimp Integrator-Funktion des OpenCart Single Page Checkout synchronisiert automatisch die Kundendaten mit dem verbundenen MailChimp-Konto des Verkäufers.

1.2 Frontschnittstelle des OpenCart Responsive Checkout Popup-Moduls

Wenn der Benutzer auf die Schaltfläche „In den Einkaufswagen“ klickt, die einem Produkt entspricht, sieht er den folgenden responsiven Checkout-Schieberegler auf seinem Bildschirm.

Abschnitt „Warenkorbübersicht“ von OpenCart One Page Advanced Checkout

Wenn sie auf die Schaltfläche „Zur Kasse“ klicken, können sie außerdem das vollständige erweiterte Bestellformular in einem einzigen Durchgang anzeigen und ausfüllen, wie in den folgenden Bildern gezeigt:

Konto-Login-Bereich

Wenn der Kunde das Kontrollkästchen „An dieselbe Adresse versenden“ deaktiviert, wird der Abschnitt „Lieferadresse“ wie unten gezeigt angezeigt:


Abschnitt Versand- und Zahlungsmethoden

2.0 Installationsanleitung der OpenCart One Page Advanced Checkout-Erweiterung

Bevor Sie mit der Installation beginnen, müssen Sie das OpenCart One Page Checkout-Modul im Knowband Store kaufen. Außerdem erhalten Sie nach dem Kauf die folgenden Dateien in Ihrer registrierten E-Mail.

Um nun diesen OpenCart Advanced Checkout in Ihrem Online-Shop zu installieren, folgen Sie den angegebenen Schritten: 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. OpenCart One Page Advanced Checkout ist jetzt also erfolgreich installiert. Darüber hinaus ist es in Ihrem Geschäft einsatzbereit. Gehen Sie weiter zum Admin-Menü. Klicken Sie außerdem auf die Erweiterungen und klicken Sie dabei auf die Schaltfläche Konfigurieren neben One Page Advanced Checkout.

3.0 Admin-Oberfläche von OpenCart Responsive Checkout Popup

Unmittelbar nach erfolgreicher Installation von One Page Checkout für OpenCart auf der Website können Sie die Checkout-Formularfelder gemäß Ihren Anforderungen konfigurieren. Außerdem müssen Sie in der angegebenen Reihenfolge durch die Einstellungen navigieren: Admin Panel > Extensions > Modules > One Page Advanced Checkout

Die einfach zu verstehende Verwaltungsoberfläche der OpenCart Fast Checkout-Erweiterung ist in neun Abschnitte unterteilt, nämlich:

  1. Allgemeine Einstellungen
  2. Anmeldeeinstellungen
  3. Zahlungsadresse
  4. Versandadresse
  5. Versandart
  6. Ship2Pay
  7. Bezahlverfahren
  8. Warenkorb
  9. Newsletter

3.1 Allgemeine Einstellungen

3.2 Anmeldeeinstellungen

Hinweis: Sie können die Google-App-ID, die Client-ID und den geheimen Schlüssel von https://code.google.com/apis/console erhalten, was in Abschnitt 3.2.2 besprochen wurde

3.2.1 So richten Sie 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 „Neue App hinzufügen“. 3&4: Geben Sie Ihren App-Namen und Ihre E-Mail-ID ein und klicken Sie dann auf die Schaltfläche „App-ID erstellen“.


5&6: Nachdem Sie auf App-ID erstellen geklickt haben, müssen Sie eine Sicherheitsüberprüfung wie gezeigt durchlaufen:

7: Klicken Sie auf die Registerkarte „Einstellung“.

8-13: In der Dropdown-Liste stehen zwei Optionen zur Verfügung, Basic und Advanced, klicken Sie auf „Basic“. Geben Sie dann Ihre “App-Domain”, “Kontakt-E-Mail”, “Datenschutz-URL”, “URL der Allgemeinen Geschäftsbedingungen”, “Logo hinzufügen”, “Kategorie auswählen” ein und klicken Sie auf die Schaltfläche “Änderungen speichern”. App-Domains: yourdomain.com ist richtig yourdomain.com/store ist falsch www.domain.com ist falsch

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


15: Und wählen Sie Website als Plattform aus


16: Geben Sie nun Ihre Site-URL ein.


17&18: Klicken Sie auf „Produkte+“ und wählen Sie Facebook-Login aus.


19: Wählen Sie Web als Plattform für die App aus.


20: Klicken Sie nun auf Speichern.


21&22: 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


23&24: Klicken Sie auf „App-Überprüfung“. 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 im Modul bereitgestellten Felder ein.

3.2.2 So richten Sie Google Login 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 die Dropdown-Option, die in Schaltfläche ” 2 ” hervorgehoben ist, und klicken Sie dann auf “Projekt erstellen”.

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


4. Gehen Sie zu API Manager, klicken Sie auf Anmeldeinformationen erstellen und wählen Sie die Option OAuth-Client-ID aus.

5. Klicken Sie auf die Schaltfläche „Zustimmungsbildschirm konfigurieren“.

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


7. Wählen Sie “Webanwendung”, geben Sie “Name”, “Autorisierte umgeleitete URIs” wie unten erwähnt ein und klicken Sie auf die Schaltfläche “Erstellen”.


Verwenden Sie die folgende Weiterleitungs-URL

https://your_store_url/index.php?route=kbstepcheckout/kbstepcheckout

8. Kopieren Sie die Client-ID und das Client-Geheimnis.

9. Fügen Sie die Client-ID und das Client-Geheimnis in das unten gezeigte Textfeld im Admin-Bereich des One-Page-Checkout-Moduls 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

Mit OpenCart One Page Checkout können Sie jedes Feld für die Zahlungsadresse ein- oder ausblenden. Die Felder können für eingeloggte und ausgeloggte Kunden separat aktiviert oder deaktiviert werden. Sie können jedes Feld als Pflichtfeld markieren, unterschiedlich für eingeloggte und ausgeloggte Kunden des Shops. Darüber hinaus können Sie die Adressfelder mit einer einfachen Drag-and-Drop-Aktion neu anordnen.

3.4 Lieferadresse

 

Das reaktionsschnelle Checkout-Popup-Modul von OpenCart ermöglicht es Ihnen, jedes Feld für die Lieferadresse ein- oder auszublenden. Die Felder können für eingeloggte und ausgeloggte Kunden separat aktiviert oder deaktiviert werden. Mit OpenCart One Page Advanced Checkout können Sie jedes Feld als erforderlich markieren, unterschiedlich für eingeloggte und ausgeloggte Kunden des Geschäfts. Darüber hinaus können Sie die Adressfelder mit einer einfachen Drag-and-Drop-Aktion neu anordnen. Hinweis: Um weitere benutzerdefinierte Felder in den Abschnitten „Zahlungsadresse“, „Lieferadresse“, „Warenkorb“ oder „Konto“ der Kasse einzuschließen und anzuzeigen, lesen Sie Abschnitt 3.10

3.5 Versandart

Ebenso können Sie den Titel und das Logobild für alle Versandmethoden mit diesem OpenCart One Page Advanced Checkout-Modul ändern.

3.6 Ship2Pay

3.7 Zahlungsmethode

Ebenso können Sie den Titel und das Logobild für alle Zahlungsmethoden mit Hilfe von Supercheckout auf einer Seite ändern.

3.8 Warenkorb

In diesem Abschnitt von OpenCart One Page Supercheckout können Sie den Einkaufswagen anpassen und in Ihrem Geschäft so anzeigen, wie Sie es möchten. Die Bildgröße von Warenkorbartikeln kann einfach geändert werden, indem Sie die Bildhöhe und -breite festlegen.

<br>
3.6 Newsletter

3.9.1 So konfigurieren Sie MailChimp

  1. Melden Sie sich bei Ihrem Mail-Chimp-Konto an.
  2. Klicken Sie auf die Registerkarte in der rechten Ecke > Wählen Sie Profil > Extras > API-Schlüssel.
  3. Hier kann der Administrator einen API-Schlüssel erstellen, indem er auf die Schaltfläche „Schlüssel erstellen“ klickt.
  4. Kopieren Sie den API-Schlüssel.
  5. Der Administrator kann auch eine andere Liste für jeden Social-Login-Kunden erstellen, indem er in der oberen Menüleiste auf „Liste“ klickt.
  6. Fügen Sie nun den API-Schlüssel in den Abschnitt Bereitgestellter Mail-Chimp-API-Schlüssel ein und klicken Sie auf die Schaltfläche “Get List”.
  7. Wählen Sie die Liste aus dem Dropdown-Menü aus.

3.10 So fügen Sie der Supercheckout-Seite benutzerdefinierte Felder hinzu, bearbeiten oder löschen

Um benutzerdefinierte Felder zu einem beliebigen Abschnitt von One Page Checkout hinzuzufügen, können Sie auf der Registerkarte „Kunden“ auf der linken Seite der Verwaltungsoberfläche zur Option „Benutzerdefinierte Felder“ gehen.