OpenCart One Page Advanced Checkout Extension – Benutzerhandbuch

 

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.

• Quellcode der OpenCart One Page Advanced Checkout Extension im gezippten Dateiformat.
• Benutzerhandbuch der OpenCart One Page Checkout-Erweiterung.

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

• Aktivieren deaktivieren: Mit dieser Option können Sie die vollständige Funktionalität von One Page Checkout für die Opencart-Website aktivieren oder deaktivieren. Wenn deaktiviert, wird den Kunden die standardmäßige Opencart-Kaufabwicklung angezeigt.
• Newsletter-Option aktivieren: Mit dieser Option können Sie das Newsletter-Anmeldefeld für Ihre Website ein- oder ausblenden. Wenn der Kunde die Newsletter-Option aktiviert, abonniert er Site-Updates (Newsletter).
• Gast automatisch registrieren: Sie können die automatische Registrierung für Ihre Gastkunden aktivieren (Benutzer, die einen Gast-Checkout durchführen). Diese Option sendet dem Kunden automatisch ein Passwort zur weiteren Nutzung des Kontos.
• Account registrieren: Indem Sie diese Option aktivieren, können Sie Passwortfelder beim Einzelseiten-Checkout angeben, wo der Benutzer sein Passwort eingeben kann, um sich zu registrieren.
• Gast anzeigen: Diese Option zeigt oder verbirgt die Gastoption im Anmeldebereich der Kasse. Mit dieser Option können Benutzer ihre Artikel als Gast auschecken.
• Benutzerdefinierten Stil hinzufügen: Mit dieser Option können Sie einen zusätzlichen benutzerdefinierten Stil (CSS-Code) einfügen, der auf der Vorderseite ihrer Website angezeigt wird.
• Testmodus: Sie können diese Option aktivieren, um die Funktionalität des One-Page-Checkout-Moduls zu testen, bevor Sie es für die Kunden live schalten.
• IP hinzufügen: Mit dieser Option können Sie die spezifische IP-Adresse eingeben, an der Sie die erweiterten Supercheckout-Funktionen testen möchten.

3.2 Anmeldeeinstellungen

• Facebook-Login aktivieren: Diese Option aktiviert oder deaktiviert die Facebook-Anmeldeoption, die auf der Vorderseite des einseitigen Checkout-Formulars angezeigt wird.
• Facebook-App-ID: Mit dieser Option können Sie die Facebook-App-ID festlegen, die für die Verbindung mit Ihrem Facebook-Konto erforderlich ist.
• Facebook-App-Geheimnis: Diese Option legt den geheimen Schlüssel der Facebook-App fest. Hinweis: Sie können die Facebook-App-ID und den geheimen Schlüssel von https://developers.facebook.com/ erhalten, was in Abschnitt 3.2.1 besprochen wurde
• Google-Login aktivieren: Diese Option aktiviert oder deaktiviert die Google-Anmeldeoption, die auf der Vorderseite des einseitigen Checkout-Formulars angezeigt wird.
• Google App-ID: Mit dieser Option können Sie die Google-App-ID festlegen, die für die Verbindung mit Ihrem Google-Konto erforderlich ist.
• Google-Client-ID: Mit dieser Option können Sie die Google-Client-ID festlegen.
• Zu guter Letzt, Google-App-Geheimnis:�Mit dieser Option wird der geheime Schlüssel der Google-App festgelegt.

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

• Versandarten anzeigen: Diese Option zeigt/versteckt die vollständige Liste der Versandmethoden, die auf der erweiterten Checkout-Seite bereitgestellt werden.
• Anzeigestil: Mit dieser Option können Sie den Anzeigestil für die Versandarten auswählen. Es kann nur ein Logobild, nur Text oder beides sein.
• Titel der Versandart anzeigen: Diese Option aktiviert oder deaktiviert den Titel für die jeweilige Versandart.
• Wählen Sie die Standard-Versandmethode: Mit dieser Option können Sie eine beliebige Versandmethode als Standardmethode auswählen.
• Titel: Diese Option legt den gewünschten Titel für die Versandart fest.
• Logo: Diese Option legt das Logobild für die Versandart fest.

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

• Zahlungsmethoden anzeigen: Diese Option zeigt/versteckt die vollständige Liste der Zahlungsmethoden, die auf der erweiterten Checkout-Seite bereitgestellt werden.
• Anzeigestil: Mit dieser Option können Sie den Anzeigestil für die Zahlungsmethoden auswählen. Es kann nur ein Logobild, nur Text oder beides sein.
• Wählen Sie die Standardzahlungsmethode: Mit dieser Option können Sie eine beliebige Zahlungsmethode als Standardmethode auswählen.
• Titel: Diese Option legt den gewünschten Titel für die Zahlungsmethode fest.
• Logo: Diese Option legt das Logobild für die Zahlungsmethode fest.

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.

• Produktbildgröße: Mit dieser Option können Sie die Bildgröße für die Produkte festlegen, die im Warenkorbbereich des einseitigen Checkouts angezeigt werden. Darüber hinaus können Sie die verschiedenen Warenkorbfelder ein- oder ausblenden, um Kunden des Geschäfts an- und abzumelden. Felder wie “Akzeptiere die Bedingungen”. Bestellen Sie außerdem Kommentare, die gemäß den Anforderungen Ihrer Website als optional oder optional gekennzeichnet sind.

<br>
3.6 Newsletter

• MailChimp aktivieren: Mit dieser Option von Opencart One Page Supercheckout können Sie die MailChimp-Integrationsfunktion für Ihren Shop aktivieren oder deaktivieren.
• MailChimp-API-Schlüssel: Mit dieser Option können Sie den MailChimp-API-Schlüssel festlegen, der Ihre Website mit dem MailChimp-Konto des Verkäufers verbindet.
• MailChimp-Liste: Mit dieser Option können Sie die mit dem MailChimp-Konto verbundene Liste abrufen und auswählen.

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.