> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Auswahl zwischen postalischer Lieferadresse und Packstation

> Wie Sie in WEBSALE V8s Adresstypen anbieten und die Eingabefelder je nach Wahl ein- und ausblenden, umbenennen und zu Pflichtfeldern machen.

Eine Packstation braucht andere Angaben als eine Haustür: eine Postnummer statt eines Landes, eine Stationsnummer statt einer Straße. Zeigen Sie dem Käufer beides gleichzeitig, füllt er die Hälfte falsch aus.

Besser ist, ihn zuerst den Adresstyp wählen zu lassen und dann nur die Felder zu zeigen, die dazu passen. WEBSALE V8s nennt das **eingabeabhängige Adressdatensteuerung**: Die Auswahl in einem Adressfeld steuert Sichtbarkeit, Beschriftung und Pflichtstatus der übrigen Felder.

Diese Seite führt das am Beispiel „postalische Lieferadresse oder DHL Packstation" durch. Das Verfahren selbst ist nicht auf zwei Typen begrenzt und lässt sich auf beliebige Fälle übertragen, beispielsweise auf Privat- und Firmenadressen.

![Packstation](https://mintcdn.com/websaleag-44ee7ea6/qbW8uRSswcI46vuk/images/packstation.jpg?fit=max\&auto=format\&n=qbW8uRSswcI46vuk\&q=85\&s=511a36b82c3bdbdf57cd8e6113ea3509)

Das Ein- und Ausblenden läuft über AJAX. Ohne JavaScript im Browser des Käufers bleibt die Seite bei der Ausgangsansicht stehen. Denken Sie deshalb an eine Rückfallebene, in der alle Felder sichtbar sind.

Der Weg dorthin führt über sieben Einträge in der `shop.config` und sechs Ergänzungen im Design.

## Schritt 1: Felder anlegen

Legen Sie im Abschnitt `<DeliveryAddressFields-Txt>` alle Felder an, die einer der beiden Adresstypen braucht. Die Auswahl des Typs bekommt ein eigenes Feld, hier `Suffix1`.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<DeliveryAddressFields-Txt>
   Suffix1    = Wählen Sie Ihren Lieferadress-Typ
   Salutation = Anrede
   FirstName  = Vorname
   LastName   = Name
   Country    = Land
   Street1    = Straße, Hausnummer   # dient auch der Abfrage der Packstationsnummer
   Zip        = Postleitzahl
   City       = Ort
   Suffix2    = Postnummer
</DeliveryAddressFields-Txt>
```

Straße und Packstationsnummer teilen sich absichtlich dasselbe technische Feld. Viele Warenwirtschaftssysteme nehmen nur eine begrenzte Zahl von Adressfeldern entgegen. Klären Sie vorab mit Ihrer Warenwirtschaft, in welche Felder die Daten übergeben werden sollen, bevor Sie die Zuordnung festlegen.

Referenz: [Abschnitt DeliveryAddressFields-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md#deliveryaddressfields-txt)

## Schritt 2: Auswahlmöglichkeiten definieren

Das Feld `Suffix1` bekommt seine Einträge in einem eigenen Abschnitt, direkt unterhalb von `<DeliveryAddressFields-Txt>`. Die Liste ist beliebig erweiterbar.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<D-Suffix1>
   <+Entry>
      Name  = Postalische Lieferadresse
      Value = 01
   </+Entry>
   <+Entry>
      Name  = DHL Packstation
      Value = 02
   </+Entry>
</D-Suffix1>
```

Wegweiser: [Auswahllisten der Adressdaten](https://dokumentation.websale.de/v8s/adressdaten/auswahllisten-der-adressdaten.md) · Referenz: [Abschnitt D-Suffix..](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md)

## Schritt 3: Standardtyp festlegen

Welcher Typ beim Anlegen einer neuen Adresse vorausgewählt ist, steht im Abschnitt `<DeliveryAddressFields-Standards>`. Eingetragen wird der `Value` aus Schritt 2.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<DeliveryAddressFields-Standards>
   Suffix1 = 01
</DeliveryAddressFields-Standards>
```

Referenz: Abschnitt DeliveryAddressFields-Standards

## Schritt 4: Sichtbarkeit der Felder steuern

Für das Beispiel ergibt sich diese Aufteilung:

| Feld | Postalisch | Packstation |
| - | - | - |
| Anrede, Vorname, Name | ja | ja |
| Straße beziehungsweise Packstationsnummer | ja | ja |
| Postleitzahl, Ort | ja | ja |
| Land | ja | nein |
| Postnummer | nein | ja |

Für Felder, die in beiden Fällen erscheinen, ist nichts zu tun. Nur die beiden abweichenden Felder brauchen eine Regel im Abschnitt `<AddressFields-InputVisibility>`.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<AddressFields-InputVisibility>

   <+FieldVisibility>          # Land
      AddressField  = Country
      AddressType   = delivery
      Visible       = yes
      ResetIfHidden = yes
      <+Condition>
         Field = Suffix1
         Type  = value
         Value = 01
      </+Condition>
   </+FieldVisibility>

   <+FieldVisibility>          # Postnummer
      AddressField  = Suffix2
      AddressType   = delivery
      Visible       = yes
      ResetIfHidden = yes
      <+Condition>
         Field = Suffix1
         Type  = value
         Value = 02
      </+Condition>
   </+FieldVisibility>

</AddressFields-InputVisibility>
```

| Parameter | Bedeutung |
| - | - |
| `AddressField` | das gesteuerte Feld, auch mehrere durch Komma getrennt |
| `AddressType` | `bill`, `delivery` oder weglassen für beide Adressarten |
| `Visible` | `yes`, wenn das Feld bei erfüllter Bedingung erscheinen soll. Voreingestellt ist `no` |
| `ResetIfHidden` | ob der Inhalt beim Ausblenden verworfen wird. Voreingestellt ist `yes` |

Lassen Sie `ResetIfHidden` auf `yes`. Sonst wandert der Wert eines ausgeblendeten Feldes mit in die Bestellung, beispielsweise ein Land, das der Käufer vor dem Wechsel zur Packstation eingetragen hatte.

Referenz: [Abschnitt AddressFields-InputVisibility](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md#addressfields-inputvisibility)

## Schritt 5: Pflichtfelder festlegen

Pflichtfelder stehen im Abschnitt `<InputCheck>`. Felder, die für beide Typen gelten, fassen Sie in einer Zeile zusammen.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<InputCheck>
   <+InputCheck>
      AddressField   = Salutation,FirstName,LastName,Street1,Zip,City
      AddressType    = delivery
      Type           = minlen
      Len            = 1
      ErrorMessageID = emptyerror
   </+InputCheck>
</InputCheck>
```

Die beiden abweichenden Felder bekommen dieselbe Bedingung wie in Schritt 4, damit sie nur beim passenden Adresstyp Pflicht sind.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<InputCheck>
   <+InputCheck>               # Land
      AddressField   = Country
      AddressType    = delivery
      Type           = minlen
      Len            = 1
      ErrorMessageID = emptyerror
      <+Condition>
         Field = Suffix1
         Type  = value
         Value = 01
      </+Condition>
   </+InputCheck>

   <+InputCheck>               # Postnummer
      AddressField   = Suffix2
      AddressType    = delivery
      Type           = minlen
      Len            = 1
      ErrorMessageID = emptyerror
      <+Condition>
         Field = Suffix1
         Type  = value
         Value = 02
      </+Condition>
   </+InputCheck>
</InputCheck>
```

> [!WARNING]
>
> Vergessen Sie die Bedingung hier, wird ein ausgeblendetes Feld zum Pflichtfeld. Der Käufer bekommt dann eine Fehlermeldung zu einem Feld, das er gar nicht sieht.

Referenz: [Abschnitt InputCheck](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md#inputcheck) · Wegweiser: Prüfungen von Adressdaten festlegen

## Schritt 6: Beschriftungen umbenennen

Weil `Street1` je nach Typ etwas anderes bedeutet, soll sich auch die Beschriftung ändern. Die Grundbeschriftung steht in `<DeliveryAddressFields-Txt>`, die abweichende in `<AddressFields-AlternativeText>`.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<AddressFields-AlternativeText>
   <+Alternative>
      AddressField = Street1
      AddressType  = delivery
      Text         = Packstation Nr.
      <+Condition>
         Field = Suffix1
         Type  = value
         Value = 02
      </+Condition>
   </+Alternative>
</AddressFields-AlternativeText>
```

Referenz: [Abschnitt AddressFields-AlternativeText](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md#addressfields-alternativetext)

## Schritt 7: Auslösendes Feld benennen

Damit eine Änderung an `Suffix1` das Nachladen überhaupt anstößt, wird das Feld im Abschnitt `<AddressFields-Actions>` als auslösend gekennzeichnet.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<AddressFields-Actions>
   <+FieldAction>
      AddressField = Suffix1
      AddressType  = delivery
   </+FieldAction>
</AddressFields-Actions>
```

Der Shop schaltet Felder, die in Bedingungen von Sichtbarkeit, Beschriftung oder Pflichtprüfung vorkommen, zusätzlich selbst aktiv. Der ausdrückliche Eintrag schadet aber nicht und macht die Absicht im Konfigurationsfile sichtbar.

Referenz: [Abschnitt AddressFields-Actions](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md#addressfields-actions)

## Schritt 8: Felder ins Template setzen

Die Felder gehören in das Formular auf beiden Templates, die eine Lieferadresse entgegennehmen: `ws_address_combined.htm` im Bestellablauf und `ws_deliv_address_manage.htm` im Kundenkonto.

Jedes Feld folgt demselben Aufbau. Die Klammerung `{D-…[_visible](/v8s/referenz/tags/d-lieferadresse)}` entscheidet über die Anzeige, `{D-…[_action](/v8s/referenz/tags/d-lieferadresse)}` fügt den AJAX-Aufruf nur dort ein, wo er gebraucht wird, und `{D-…[_required](/v8s/referenz/tags/d-lieferadresse)}` markiert Pflichtfelder.

### Die Typauswahl als Auswahlknöpfe

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{D-Suffix1_visible}
   <label>~D-Suffix1_text~ {D-Suffix1_required}*{/D-Suffix1_required}</label>
   {@D-Suffix1_data}
      <input type="radio" name="~D-Suffix1_input~" value="~D-Suffix1_code~"
         {D-Suffix1_action}onchange="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_Refresh~','~WS-Charset~')"{/D-Suffix1_action}
         {D-Suffix1_selected}checked{/D-Suffix1_selected}>~D-Suffix1_value~<br>
   {/@D-Suffix1_data}
   {D-Suffix1_errormessage}~D-Suffix1_errormessage~{/D-Suffix1_errormessage}
{/D-Suffix1_visible}
```

### Ein Auswahlfeld

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{D-Salutation_visible}
   <label for="~D-Salutation_input~">~D-Salutation_text~ {D-Salutation_required}*{/D-Salutation_required}</label>
   <select name="~D-Salutation_input~" id="~D-Salutation_input~" class="select_salutation~D-Salutation_error~"
      {D-Salutation_action}onchange="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_Refresh~','~WS-Charset~')"{/D-Salutation_action}>
      {@D-Salutation_data}
         <option value="~D-Salutation_code~" ~D-Salutation_selected~>~D-Salutation_value~</option>
      {/@D-Salutation_data}
   </select><br>
   {D-Salutation_errormessage}~D-Salutation_errormessage~{/D-Salutation_errormessage}
{/D-Salutation_visible}
```

### Ein Textfeld

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{D-Street1_visible}
   <label for="~D-Street1_input~">~D-Street1_text~ {D-Street1_required}*{/D-Street1_required}</label>
   <input type="text" name="~D-Street1_input~" id="~D-Street1_input~"
      maxlength="~D-Street1_max~" value="~D-Street1~" class="input~D-Street1_error~"
      {D-Street1_action}onblur="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_Refresh~','~WS-Charset~')"{/D-Street1_action}><br>
   {D-Street1_errormessage}~D-Street1_errormessage~{/D-Street1_errormessage}
{/D-Street1_visible}
```

Alle übrigen Felder des Beispiels bauen Sie nach einem dieser drei Muster: `FirstName`, `LastName`, `Zip`, `City` und `Suffix2` wie das Textfeld, `Country` wie das Auswahlfeld.

Bei Auswahlfeldern löst `onchange` aus, bei Textfeldern `onblur`. Ein `onchange` am Textfeld würde erst beim Verlassen greifen und ein `onkeyup` bei jedem Tastendruck eine AJAX-Anfrage auslösen.

### Die Tag-Endungen im Überblick

| Endung | Liefert |
| - | - |
| `_visible` | Klammerung: Feld wird angezeigt |
| [`_text`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Beschriftung, gegebenenfalls die alternative aus Schritt 6 |
| [`_input`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Feldname für das HTML-Formular |
| [`_max`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | zulässige Zeichenzahl |
| `_required` | Klammerung: Feld ist Pflichtfeld |
| `_action` | Klammerung: Feld löst das Nachladen aus |
| [`_data`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Schleife über die Einträge einer Auswahlliste |
| [`_code`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Wert eines Listeneintrags |
| [`_value`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Anzeigetext eines Listeneintrags |
| [`_selected`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Klammerung beziehungsweise Attribut für den gewählten Eintrag |
| [`_error`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Namenszusatz für die Fehlerklasse |
| [`_errormessage`](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse) | Fehlertext zu diesem Feld |

## Schritt 9: Nachzuladenden Bereich festlegen

Das Nachladen tauscht einen Bereich der Seite aus. Klammern Sie ihn mit `<WS-Ajax-…>`, wobei die Kennung der ID Ihres Containers entspricht.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="content">
   {ST-AJAX}<WS-Ajax-content>{/ST-AJAX}
      ...
   {ST-AJAX}</WS-Ajax-content>{/ST-AJAX}
</div>
```

Die Klammerung mit `{ST-AJAX}` sorgt dafür, dass die Bereichsmarkierung nur beim AJAX-Aufruf im Quelltext landet und nicht beim gewöhnlichen Seitenaufbau.

Referenz: [ST-AJAX](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md#die-tags-im-uberblick) · WS-Ajax-\<ID> · Wegweiser: AJAX-Funktionen

## Schritt 10: Formular-ID vergeben

Das JavaScript spricht das Formular über seine ID an. Diese ID ist der erste Parameter im Aufruf aus Schritt 8.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-DelivAddrManage~" method="post" autocomplete="off" id="addressform">
   ...
</form>
```

Auf der Adressseite im Bestellablauf tritt an die Stelle des Formular-Tags [`~FORM-Addr~`](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare#bestellablauf).

## Schritt 11: JavaScript-Bibliothek einbinden

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   <script src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
</head>
```

Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

## Schritt 12: Rückruffunktionen füllen

Die vier Funktionen gehören in Ihre Designkomponente. Darin blenden Sie beispielsweise eine Ladeanzeige ein oder weisen auf eine unterbrochene Verbindung hin.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// vor dem Absetzen der AJAX-Anfrage
function ws_AJAXRefreshAddressInputStart() {
}

// die Eingabefelder wurden erfolgreich nachgeladen
function ws_AJAXRefreshAddressInputResponseSuccess() {
}

// das Nachladen ist fehlgeschlagen
function ws_AJAXRefreshAddressInputResponseError() {
}

// die AJAX-Kommunikation selbst ist fehlgeschlagen
function ws_AJAXRefreshAddressInputError() {
}
```

## Schritt 13: Postleitzahl-Assistent nachrüsten

Setzen Sie den Postleitzahl-Assistenten ein, müssen Sie dafür sorgen, dass sein JavaScript nach jedem Nachladen erneut ausgeführt wird. Andernfalls funktioniert er nach dem ersten Typwechsel nicht mehr.

Verlagern Sie die Einrichtung dazu aus `$(document).ready()` in eine eigene Funktion:

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
function ifajaxreload_zip_help() {
   var paramsBill = {
      language_list: ["DEU", "AUT"],
      call_url: "~WS-AjaxZIPHelpUrl~",
      zip_field: "input[name=ws_input_zip]",
      city_field: "input[name=ws_input_city]",
      lang_field: "select[name=ws_input_country]",
      close: true,
      headline: "PLZ Hilfe",
      description: "Hilfe zur Auswahl Ihrer Postleitzahl und Ihres Wohnortes"
   };
   $.ws_zip_help(paramsBill);

   var paramsDelivery = {};
   $.extend(paramsDelivery, paramsBill);
   paramsDelivery.zip_field = "input[name=ws_input_delivery_zip]";
   paramsDelivery.city_field = "input[name=ws_input_delivery_city]";
   paramsDelivery.lang_field = "select[name=ws_input_delivery_country]";
   $.ws_zip_help(paramsDelivery);
}
```

Der Aufruf gehört dann **innerhalb** der AJAX-Klammerung, damit er beim Nachladen mitkommt:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="content">
   {ST-AJAX}<WS-Ajax-content>{/ST-AJAX}
      ...
      <script>
         $(document).ready(function () { ifajaxreload_zip_help(); });
      </script>
      ...
   {ST-AJAX}</WS-Ajax-content>{/ST-AJAX}
</div>
```

Wegweiser: [PLZ-Assistent](https://dokumentation.websale.de/v8s/adressdaten/plz-assistent.md)

## Verwandte Themen

* Wegweiser: [Abweichende Lieferadresse abfragen, für den Grundaufbau der Felder](https://dokumentation.websale.de/v8s/adressdaten/abweichende-lieferadresse-abfragen.md)
* Wegweiser: [Auswahllisten der Adressdaten](https://dokumentation.websale.de/v8s/adressdaten/auswahllisten-der-adressdaten.md)
* Wegweiser: [Prüfungen von Adressdaten festlegen](https://dokumentation.websale.de/v8s/adressdaten/pruefungen-von-adressdaten-festlegen.md)
* Wegweiser: [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)


## Related topics

- [Auswahl zwischen Privat- und Geschäftsadresse](https://dokumentation.websale.de/v8s/adressdaten/auswahl-zwischen-privat-und-geschaeftsadresse.md)
- [Adressen und Eingabeprüfungen](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/adressen-und-eingabepruefung.md)
- [PLZ-Assistent](https://dokumentation.websale.de/v8s/adressdaten/plz-assistent.md)
- [Auswahllisten der Adressdaten](https://dokumentation.websale.de/v8s/adressdaten/auswahllisten-der-adressdaten.md)
- [D- (Lieferadresse)](https://dokumentation.websale.de/v8s/referenz/tags/d-lieferadresse.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.