Individuellen Bestellvorgang konfigurieren

Der Bestellvorgang bezeichnet den Prozess des Kaufens im Webshop von dem Augenblick an, in dem der Kunde einen Artikel in den Warenkorb legt, bis zu dem Moment, in dem er die Bestellung abschickt. Der individuelle Bestellvorgang ermöglicht Ihnen die volle Kontrolle über das Aussehen, den Funktionsumfang und den Verlauf des Vorgangs. Sie können in bis zu 10 Schritten festlegen, wie ein Kunde Ihren persönlichen Bestellvorgang durchlaufen soll. Zusätzlich können Sie die Schritte Login, Logout, Kundenregistrierung, Passwort vergessen und Bestellbestätigung selbst gestalten.
Auf dieser Seite wird Ihnen anhand des vorkonfigurierten individuellen Bestellvorgangs aus dem Standarddesign Callisto Light beschrieben, wie der individuelle Bestellvorgang aufgebaut ist und welche Techniken eingesetzt wurden, um ihn so zu gestalten. Es wird also generell darauf eingegangen wie Anpassungen vorgenommen werden ohne eine konkrete Anpassung vorzunehmen.

 

Voraussetzungen

Für die Beschreibungen wird Folgendes vorausgesetzt:

  • Benutzung des Individuellen Bestellvorgangs
  • Sicherer Umgang mit dem plentymarkets CMS
  • Erfahrung mit der Einrichtung von Zahlungsdienstleistern (z.B. Paypal, Klarna, Payone)

Kategorie-Typ: Container

Mit dem individuellen Bestellvorgang wurden Kategorien des Typs Container eingeführt. Kategorien dieses Typs besitzen die besondere Fähigkeit auf alle globalen Template-Variablen und Funktionen der Checkout-Templates aus dem Bereich CMS » Webdesign » Checkout zurückgreifen zu können. Dadurch ist es möglich den Bestellvorgang mithilfe von Kategorien abzubilden und dabei keinerlei Templates (beispielsweise CheckoutMethodsOfPaymentList) zu verwenden. Die benötigten Daten können über REST-Calls abgerufen werden. Die Kategorien Ihrer Bestellschritte müssen in den Design-Einstellungen eines Designs im Menü CMS » Webdesign hinterlegt werden. Eine kurze Einführung wie Sie die Kategorien hinterlegen, finden Sie unter Individueller Bestellvorgang in unserem Handbuch.

Aufbau des Individuellen Bestellvorgangs in Callisto Light

Im Standarddesign Callisto Light ist der Bestellvorgang in acht Schritte aufgeteilt. Diese acht Schritte sind Kategorien des Typs Container. Der erste Schritt ist der Warenkorb selbst, danach folgt die Anmeldung, in der der Kunde entscheidet, ob er als Gast zur Kasse geht oder als registrierter Benutzer. Danach folgt der Schritt Kasse. Die Kategorie Kasse beinhaltet die nachfolgenden vier Bestellschritte und in ihr wird die Abfolge dieser vier Bestellschritte geregelt. Die Kategorie Kasse wird im individuellen Bestellvorgang des Standarddesigns Callisto Light als Kopfzeile und Fortschrittsanzeige genutzt, anhand derer der Kunde sieht in welchem Schritt er sich befindet. Die 4 Bestellschritte, deren Abfolge in der Kategorie Kasse geregelt ist, sind die Bestelldetails, die Anschrift, der Schritt Zahlung & Versand sowie die Bestellübersicht & Kaufabwicklung. In den Bestelldetails werden beispielsweise Sonderwünsche oder Gutschein-Codes eingetragen. In den 2 anschließenden Schritten müssen die Rechnungs- und Versandadresse und die Auswahl der Zahlungs- und Versandart angegeben werden. Im letzten und abschließenden Schritt wird die Gesamtbestellung zusammengefasst. Der gesamte Vorgang besteht aus Kategorien des Typs Container, die hier eine entscheidende Rolle spielen, da nur Kategorien des Typs Container Zugriff auf die Template-Variablen und -Funktionen der Checkout-Templates haben.
In den Design-Einstellungen, in denen Sie die Bestellschritte hinzufügen, geben Sie im Grunde auch schon eine Reihenfolge vor, aber in der Kategorie Kasse kann diese Reihenfolge noch einmal etwas variiert werden, indem hier die Bestellschritte in einer anderen Reihenfolge aufgerufen werden.

Fortschrittsanzeige der Bestellschritte

Bild 1: Fortschrittsanzeige der Bestellschritte

Bestellschritte konfigurieren

Damit die oben abgebildete Fortschrittsanzeige der Bestellschritte in Ihrem Design korrekt arbeitet, müssen diese zunächst in den Design-Einstellungen konfiguriert werden.

  1. Wählen Sie im plentymarkets Administrationsbereich den Menüpunkt CMS » Webdesign
  2. Klicken Sie auf das Zahnrad (Einstellungen), um zu den Design-Einstellungen zu gelangen (neues Fenster)
  3. Wählen Sie nun Tab:Mandanten und wählen Sie in der linken Spalte einen Mandanten aus
  4. Wählen Sie in der rechten Seite Tab:Bestellvorgang um Bestellschritte zu konfigurieren

Bestellschritte verlinken

Im individuellen Bestellvorgang ist es möglich, neben den Bestellschritten, die Seiten für Login, Logout, Kundenregistrierung, Passwort vergessen und Bestellbestätigung, ebenfalls durch Kategorien, selbst zu gestalten. Kategorien eines Designs finden Sie im Menü Artikel » Kategorien im Ordner Ihres Designs. Um auf eine einzelne Kategorie zu verlinken, nutzen Sie die übliche Template-Funktion Link( $_CategoryId ) in Verbindung mit einem a-Tag. Für ausgewählte Bereiche gibt es spezielle vordefinierte Template-Funktionen, mit denen auf die hinterlegten Kategorien verwiesen werden kann.

Für ausgewählte Bereiche stehen Ihnen vordefinierte Template-Funktionen zur Verfügung:
Funktionsaufruf Erläuterung
Link_CustomerRegistration() Kundenregistrierung
Link_LostPassword() Passwort vergessen
Link_OrderConfirmation() Bestellbestätigung

Tab. 1: vordefinierte Template-Funktionen für Login, Logout, Kundenregistrierung, Passwort vergessen und Bestellbestätigung

Folgendes Code-Beispiel kombiniert die Template-Funktionen Link und Link_CustomerRegistration

{# Direkte Verlinkung auf beliebige Kategorie durch die Link-Funktion #} <a class="iconLink" href="{% Link($_categoryId) %}"><span class="glyphicon glyphicon-question-sign"></span>Weiter</a> {# ... #} {# Verlinkung zur Kategorie zum Anfordern eines neuen Passworts. # Die Kategorie muss vorher in den Einstellungen für den individuellen Bestellvorgang hinterlegt werden. #} <a class="iconLink" href="{% Link_LostPassword() %}"><span class="glyphicon glyphicon-question-sign"></span>&nbsp;Passwort vergessen?</a>

Bestellschritte anzeigen

Im Standarddesign Callisto Light werden die Schritte des Bestellvorgangs durch JavaScript ein- und ausgeblendet. Das Laden der Inhalte geschieht bereits beim Aufruf der Seite durch den Funktionsaufruf CategoryContentBody($_CategoryId). Die Sichtbarkeit der Container-Kategorien wird durch die plentymarketsCMSTools über das individuelle Attribut data-plenty-checkout-id geregelt, dem die ID des anzuzeigenden Inhalt übergeben wird.
Das untenstehende Code-Beispiel zeigt, wie der Inhalt der Kategorien im Callisto Light Design geladen wird.

{# Ausschnitt der Anzeigelogik des callisto_light_2 Bestellvorgangs #} <div class="container" data-plenty-checkout-id="addresses" ...> {% $_id = CheckoutStepPageID(5) %} {# Ermitteln der ID einer Kategorie des gegebenen Bestellschritts. #} {% CategoryContentBody($_id) %} {# Laden des Inhalts einer Kategorie mit der zuvor ermittelten ID #} </div>

Zu Bestellschritten springen

Wenn Sie in den Design-Einstellungen unter Tab:Mandanten » Tab:Bestellvorgang Ihre Bestellschritte hinzugefügt haben, ist eine Möglichkeit durch die Bestellschritte zu navigieren, indem Sie in Ihren Kategorien die Template-Funktion FormOpenCheckout($_htmlID, true) verwenden. Der Aufruf dieser Template-Funktion beginnt den inkrementellen Durchlauf der im Bestellvorgang hinterlegten Kategorien.
Der erste Parameter der Template-Funktion steht für die ID eines klickbaren Elements. Im zweiten Parameter wird angegeben, ob beim Klick des Elements, zum nächsten Schritt des Bestellvorgangs gesprungen werden oder der aktive Schritt neu geladen werden soll. Wenn Sie den Wert true eintragen, lädt der Folgeschritt des Bestellvorgangs, während false einen Seiten-Reload der aktuellen Seite verursacht.

Code-Beispiel für die Benutzung der Template-Funktion FormOpenCheckout()

{# Beispiel des "Weiter"-Button im callisto_light_2 Bestellvorgang #} {% FormOpenCheckout("next", true) %} {# 1. Parameter: HTML-ID des Elements, 2. Parameter: zum Weiterleiten (true) oder Neuladen (false) #} <div class="text-right"> <button class="btn btn-primary btn-lg btn-block-xs" id="next"> <span>Weiter</span><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </button> </div>

Bestellschritte mithilfe der plentymarketsCMSTools wechseln    

Das Standarddesign Callisto Light setzt verstärkt auf den Einsatz des Scripts plentymarketsCMSTools.js. Das Script ist ein Opensource-Projekt von plentymarkets und kann auf GitHub.com geklont und nach Belieben manipuliert werden.
Im individuellen Bestellvorgang wird über das individuelle Attribut data-plenty-checkout-href der Weiter-Button mit einer Direktive der plentymarketsCMSTools verbunden. Die Direktive inkrementiert den Index der die Sichtbarkeit der Kategorien des Bestellvorgangs regelt.

Zahlungsdienstleister einbinden

Dienstleister wie Klarna, Paypal oder Amazon Payment verwenden verschiedene Verfahren, um Kaufabwicklungen zu ermöglichen. In einigen Fällen wird ein IFrame eingebunden und in anderen Fällen zur Seite des Dienstleisters weitergeleitet. Das plentymarkets CMS stellt Ihnen Template-Variablen und -Funktionen zur Verfügung, die es Ihnen einfach machen, den jeweiligen Dienstleister für Ihre Kunden bereit zu stellen. Wenn Sie in Ihrem plentymarkets System unter Einstellungen » Aufträge » Zahlungsarten einen Zahlungsdienstleister (z.B. Klarna) konfiguriert haben, können Sie die Template-Variable oder -Funktion für die entsprechende Zahlungsart verwenden.

Zahlungsarten grundlegend einrichten

Einige Einstellungen sind für jede Zahlungsart gleich und haben zunächst nicht unmittelbar mit der Anzeige im Webshop zu tun. So müssen für jede Zahlungsart Zugangsdaten eingetragen und festgelegt werden, ob sie generell aktiv ist, unter welchen Namen sie angezeigt werden soll, für welche Lieferländer sie erlaubt ist und für welchen Mandanten sie gilt. Je nach Dienstleister sind im Tab Schnittstelle unter Einstellungen » Aufträge » Zahlungsarten weitere Einstellungen notwendig.
Falls Ihnen im ersten Moment keine Zahlungsarten angezeigt werden, achten Sie bitte darauf, dass das Feld Auch inaktive anzeigen im unteren Bereich der Seite aktiviert ist.

Einstellungen der Zahlungsarten

Bild 2: Einstellungen der Zahlungsarten

Zahlungsart übertragen

Um alle verfügbaren Zahlungsarten auszugeben, wird in Callisto Light das Template CheckoutMethodsOfPayment verwendet. Im Template wird eine Liste aus Input-Feldern des Typs radio erzeugt.
Ein OnChange-Event sorgt für die Kommunikation mit dem Server und überträgt die vom Benutzer ausgewählte Zahlungsart, durch den Funktionsaufruf plenty.CheckoutService.setMethodOfPayment(). Die Funktion gehört zu den plentymarketsCMStools und führt die nötigen REST-Calls für diese Operation aus.

Der folgende Code ist ein Ausschnitt des Template CheckoutMethodsOfPayment und zeigt das OnChange-Event:

{# OnChange-Event zum Übertragen einer Zahlungsart. #} <script type="text/javascript"> jQuery('input[name="MethodOfPaymentID"]').change(function() { plenty.CheckoutService.setMethodOfPayment(); jQuery('[data-plenty-checkout-form="methodOfPayment"] .radio .btn').addClass('disabled'); jQuery('[data-plenty-checkout-form="methodOfPayment"] input[type="radio"]:checked').parents('.radio').find('.btn').removeClass('disabled'); }); </script>

Bestelldaten durch Validatoren prüfen

Mit den Validatoren des plentymarkets CMS können Sie die Eingaben Ihrer Kunden im Bestellprozess auf Richtigkeit überprüfen. Alle eingegebenen Daten werden vom Server validiert, bevor sie in der Datenbank abgelegt werden. Beispielsweise werden E-Mail-Adressen auf Richtigkeit ihres Formats untersucht oder Eingabefelder wie Straße und Hausnummer auf sinnvolle Ziffern- oder Buchstabenfolgen geprüft.
Die Validatoren finden Sie in Ihrem plentymarkets System unter CMS » Webdesign » Layout » Validator.

Folgende Validatoren sind für den Bestellvorgang wichtig:
Validator-Templatenamen Erläuterung
ValidatorCustomerInvoiceAddress Validiert die Eingaben für die Rechnungsadresse.
ValidatorCustomerShippingAddress Validiert die Eingaben für die Lieferanschrift
ValidatorPlaceOrder Validiert die Eingaben für den letzten Bestellschritt "Übersicht & Vertragsabschluss"

Tab. 2: Validatoren, die für den Bestellvorgang wichtig sind.

Im Template ValidatorPlaceOrder wird unter anderem geprüft, ob Checkboxen für AGB, Datenschutzerklärung oder Newsletter gesetzt sind. In den Templates der Validatoren kann eingestellt werden, welche Daten überprüft werden sollen und welche Meldungen im Fehlerfall angezeigt werden müssen. Nachfolgender Code prüft, ob die AGBs (Terms and Conditions) vom Benutzer akzeptiert wurden bzw. ob die Checkbox angehakt (gecheckt) wurde. Mit dem Aufruf AddError(16) wird dafür gesorgt, dass im Fehlerfall eine Meldung mit dem Fehlercode 16 ausgegeben wird.

{% # Auszug aus dem Standarddesign Callisto Light # Prüfen, ob in Ihrem plentymarkets System im Template PageDesignPrepareMainColumn die globale Variable "ValidateTermsAndConditionsCheck" auf "true" gesetzt ist. if ( GetGlobal("ValidateTermsAndConditionsCheck") == true ) { if ( $TermsAndConditionsCheck != 1 ) # Prüfen ob AGB im Bestellvorgang angehakt wurden. { AddError(16); # Wenn nicht, gib die Fehlermeldung mit Code 16 aus. } } %}

Nach oben