Kundendaten bilden die Grundlage für eine personalisierte Nutzererfahrung im Shop. Sie ermöglichen es, wichtige Informationen wie die Adressdaten und das Kundenprofil des eingeloggten Benutzers abzurufen und im Kundenkonto übersichtlich darzustellen. In diesem Abschnitt erfahren Sie, wie Sie auf die Daten eines Kundenkontos zugreifen und diese dynamisch im Frontend anzeigen können.

Inhaltsübersicht

1 Templates
2 Datenübersicht
3 Beispiele für die Anzeige von Kundendaten
4 Praxisbeispiele
5 Referenz

Templates

Grundsätzlich können die Daten eines Kunden, nachdem er eingeloggt ist, auf jedem Template geladen und angezeigt werden.

Im Standard-Ausliefershop befinden sich die Templates für die Kundenkonto-Seiten im Verzeichnis: views/account. Diese Templates dienen als Grundlage zur Anzeige und Bearbeitung der Kundendaten. Die Daten können je nach Bedarf auch auf anderen Templates genutzt werden, sofern der Benutzer eingeloggt ist.

Datenübersicht

Um die verfügbaren Daten eines Kunden einzusehen, können Sie sich diese in einem JSON-ähnlichen Format ausgeben lassen. Dies ist hilfreich, um die Struktur und Inhalte vorhandenen Kundendaten zu verstehen oder auch Fehler zu debuggen.

Dies erfolgt folgendermaßen (auskommentiert, damit die Ausgabe nicht direkt im Frontend angezeigt wird):

<!--

Quellcode-Beispiel wie ich auf Kundendaten zugreifen kann
Kann man auf alle zugreifen oder zum Beispiel nur auf die Adressdaten?
Mit alle meine ich, alle Daten, die wir von dem Kunden haben, zum Beispiel Produkte, die er auf der Merkliste hat,
alle Adressen, E-Mail-Adresse, letzter Login usw

{{= $wsAccount | json }}

-->

Die Ausgabe in der Developer-Konsole des Browsers könnte dann wie folgt aussehen:

<!--

Address 1

Name: VX Käufer
Street: Gutenstetterstraße, 2
City: Nürnberg
Zip Code: 90449
Country: Germany (DE)
Phone: None
Mobile Phone: None
Business Phone: None
Business Fax: None

Address 2
...

Account Information:
Email: beispielkunde@websale.de
Auto Login Restriction: Restricted
Is Auto Login Restricted: Yes
Is Logged In: Yes
Is Auto Logged In: No
Is Password Reset Required: No
Last Login: 2025-02-13T07:01:30.286Z

Main Address:
Name: VX Käufer
Street: Gutenstetterstraße, 2
City: Nürnberg
Zip Code: 90449
Country: Germany (DE)

Pseudo Credit Cards: None

-->

Beispiele für die Anzeige von Kundendaten

Prüfen, ob ein Kunde eingeloggt ist

Im folgenden Beispiel wird überprüft, ob ein Kunde eingeloggt ist. Je nach Status können unterschiedliche Inhalte, wie z. B. ein Loginformular oder eine persönliche Begrüßung, angezeigt werden.

{{ if $wsAccount.isLoggedIn }}

    <!-- Kunde ist eingeloggt -->
	<!-- z.B. Erfolgsmeldung, Anrede und Verlinkungen zum Kundenkonto -->
	
{{ else }}

    <!-- Kunde ist nicht eingeloggt -->
	<!-- z.B. Eingabefelder für das Login anbieten -->
	
{{ /if }}

Persönliche Anrede eines eingeloggten Kunden

Ist ein Kunde eingeloggt, kann er mit seinen persönlichen Daten angesprochen werden. Hier wird der Vorname und Nachname des Kunden aus der Hauptadresse (mainAddress) ausgegeben.

{{ if $wsAccount.isLoggedIn }}

  Willkommen
  {{ if $wsAccount.mainAddress.firstName }} 
      {{= $wsAccount.mainAddress.firstName }}
      {{= $wsAccount.mainAddress.lastName }}
  {{ /if }}

{{ /if }}

Link zur Kundenkonto-Übersichtsseite

Dieses Beispiel zeigt, wie ein Link zur Übersichtsseite des Kundenkontos generiert wird. Der Link verweist auf das Template overview.htm, das sich im Verzeichnis account befindet.

{{ if $wsAccount.isLoggedIn }}

    <a href="{{= $wsViews.viewUrl('account/overview.htm')}}">
        Zu Ihrer Kundenkonto-Übersicht
    </a>

{{ /if }}

Adressdaten eines Kunden anzeigen

Hier werden die Adressdaten eines eingeloggten Kunden aus der Hauptadresse (mainAddress) ausgelesen und angezeigt.

{{ var $myaddress = $wsAccount.mainAddress }}

Ihre Rechnungsadresse
{{= $myaddress.firstName}} {{= $myaddress.lastName}}
{{= $myaddress.street}}
{{= $myaddress.zip}} {{= $myaddress.city}}
{{= $myCountries[$myaddress.country]}}

<a href="{{= $wsViews.viewUrl('account/address.htm', {type: 'change', addressId: $myaddress.id}) }}">Bearbeiten</a>

Schleife über alle Adressen im Adressbuch

In diesem Beispiel wird über alle gespeicherten Adressen eines Kunden iteriert. Es werden zu jeder Adresse Bearbeitungs- und Löschlinks angezeigt.

{{ foreach $myaddress in $wsAccount.addresses }}
      <p>Adresse ID: {{ $myaddress.id }}</p>

      <a href="{{= $wsViews.viewUrl('account/changeAddress.htm', {addressId: $address.id}) }}">Bearbeiten</a>
{{ /foreach }}

Adressdaten im Bestellablauf laden

Während des Bestellvorgangs werden die Adressdaten des Kunden für die Rechnungs- und Lieferadresse verwendet. Dieses Beispiel zeigt, wie die Adressen während des Bestellprozesses abgefragt werden können.

{{ var $myBillingAddress = $wsAccount.loadAddress($wsCheckout.selectedBillAddress) }}
Ihre Rechnungsadresse
...

{{ var $myShippingAddress = $wsAccount.loadAddress($wsCheckout.selectedShippingAddress) }}
Ihre Lieferadresse
...

Logout-Link

Ein Kunde kann sich über diesen Link aus dem Kundenkonto ausloggen. Die URL wird über die Funktion logoutUrl bereitgestellt.

{{ if $wsAccount.isLoggedIn }}
    <a href="{{= $wsActions.url('Logout', $wsViews.viewUrl('account/overview.htm'))}}">
      Abmelden
    </a>
{{ /if }}

E-Mail-Adresse ändern Link

{{ if $wsAccount.isLoggedIn }}
    <a href="{{= $wsActions.url('Passwort ändern', $wsViews.viewUrl('account/changePassword.htm'))}}">
      Passwort ändern
    </a>
{{ /if }}

Praxisbeispiele

Praxisbeispiele zu Umsetzungen von Kundekonto-Seiten und -Funktionen finden Sie hier:

→ Praxisbeispiele Kundekonto

Referenz

In der Modul-Referenz für $wsAccount finden Sie eine Übersicht aller verfügbaren Eigenschaften und Parameter.

Für das Modul $wsAccount stehen zudem Aktionen zur Verfügung, die es ermöglichen, mit den Modul-Daten zu interagieren. Diese Aktionen können über HTML-Formulare oder Ajax-Anfragen ausgeführt werden und erlauben z. B. das Ändern, Hinzufügen oder Löschen von Daten.

Die Konfigurationsmöglichkeiten des Moduls sind bei den Konfigurationsparameter Accounts beschrieben und können je nach Bedarf angepasst werden.

$wsAccount - Konto