Das Bestellprozess wird in vier Schritte geteilt, jeweils mit eigenem Template. Es wäre ratsam, die neue Templates zu diesem Feature in einem neuen VerzeichnisDocumentation Index
Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
Use this file to discover all available pages before exploring further.
components/checkout/ abzulegen.
1) Addresseeingabe
Bevor der Kunde auf diese Seite kommt, muss er eingeloggt sein. Außerdem muss der Button, der auf dieser Seite verlinkt ist, einen URL Parameter enthalten, damit der Code zum ersten Schritt geladen wird.Template basket.htm
{{ if $wsBasket.items }}
...
{{ if $wsAccount.isLoggedIn or $wsCheckout.guestMail }}
<a href="{{= $wsViews.viewUrl('checkout.htm', {step: 1}) }}">Zur Kasse</a>
{{ else }}
<a href="{{= $wsViews.viewUrl('account/login.htm', {checkout: true}) }}">Zur Kasse</a>
{{ /if }}
...
{{ /if }}
Template login.htm
...
{{ include "components/account/login.htm" with $cTemplate = "login" }}
{{# redirect if login was successfull #}}
{{ if $wsAccount.isLoggedIn == true }}
{{ if $cCheckout == "true" }}
<meta http-equiv="refresh" content="0;url={{= $wsViews.viewUrl('checkout.htm', {step: 1}) }}">
{{ else }}
<meta http-equiv="refresh" content="0;url={{= $wsViews.viewUrl('account/overview.htm') }}">
{{ /if }}
{{ /if }}
...
www.beispiel-shop.com/?wsvc=View&view=checkout.htm&step=1
Template checkout.htm
Dieses Template ist bereits im Shop vorhanden und muss ergänzt werden. Wir prüfen auf den URL Parameter und nutzen ihn um das entsprechende Template zu laden.{{ block content_main }}
{{# get step parameter from URL #}}
{{ var $cStep = "" }}
{{ foreach $cParam in $wsViews.current.paramList }}
{{ if $cParam.name == "step" }}
{{ $cStep = $cParam.value }}
{{ /if }}
{{ /foreach }}
{{ if $cStep == "1" }}
{{ if $wsAccount.isLoggedIn or $wsCheckout.guestMail }}
Ihre Adresse
{{ /if }}
{{ include "components/checkout/address.htm" }}
{{ elseif $cStep == "2" }}
Zahlung & Versand
{{ include "components/checkout/paymentDelivery.htm" }}
{{ elseif $cStep == "3"}}
Bestellübersicht
{{ include "components/checkout/orderOverview.htm" }}
{{ elseif $cStep == "4"}}
{{ include "components/checkout/confirm.htm" with $cStep = $cStep }}
{{ else }}
Hier ist ein Fehler aufgetreten. Es handelt sich um keine gültige URL.
{{ /if }}
{{# Warenkorbübersicht #}}
{{ include "components/checkout/basketOverview.htm" with $cStep = $cStep }}
{{ /block }}
...
{{ block scripts }}
<script defer>
$(document).on("change", "input[name='accountType']", function(){
$("#wsFormLoginMethod").submit();
});
$(document).on("change", "#wsShippingAddressCheck", function() {
if ($(this).prop("checked")) {
$("#wsFormUseSameShippingAddress").submit();
} else {
$("#wsFormUseDifferentShippingAddress").submit();
}
});
</script>
{{ /block }}

Template address.htm
Ein neues Template wird dafür erstellt. noch nicht getestet...
{{ var $cCheckoutStep2 = false }}
{{# content for new user #}}
{{ if $wsCheckout.accountType == "new" and not $wsAccount.isLoggedIn }}
Neukunden-Login
Bitte geben Sie eine E-Mail und ein beliebiges Passwort ein, um sich ein Kundenkonto anzulegen.
{{ include "components/account/register.htm" with $cTemplate = "checkout" }}
{{# content for known user #}}
{{ elseif $wsCheckout.accountType == "registered" and not $wsAccount.isLoggedIn }}
Bestandskunden-Login
Bitte geben Sie Ihre E-Mail und Ihr Passwort ein, um sich anzumelden.
{{ include "components/account/login.htm" with $cTemplate = "checkout" }}
{{# content for guest user #}}
{{ elseif $wsCheckout.accountType == "guest" and not $wsAccount.isLoggedIn }}
{{ var $cActionCheckoutSetGuestEmail = $wsActions.create("CheckoutSetGuestEmail") }}
Gastbestellung
<form id="wsFormCheckoutSetGuestMail" action="{{= $wsViews.current.url() }}" method="post" ws-ajax-form>
<input type="hidden" name="wsReplaceIds" value="wsCheckoutContent">
<input type="hidden" name="wsact" value="{{= $cActionCheckoutSetGuestEmail.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionCheckoutSetGuestEmail.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
<div class="form-floating mb-3">
<input type="text" id="guestEmailInput" name="guestEmail" value="{{ if $wsCheckout.guestMail }}{{= $wsCheckout.guestMail }}{{ else }}{{= $cActionCheckoutSetGuestEmail.params.guestEmail | ifNull('') }}{{ /if }}" class="form-control{{ if $cActionCheckoutSetGuestEmail.errorsByField.guestEmail }} is-invalid{{ /if }}" autocomplete="email" placeholder="E-Mail *">
<label>E-Mail *</label>
{{ include "components/errorFeedback.htm" with $cAction = $cActionCheckoutSetGuestEmail, $cField = "guestEmail" }}
</div>
<button type="submit">Änderung übernehmen</button>
</form>
{{ /if }}
{{ if $wsCheckout.guestMail }}
{{ $cCheckoutStep2 = false }}
{{# guest order gets address automatically from backend #}}
{{ var $cAddress = $wsAccount.loadAddress($wsCheckout.selectedBillAddress) }}
{{ var $cActionAddressUpdate = $wsActions.create("AddressUpdate", {address: $cAddress}, tag = "billAddress") }}
<form id="wsFormAddressUpdate" action="{{= $wsViews.current.url() }}" method="post" ws-ajax-form>
<input type="hidden" name="wsReplaceIds" value="wsCheckoutContent">
<input type="hidden" name="wsact" value="{{= $cActionAddressUpdate.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionAddressUpdate.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
{{# addressId is necessary for guest order #}}
<input type="hidden" name="addressId" value="{{= $cAddress.id }}">
{{ include "components/errorAlert.htm" with $cAction = $cActionAddressUpdate }}
Felder mit einem * sind Pflichtfelder und müssen ausgefüllt werden.
{{ include "components/account/addressInputs.htm" with $cAction = $cActionAddressUpdate }}
<button type="submit">Adresse speichern</button>
</form>
{{= $wsCheckout | json }}
{{ if $wsCheckout.isValidBillAddress($wsCheckout.selectedBillAddress) }}
Valide Adresse hinterlegt
{{ else }}
Keine valide Adresse hinterlegt
{{ /if }}
{{ /if }}
{{ if $wsAccount.isLoggedIn }}
{{# show select options for bill address #}}
{{ if $wsAccount.addresses | len > 0 }}
{{ var $cAddress = $wsAccount.loadAddress($wsCheckout.selectedBillAddress) }}
{{ var $cCheckoutBillAddressSelect = $wsActions.create("CheckoutBillAddressSelect") }}
<form id="wsFormCheckoutBillAddressSelect" action="{{= $wsViews.current.url() }}" method="post" ws-ajax-form data-auto-submit-change>
<input type="hidden" name="wsReplaceIds" value="wsCheckoutContent">
<input type="hidden" name="wsact" value="{{= $cCheckoutBillAddressSelect.id }}">
<input type="hidden" name="wscsrf" value="{{= $cCheckoutBillAddressSelect.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
<select name="addressId" class="form-select">
<option>Bitte wählen</option>
{{ foreach $cAddress in $wsAccount.addresses }}
<option value="{{= $cAddress.id }}"{{ if $cAddress.id == $wsCheckout.selectedBillAddress }} selected{{ /if }}>{{= $cSalutations[$cAddress.salutationCode] | ifNull("")}} {{= $cAddress.firstName}} {{= $cAddress.lastName}}, {{= $cAddress.street}}, {{= $cAddress.zip}} {{= $cAddress.city }}</option>
{{ /foreach }}
</select>
<a href="{{= $wsViews.viewUrl('account/newAddress.htm')}}">Adresse hinzufügen</a>
</form>
{{ /if }}
{{ if $wsCheckout.isValidBillAddress($wsCheckout.selectedBillAddress) }}
{{ $cCheckoutStep2 = true }}
{{ var $cAddress = $wsAccount.loadAddress($wsCheckout.selectedBillAddress) }}
Valide Adresse hinterlegt
Rechnungsadresse
<a href="{{= $wsViews.viewUrl('account/changeAddress.htm', {addressId: $address.id}) }}">Adresse bearbeiten</a>
{{ include "components/account/addressSelected.htm" with $cAddress = $cAddress }}
<input id="wsShippingAddressCheck" type="checkbox"{{ if not $wsCheckout.useAlternativeShippingAddress }} checked{{ /if }}>
<label for="wsShippingAddressCheck">An diese Adresse liefern</label>
{{ else }}
Keine valide Adresse hinterlegt
{{ /if }}
{{ /if }}
{{ if $cCheckoutStep2 == true }}
<a href="{{= $wsViews.viewUrl('checkout.htm', {step: 2}) }}">Weiter zu Zahlung und Versand</a>
<a href="{{= $wsViews.viewUrl('basket.htm') }}">Zurück zum Warenkorb</a>
{{ /if }}
Template basketOverview.htm
Erstellen Sie ein neues Template checkout/basketOverview.htm Dieses Template wird verwendet um das Warenkorb während des Checkoutprozesses anzuzeigen{{ input $cStep }}
Deine Bestellung
{{ include "components/product/productTable.htm" with $cTemplate = "checkoutConfirm" }}
<table>
<tbody>
<tr>
<td>Versandkosten</td>
<td>{{= $wsCheckout.sum.shippingCost | currency }}</td>
</tr>
<tr>
<td>enthaltene MwSt.</td>
<td>{{= $wsCheckout.sum.totalTax | currency }}</td>
</tr>
<tr>
<th>Gesamtsumme</th>
<th>{{= $wsBasket.total | currency }}</th>
</tr>
</tbody>
</table>
{{ if $cStep == "3" }}
{{ if $wsAccount.isLoggedIn or $wsCheckout.guestMail }}
{{ var $cActionCheckoutConfirm2 = $wsActions.create("CheckoutConfirm") }}
{{ var $cActionSetFreeFields2 = $wsActions.create("CheckoutSetFreeFields") }}
<form id="wsFormFreeFields2" method="post" action="{{= $wsViews.current.url() }}" ws-ajax-form data-auto-submit-change>
<input type="hidden" name="wsReplaceIds" value="wsCheckoutContent">
<input type="hidden" name="wsact" value="{{= $cActionSetFreeFields2.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionSetFreeFields2.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
{{ include "components/errorAlert.htm" with $cAction = $cActionSetFreeFields2 }}
{{# show checkbox for GTC #}}
{{ foreach $cField in $wsCheckout.freeFields }}
{{ if $cField.id == "agb" }}
<input id="wsAcceptTermsAndConditionsInput-2" name="freeFields.{{= $cField.id }}.value" type="{{= $cField.type }}" {{ if $cField.checked }} checked{{ /if }}>
<label for="wsAcceptTermsAndConditionsInput-2">Ja, ich akzeptiere Ihre Allgemeinen Geschäftsbedingungen und habe von meinem Widerrufsrecht Kenntnis genommen.</label>
{{ /if }}
{{ /foreach }}
</form>
<form method="post" action="{{= $wsViews.current.url() }}">
<input type="hidden" name="wsact" value="{{= $cActionCheckoutConfirm2.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionCheckoutConfirm2.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.viewUrl('checkout.htm', {step: 4}) }}">
{{ include "components/errorAlert.htm" with $cAction = $cActionCheckoutConfirm2 }}
<button type="submit">Bestellung abschicken</button>
</form>
{{ /if }}
{{ /if }}
2) Zahlungsart & Versandart wählen
Bei diesem Schritt kann der Kunde die Zahlungs-/Versandoptionen wählen.Template paymentDelivery.htm
Zahlungsart wählen...
{{ var $cActionCheckoutPaymentUpdate = $wsActions.create("CheckoutPaymentUpdate") }}
<form id="wsFormCheckoutPaymentUpdate" method="post" action="{{= $wsViews.current.url() }}" ws-ajax-form data-auto-submit-change>
<input type="hidden" name="wsReplaceIds" value="wsCheckoutContent">
<input type="hidden" name="wsact" value="{{= $cActionCheckoutPaymentUpdate.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionCheckoutPaymentUpdate.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
<input style="display: none;" type="radio" class="resetter" name="paymentId" value="">
{{ include "components/errorAlert.htm" with $cAction = $cActionCheckoutPaymentUpdate }}
{{ if $wsCheckout.problems.payment or $cActionCheckoutPaymentUpdate.error }}
Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. Bitte wählen Sie eine andere Zahlungsart, um mit der Bestellung fortzufahren.
{{ /if }}
{{ foreach $cPayment in $wsConfig.payments }}
<input class="form-check-input" type="radio" name="paymentId" id="{{= $cPayment.id }}" value="{{= $cPayment.id }}"{{ if $wsCheckout.selectedPayment == $cPayment.id }} checked{{ /if }}{{ if not $wsCheckout.isValidPayment($cPayment.id) }} disabled{{ /if }}>
<label for="{{= $cPayment.id }}">{{= $cPayment.name }}</label>
{{ /foreach }}
</form>
...
...
{{ var $cActionCheckoutShippingMethodUpdate = $wsActions.create("CheckoutShippingMethodUpdate") }}
<form id="wsFormCheckoutShippingMethodUpdate" method="post" action="{{= $wsViews.current.url() }}" ws-ajax-form data-auto-submit-change>
<input type="hidden" name="wsReplaceIds" value="wsCheckoutContent">
<input type="hidden" name="wsact" value="{{= $cActionCheckoutShippingMethodUpdate.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionCheckoutShippingMethodUpdate.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
{{ include "components/errorAlert.htm" with $cAction = $cActionCheckoutPaymentUpdate }}
{{ if $wsCheckout.problems.shippingMethod or $cActionCheckoutShippingMethodUpdate.error }}
Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut. Bitte wählen Sie eine andere Versandart, um mit der Bestellung fortzufahren.
{{ /if }}
{{ foreach $cShipping in $wsConfig.shippingMethods }}
<input class="form-check-input" type="radio" name="shippingMethodId" id="{{= $cShipping.id }}" value="{{= $cShipping.id }}"{{ if $wsCheckout.selectedShippingMethod == $cShipping.id }} checked{{ /if }}{{ if not $wsCheckout.isValidShippingMethod($cShipping.id) }} disabled{{ /if }}>
<label for="{{= $cShipping.id }}">
{{= $cShipping.name }}{{ if $cShipping.cost }}({{= $cShipping.cost | currency }}){{ /if }}
</label>
{{ /foreach }}
</form>
...
...
<form id="wsFormCheckoutPaymentUpdate" method="post" action="{{= $wsViews.current.url() }}" ws-ajax-form data-auto-submit-change>
...
</form>
<form id="wsFormCheckoutShippingMethodUpdate" method="post" action="{{= $wsViews.current.url() }}" ws-ajax-form data-auto-submit-change>
...
</form>
{{ if $wsCheckout.selectedPayment and $wsCheckout.selectedShippingMethod }}
{{ $cCheckoutStep3 = true }}
{{ /if }}
{{ if $cCheckoutStep3 == true }}
<a href="{{= $wsViews.viewUrl('checkout.htm', {step: 3}) }}">Weiter zur Bestellübersicht</a>
{{ /if }}
<a href="{{= $wsViews.viewUrl('checkout.htm', {step: 1}) }}">Zurück zur Adresse</a>
...
3) Bestellübersicht
Auf dieser Seite kann der Kunde seine Angaben und Warenkorb prüfen und im Anschluss die Bestellung abgeben.Template orderOverview.htm
{{ input $cStep }}
{{ var $cAddress = $wsAccount.loadAddress($wsCheckout.selectedBillAddress) }}
{{ var $cActionCheckoutConfirm = $wsActions.create("CheckoutConfirm") }}
{{ var $cActionSetFreeFields = $wsActions.create("CheckoutSetFreeFields") }}
Rechnungsadresse
{{ if $cStep != "4" }}
<a href="{{= $wsViews.viewUrl('checkout.htm', {step: 1}) }}">Rechnungsadresse ändern</a>
{{ /if }}
{{ include "components/account/addressSelected.htm" with $cAddress = $cAddress }}
Lieferadresse
{{ if $cStep != "4" }}
<a href="{{= $wsViews.viewUrl('checkout.htm', {step: 1}) }}">Lieferadresse ändern</a>
{{ /if }}
{{ if $wsCheckout.useAlternativeShippingAddress }}
{{ var $cShippingAddress = $wsAccount.loadAddress($wsCheckout.selectedShippingAddress) }}
{{ include "components/account/addressSelected.htm" with $cAddress = $cShippingAddress }}
{{ else }}
Entspricht Rechnungsadresse
{{ /if }}
Zahlung und Versand
{{ if $cStep != "4" }}
<a href="{{= $wsViews.viewUrl('checkout.htm', {step: 2}) }}">Zahlung und Versand ändern</a>
{{ /if }}
{{ foreach $cPayment in $wsConfig.payments }}
{{ if $wsCheckout.selectedPayment == $cPayment.id }}
Gewählte Zahlungsart: {{= $cPayment.name }}
{{ /if }}
{{ /foreach }}
{{ foreach $cShipping in $wsConfig.shippingMethods }}
{{ if $wsCheckout.selectedShippingMethod == $cShipping.id }}
Gewählte Versandart: {{= $cShipping.name }}
{{ /if }}
{{ /foreach }}
{{ if $cStep != "4" }}
<form id="wsFormFreeFields1" method="post" action="{{= $wsViews.current.url() }}" ws-ajax-form data-auto-submit-change>
<input type="hidden" name="wsReplaceIds" value="wsCheckoutContent">
<input type="hidden" name="wsact" value="{{= $cActionSetFreeFields.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionSetFreeFields.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
{{ include "components/errorAlert.htm" with $cAction = $cActionSetFreeFields }}
{{# show comment textarea #}}
{{ foreach $cField in $wsCheckout.freeFields }}
{{ if $cField.id == "comment" }}
Wünsche, Kommentare, Anregungen
<textarea name="freeFields.{{= $cField.id }}.value" rows="3" value="{{= $cField.text | ifNull($cField.default) }}"></textarea>
{{ /if }}
{{ /foreach }}
{{# show checkbox for GTC #}}
{{ foreach $cField in $wsCheckout.freeFields }}
{{ if $cField.id == "agb" }}
<input id="wsAcceptTermsAndConditionsInput-1" name="freeFields.{{= $cField.id }}.value" type="{{= $cField.type }}">
<label for="wsAcceptTermsAndConditionsInput-1">Ja, ich akzeptiere Ihre Allgemeinen Geschäftsbedingungen und habe von meinem Widerrufsrecht Kenntnis genommen.</label>
{{ /if }}
{{ /foreach }}
</form>
<form method="post" action="{{= $wsViews.current.url() }}">
<input type="hidden" name="wsact" value="{{= $cActionCheckoutConfirm.id }}">
<input type="hidden" name="wscsrf" value="{{= $cActionCheckoutConfirm.csrf }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.viewUrl('checkout.htm', {step: 4}) }}">
{{ include "components/errorAlert.htm" with $cAction = $cActionCheckoutConfirm }}
<button type="submit">Bestellung abschicken</button>
</form>
{{ /if }}
{{ if $cStep == "4" }}
{{ foreach $cFreeField in $wsCheckout.freeFields }}
{{ if $cFreeField.id == "comment" and $cFreeField.text }}
Bemerkung: {{= $cFreeField.text | ifNull("") }}
{{ /if }}
{{ /foreach }}
{{ /if }}
4) Bestellbestätigung
Template confirm.htm
{{ input $cStep }}
{{ var $cCurrentAction = $wsActions.current.name }}
{{ if not $cCurrentAction == null }}
Vielen Dank für Ihre Bestellung
Eine Bestätigungsmail Ihres Auftrages wird Ihnen in wenigen Minuten zugesendet.
Wir wünschen Ihnen viel Spaß mit Ihrer Bestellung und würden uns freuen, wenn Sie bald wieder bei uns Einkaufen.
Sehen Sie bitte ggf. auch in Ihrem Spam-Ordner nach oder nutzen Sie unseren Kundenservice.
Auftragsnummer: {{= $wsCheckout.orderId }}
{{ var $cOrder = $wsOrderHistory.load($wsCheckout.orderId) }}
Bestelldatum: {{= $cOrder.general.dateTime | dateFmt("%d.%m.%Y") }} um {{= $cOrder.general.dateTime | dateFmt("%H:%M") }} Uhr
{{ if not $wsAccount.isLoggedIn }}
Wollen Sie sich doch noch registrieren?
{{ var $cGuestRegister = $wsActions.create("GuestRegister") }}
{{ if $cGuestRegister.success }}
Account erfolgreich erstellt.
{{ /if }}
{{ foreach $cError in $cGuestRegister.errors }}
{{ if $cError.text }}
{{= $cError.text }}
{{ else }}
{{= $cError.code }}
{{ /if }}
{{ if $cError.code == "passwordCheckFailed" }}
{{ if $cError.subCode == "minlen" }}
Mindestlänge: {{= $cError.details.len }} Zeichen
{{ /if }}
{{ if $cError.subCode == "maxlen" }}
Maximallänge: {{= $cError.details.len }} Zeichen
{{ /if }}
{{ /if }}
{{ /foreach }}
{{ if not $cGuestRegister.success }}
<form action="{{= $wsViews.current.url() }}" method="post">
<input type="hidden" name="wscsrf" value="{{= $cGuestRegister.csrf }}">
<input type="hidden" name="wsact" value="{{= $cGuestRegister.id }}">
<input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
<input type="email" name="guestMail" value="{{= $wsCheckout.guestMail }}" placeholder="Ihre verwendete E-Mail-Adresse" readonly>
<label>Ihre verwendete E-Mail-Adresse</label>
<input type="password" name="password" placeholder="Passwort">
<label>Passwort</label>
<input type="password" name="passwordRepeat" placeholder="Passwort wiederholen">
<label>Passwort wiederholen</label>
<button type="submit">Registrieren</button>
</form>
{{ /if }}
{{ /if }}
{{ include "components/checkout/orderOverview.htm" with $cStep = $cStep }}
{{ else }}
Upps... es ist ein Fehler aufgetreten.
{{ /if }}
