Individueller Bestellvorgang

Der Bestellvorgang bezeichnet den Prozess des Kaufens im Online-Shop von dem Augenblick an, in dem der Kunde einen Artikel in den Warenkorb legt, bis zu dem Moment, in dem er die Bestellung abschickt. In Callisto Light ist der Individuelle Bestellvorgang standardmäßig eingestellt. Der Individuelle Bestellvorgang ermöglicht Ihnen volle Kontrolle über das Aussehen, den Funktionsumfang und den Verlauf des Kaufprozesses. Sie legen in bis zu zehn Schritten fest, wie Kunden Ihren persönlichen Bestellvorgang durchlaufen sollen. Zusätzlich gestalten Sie die Schritte Login, Logout, Kundenregistrierung, Passwort vergessen und Bestellbestätigung.
Diese Handbuchseite beschreibt den Aufbau des Individuellen Bestellvorgangs sowie Konfigurations- und Einstellungsmöglichkeiten.
Die aufgeführten Einstellungen für den Bestellvorgang werden für jedes Design separat und dort pro Mandant (Shop) vorgenommen. Auch die Anzahl und den Inhalt der einzelnen Schritte des Bestellvorgangs gestalten Sie pro Mandant.

Wechsel auf den Individuellen Bestellvorgang

Ein Wechsel vom Standard-Bestellvorgang auf den Individuellen Bestellvorgang kann aus technischen Gründen nicht mehr rückgängig gemacht werden.

 

Bestandteile des Individuellen Bestellvorgangs in Callisto Light

Der Aufbau des Individuellen Bestellvorgangs wird im Folgenden in den Kapiteln Kategorien, Bestellschritte, Kopfzeile Kasse und Zusätzliche Seiten erläutert.

Kategorien

Mit dem Individuellen Bestellvorgang wurden Kategorien des Typs Container eingeführt. Kategorien dieses Typs können auf alle globalen Template-Variablen und -Funktionen der Checkout-Templates des Bereichs CMS » Webdesign » Layout » Checkout zugreifen. Über globale Template-Variablen und -Funktionen ist wiederum ein Zugriff von den Kategorien des Typs Container auf Template-spezifische, d.h. nicht globale Variablen und Funktionen möglich. Der gesamte Bestellvorgang kann so vollständig in Kategorien abgebildet werden. Die Verwendung von Templates ist im Individuellen Bestellvorgang somit nicht mehr zwingend erforderlich. Die Kategorien von Callisto Light finden Sie in plentymarkets unter Artikel » Kategorien im Ordner Ihres Designs. Dort gestalten Sie die Inhalte der Bestellschritte. Um von einer Kategorie auf eine andere Kategorie zu verlinken, nutzen Sie die Link-Funktionen. Es stehen Ihnen vordefinierte Funktionen zur Verfügung:

Funktionsaufruf Zurückgelieferter Link
Link_CustomerRegistration() Kundenregistrierung
Link_LostPassword() Passwort vergessen
Link_OrderConfirmation() Bestellbestätigung
Link_Checkout(1) Anmeldung
Link_Checkout(2) Warenkorb
Link_Checkout(3) Kasse
Link_Checkout(4) Bestelldetails
Link_Checkout(5) Anschrift
Link_Checkout(x) x: Nummer des Bestellschritts im Bestellvorgang

Tab. 1: Vordefinierte Template-Funktionen

Kategorien, z.B. für Kundenregistrierung und Bestellbestätigung, können Sie mit Hilfe von Anchor-Tags an beliebiger Stelle im Bestellvorgang verlinken.

# Erzeugung eines Anchor-Tags der als Button gestaltet ist und je nach Kundenstatus zu den Bestelldetails oder zur Kundenregistrierung führt. <a class="btn btn-primary btn-lg btn-block-xs" href="{% if ( $CustomerID ) { Link_CustomerRegistration() } else { Link_Checkout(3); } %}"> <span class="glyphicon glyphicon-euro" aria-hidden="true"></span>Zur Kasse </a>

Codebeispiel 1: Code für Button Zur Kasse

Codebeispiel 1 stammt aus der Kategorie Warenkorb von Callisto Light. Kunden wird darüber der Button Zur Kasse angezeigt (Bild 1). Im Code wird auch geprüft, ob der Kunde im System angemeldet ist. Ist er nicht angemeldet, wird für das href-Attribut des Buttons die Funktion Link_CustomerRegistration() hinterlegt. Der Kunde wird bei Klick auf den Button Zur Kasse zur Kundenregistrierung geleitet. Dort kann er sich im System anmelden oder ein neues Kundenkonto erstellen. Ist der Kunde bereits im System angemeldet, führt der Link zum Bestellschritt Bestelldetails, d.h. dem ersten Bestellschritt der Kopfzeile Kasse, da für diesen Fall die Template-Funktion Link_Checkout(3) hinterlegt wurde.

Bild 1: Button Zur Kasse, der durch Codebeispiel 1 erzeugt wird

Bestellschritte

Für die acht Bestellschritte des Individuellen Bestellvorgangs in Callisto Light sind in den Design-Einstellungen Kategorien verknüpft (Bild 2).

In Callisto Light sind für den Bestellvorgang acht Schritte hinterlegt:

  1. Warenkorb
  2. Anmeldung
  3. Kasse
  4. Bestelldetails
  5. Anschrift
  6. Zahlung & Versand
  7. Bestellübersicht & Kaufabschluss
  8. Bestellvorgang

Diese acht Schritte werden über Kategorien des Typs Container dargestellt. Die Kategorien von Callisto Light finden Sie in plentymarkets unter Artikel » Kategorien im Ordner Ihres Designs. Zusätzlich stehen zwei weitere Bestellschritte (9. Bestellschritt und 10. Bestellschritt) zur Verfügung. Insgesamt lassen sich im Individuellen Bestellvorgang also zehn Bestellschritte einrichten (Bild 2). Außerdem besteht die Möglichkeit, fünf zusätzliche Seiten anzulegen (Bild 2).

Bild 2: Voreingestellte Bestellschritte in Callisto Light

Die folgende Tabelle zeigt die zehn konfigurierbaren Bestellschritte des Individuellen Bestellvorgangs und verdeutlicht ihre Funktion im Frontend, d.h. im Online-Shop.

Nr. Schritt im Backend Funktion im Frontend
1 Warenkorb Übersicht aller Artikel, die der Kunde kaufen möchte.
2 Anmeldung Der Kunde entscheidet, ob er als Gast oder als registrierter Benutzer zur Kasse geht.
3 Kasse Dient als Kopfzeile für die folgenden Bestellschritte (Bild 3):
  • Bestelldetails
  • Anschrift
  • Zahlung & Versand
  • Übersicht & Vertragsabschluss
4 Bestelldetails Wird im Frontend als Tab Bestelldetails der logischen Einheit Kasse dargestellt.
5 Anschrift Wird im Frontend als Tab Anschrift der logischen Einheit Kasse dargestellt.
6 Zahlung & Versand Wird im Frontend als Tab Zahlung & Versand der logischen Einheit Kasse dargestellt.
7 Bestellübersicht & Kaufabschluss Wird im Frontend als Tab Übersicht & Vertragsabschluss der logischen Einheit Kasse dargestellt.
8 Bestellvorgang Stellt zur Auswahl, wohin der Kunde als Nächstes navigieren kann:
  • Warenkorb
  • Kasse
  • Anmeldung
Hinweis: Bestellschritt ist namensgleich mit dem Bestellvorgang als Ganzes. Diese Namensgleichheit beruht auf technischen Begebenheiten.
9 Frei Nicht in Benutzung. Kann konfiguriert werden.
10 Frei Nicht in Benutzung. Kann konfiguriert werden.

Tab. 2: Bestellschritte des Individuellen Bestellvorgangs

Kopfzeile Kasse

Der dritte Bestellschritt, die Kategorie Kasse, stellt einen Sonderfall dar, da er die in Tabelle 2 beschriebenen vier Bestellschritte beinhaltet. In der Kategorie Kasse wird die Abfolge dieser vier Bestellschritte geregelt. Die Kasse wird im Individuellen Bestellvorgang von Callisto Light als Kopfzeile und Fortschrittsanzeige genutzt, anhand derer Kunden sehen, in welchem Schritt sie sich befinden (Bild 3).

Bild 3: Bestellschritte der Kategorie Kasse

Bestellschritte der Kategorie Kasse Inhalt
1. Bestelldetails Eingabefelder:
  • Ihr Zeichen
  • Hinweise & Sonderwünsche
  • Gutschein-Codes
2. Anschrift
  • Rechnungsanschrift
  • Angabe abweichender Lieferanschrift
Optionale Felder:
  • Fax
  • Mobile
  • Postnummer
  • USt-IdNr.
3. Zahlung & Versand
  • Auswahl der Zahlungsarten
  • Auswahl des Versanddienstleisters
4. Übersicht & Vertragsabschluss
  • Zusammenfassung der Bestellung
  • AGB-Einwilligung
  • Newsletter-Anmeldung

Tab. 3: Bestellschritte der Kopfzeile Kasse

In Callisto Light werden die Schritte des Bestellvorgangs mit Hilfe von JavaScript dynamisch ein- und ausgeblendet. Die Daten in den vier Bestellschritten der Kopfzeile Kasse (Bild 3) werden mit Hilfe von REST-Calls im Hintergrund mit dem Server ausgetauscht und aktuell gehalten. Den Code für die Darstellung der Kopfzeile Kasse finden Sie in plentymarkets im Ordner Ihres Designs unter Artikel » Kategorien » Kasse.

In der Kategorie Kasse wird der Code der vier Bestellschritte über die Funktion CategoryContentBody($_id) geladen. Sie finden die Bestellschritte am einfachsten über die HTML-Kommentare in der Kategorie:

Bestellschritt HTML-Kommentar
Bestelldetails STEP 1: Order details
Anschrift STEP 2: Addresses
Zahlung & Versand STEP 3: Shipping & Payment
Übersicht & Vertragsabschluss STEP 4: Overview & Confirmation

Tab. 4: Bestellschritte in der Kategorie Kasse

Codebeispiel 2 zeigt, wie der Inhalt der Kopfzeile Kasse mit den Bestellschritten Bestelldetails, Anschrift, Zahlung & Versand und Übersicht & Vertragsabschluss in Callisto Light geladen wird.

Codebeispiel 2 stammt aus der Kategorie Kasse und beinhaltet die oben aufgeführten Bestellschritte. In Zeile 7 des Codebeispiels 2 wird mit der Anweisung $_id = CheckoutStepPageID(4) die ID für den Bestellschritt Bestelldetails in der Variablen $_id gespeichert. Die Ziffern in der Klammer von CheckoutStepPageID entsprechen der Nummerierung der Bestellschritte in den Design-Einstellungen (Bild 2). In diesem Fall wird in der Variablen $_id also die ID der Kategorie gespeichert, die dem 4. Bestellschritt zugeordnet ist. In Bild 2 ist dies die ID 109. In Zeile 8 erhält das Attribut data-plenty-checkout-content den Wert, der in $_id hinterlegt ist. Der Ausdruck data-plenty-checkout-content="$_id" wird also zu data-plenty-checkout-content="109". Mit dem Ausdruck CategoryContentBody($_id) wird in Zeile 13 der in der Kategorie Bestelldetails hinterlegte Inhalt abgerufen.

# Anpassbarer Code für die Darstellung der Kopfzeile Kasse in den Design-Einstellungen. <div class="checkout checkout-content checkout-tabpanel" data-plenty-checkout="container"> {% if GetGlobal("ShowTabDetails") %} <!-- STEP 1: Order details --> # Hier beginnt Schritt 1 Bestelldetails. {% $_id = CheckoutStepPageID(4) %} # In die Variable $_id wird die ID des vierten Bestellschritts mit Hilfe der Funktion CheckoutStepPageID(4) geschrieben. <div class="container" data-plenty-checkout-id="details" id="checkoutPanelOrderDetails" aria-labelledby="checkoutTabOrderDetails" role="tabpanel" data-plenty-checkout-content="$_id"> # Dieser Container definiert das Aussehen des Bestellschritts {% CategoryContentBody($_id) %} # Der Inhalt der Kategorie Bestelldetails wird aufgerufen </div> {% endif %}

Codebeispiel 2: Bestellschritte der Kategorie Kasse

Zusätzliche Seiten

Im Individuellen Bestellvorgang ist es möglich, neben den zehn Bestellschritten die folgenden fünf weiteren Seiten über Kategorien selbst zu gestalten:

  • Login
  • Logout
  • Kundenregistrierung
  • Passwort vergessen
  • Bestellbestätigung

Inhalte der Bestellschritte

Die HTML-Struktur der einzelnen Bestellschritte des Individuellen Bestellvorgangs wird über globale Template-Funktionen geladen. Diese Template-Funktionen liefern das Grundgerüst, mit dessen Hilfe Bestelldaten dargestellt werden. Durch den Einsatz von REST-Calls findet ein ständiger Austausch von Bestelldaten zwischen Client und Server statt. Dies stellt eine aktuelle und innerhalb der Bestellschritte konsistente Datenbasis sicher.

Im Template PageDesignPrepareMainColumn wird festgelegt, welche Elemente in den Bestellschritten geladen werden sollen.

HTML-Gerüst

Die Checkout-Templates zur Darstellung von Bestelldaten in den Bestellschritten bestehen aus HTML-Code, der für die Strukturierung des Inhalts der Bestellschritte sorgt. Die Templates befinden sich im Menü CMS » Webdesign » Layout » Checkout. In Tabelle 5 sind Bestellschritte mit den verwendeten Checkout-Templates aufgelistet. Im Bestellschritt Warenkorb wird beispielsweise mit der Anweisung Container_CheckoutBasketItemsList() das HTML-Gerüst für die Artikelübersicht im Warenkorb geladen. Das Template finden Sie unter CMS » Webdesign » Layout » Checkout » CheckoutBasketItemsList.

Kategorie Container
Warenkorb Container_CheckoutBasketItemsList()
Container_CheckoutTotals()
Container_CheckoutCoupon()
Bestelldetails Container_CheckoutCoupon()
Anschrift Container_CheckoutCustomerInvoiceAddress()
Container_CheckoutCustomerShippingAddress()
Zahlung & Versand Container_CheckoutMethodsOfPaymentList()
Container_CheckoutShippingProfilesList()
Bestellübersicht & Kaufabschluss Container_CheckoutMethodsOfPaymentList()
Container_CheckoutShippingProfilesList()

Tab. 5: Verfügbare Checkout-Templates

Laden einzelner Elemente

Im Template PageDesignPrepareMainColumn unter CMS » Webdesign » Layout » PageDesign werden globale Variablen mit Hilfe der Template-Funktion setGlobal festgelegt. Sie nehmen auf diese Weise Einfluss auf die Sichtbarkeit von Elementen, z.B. den Eingabefeldern von Formularen. Mit den Angaben unter dem Kommentar # CHECKOUT VALIDATION & APPEARANCE regeln Sie die Darstellung von Elementen im Individuellen Bestellvorgang (Tab. 6).

Funktion Standard-Wert Erklärung
SetGlobal("ShowTabDetails", true); true Tab Bestelldetails wird in Kopfzeile Kasse angezeigt.
SetGlobal("ShowCustomerSign", true); true Zeigt das Eingabefeld Ihr Zeichen.
SetGlobal("ValidateCustomerSign", false); false Validiert das Eingabefeld Ihr Zeichen.
SetGlobal("ShowCustomerNotice", true); true Zeigt das Eingabefeld Ihre Hinweise & Sonderwünsche.
SetGlobal("ShowCouponInDetails", true); true Zeigt das Eingabefeld Gutschein-Code.

Tab. 6: Template-Funktionen für die Bestelldetails

Ausgabe der Zahlungsarten

Im Ordner Ihres Designs (z.B. callisto_light_3) in der Kategorie Zahlung & Versand wird die globale Funktion Container_CheckoutMethodsOfPaymentList aufgerufen. Um alle verfügbaren Zahlungsarten auszugeben, wird in Callisto Light das Template CheckoutMethodsOfPaymentList in CMS » Webdesign » Layout » Checkout verwendet. Es wird eine HTML-Liste mit Radio-Buttons erzeugt, über die Kunden eine Zahlungsart auswählen können (Codebeispiel 3).

# Die For-Schleife erzeugt eine Liste mit Radio-Buttons, mit der sich eine Zahlungsart auswählen lässt. {% for $_payment in GetCheckoutMethodsOfPaymentList() %} {% if $_payment->MethodOfPaymentID > 0 %} {% $_pID = $_payment->MethodOfPaymentID %} <li class="radio clearfix"> <label> <input type="radio" name="MethodOfPaymentID" value="$_pID"{% if $CheckoutMethodOfPaymentID == $_pID %} checked="checked"{% endif %}> $_payment->MethodOfPaymentName {% if $_payment->MethodOfPaymentExternalInfo %} <span class="payment-information"> $_payment->MethodOfPaymentExternalInfo {% Link_MethodOfPaymentInfoPage($_payment->MethodOfPaymentID) %} </span> {% endif %} </label> <span class="pull-right">{% FormatMonetaryValue($_payment->MethodOfPaymentPrice, false, false) %} $CurrencySign</span> {# Lastschrift #} {% if $_payment->MethodOfPaymentID == 3 %} <div class="muted" data-plenty-is="edit-bank-account"{% if ! ( $_bankDetails->BankDetailsBankName && ( $_bankDetails->BankDetailsIBAN || $_bankDetails->BankDetailsAccountNumber ) ) %} style="display: none;"{% endif %}> <span data-plenty-is="bank-account-wrapper"> <span data-plenty-is="bank-name">$_bankDetails->BankDetailsBankName</span>, {% if $_bankDetails->BankDetailsIBAN %} {% $_bank = substr($_bankDetails->BankDetailsIBAN, 0, 4) %} {% $_kto = substr($_bankDetails->BankDetailsIBAN, -4) %} <span data-plenty-is="iban-anonymized">$_bank&nbsp;XXXX&nbsp;XXXX&nbsp;XXXX&nbsp;$_kto</span> {% elseif $_bankDetails->BankDetailsAccountNumber %} {% $_kto = substr($_bankDetails->BankDetailsAccountNumber, -4) %} <span data-plenty-is="account-number-anonymized">XXX&nbsp;XXX&nbsp;$_kto</span> {% endif %} </span> <br> <a class="btn btn-default btn-xxs{% if $CheckoutMethodOfPaymentID != $_pID %} disabled{% endif %}" href="javascript:plenty.CheckoutService.editBankDetails();"><span class="glyphicon glyphicon-pencil"></span> ändern</a> </div> {% endif %} </li> {% endif %} {% endfor %}

Codebeispiel 3: Template CheckoutMethodsOfPaymentList

Beim Auswählen der Zahlungsart wird ein change-Event ausgelöst, das sich um die Kommunikation mit dem Server kümmert. Das Event überträgt die vom Kunden ausgewählte Zahlungsart über den Funktionsaufruf plenty.CheckoutService.setMethodOfPayment. Die Funktion ist Bestandteil der plentymarketsCMStools und führt die REST-Calls für das change-Event aus. Der folgende Code ist ein Ausschnitt des Templates CheckoutMethodsOfPayment und zeigt das change-Event mit dem Funktionsaufruf plenty.CheckoutService.setMethodOfPayment.

# Change-Event, dass die Funktion setMethodOfPayment() auslöst. <script> $('input[name="MethodOfPaymentID"]').change(function() { plenty.CheckoutService.setMethodOfPayment(); $('[data-plenty-checkout-form="methodOfPayment"] .radio .btn').addClass('disabled'); $('[data-plenty-checkout-form="methodOfPayment"] input[type="radio"]:checked').parents('.radio').find('.btn').removeClass('disabled'); }); </script>

Codebeispiel 4: Change-Event im Template CheckoutMethodsOfPayment

Prüfung der Bestelldaten

Mit den Validatoren des plentymarkets CMS werden die Eingaben Ihrer Kunden im Bestellprozess auf Richtigkeit geprüft. Alle eingegebenen Daten werden vom Server validiert, bevor sie in der Datenbank abgelegt werden. Beispielsweise werden E-Mail-Adressen auf die Richtigkeit ihres Formats hin untersucht und 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 relevant:

Validator-Template Erläuterung
ValidatorCustomerInvoiceAddress Validiert Eingaben für die Rechnungsadresse.
ValidatorCustomerShippingAddress Validiert Eingaben für die Lieferanschrift.
ValidatorPlaceOrder Validiert Eingaben für den letzten Bestellschritt Übersicht & Vertragsabschluss.

Tab. 7: Validatoren für den Bestellvorgang

Im Template ValidatorPlaceOrder wird unter anderem geprüft, ob Checkboxen für Allgemeine Geschäftsbedingungen (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. Nachfolgender Code prüft, ob bei den Allgemeinen Geschäftsbedingungen (engl. Terms and Conditions) vom Kunden ein Haken in der Checkbox gesetzt wurde. Bei gesetztem Häkchen wird der Boolean $TermsAndConditionsCheck auf den Wert 1 gesetzt. Mit dem Aufruf AddError(16) wird dafür gesorgt, dass im Fehlerfall, also $TermsAndConditionsCheck != 1, die Meldung mit dem Fehlercode 16 ausgegeben wird.

# Es wird geprüft, ob der Haken bei der Checkbox für die Allgemeinen Geschäftsbedingungen (AGB) vom Nutzer gesetzt ist. # Wenn dem nicht so ist, wird dem Nutzer durch die Funktion AddError(16) eine Fehlermeldung angezeigt. {% if ( GetGlobal("ValidateTermsAndConditionsCheck") == true ) { if ( $TermsAndConditionsCheck != 1 ) { AddError(16); } } %}

Codebeispiel 5: Template ValidatorPlaceOrder

Nach oben