Auswahl zwischen postalischer Lieferadresse und Packstation

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.

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.

<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

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.

<D-Suffix1>
   <+Entry>
      Name  = Postalische Lieferadresse
      Value = 01
   </+Entry>
   <+Entry>
      Name  = DHL Packstation
      Value = 02
   </+Entry>
</D-Suffix1>

Wegweiser: Auswahllisten der Adressdaten · Referenz: Abschnitt D-Suffix..

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.

<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>.

<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

Schritt 5: Pflichtfelder festlegen

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

<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.

<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>

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 · 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>.

<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

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.

<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

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

{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

{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

{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`	Beschriftung, gegebenenfalls die alternative aus Schritt 6
`_input`	Feldname für das HTML-Formular
`_max`	zulässige Zeichenzahl
`_required`	Klammerung: Feld ist Pflichtfeld
`_action`	Klammerung: Feld löst das Nachladen aus
`_data`	Schleife über die Einträge einer Auswahlliste
`_code`	Wert eines Listeneintrags
`_value`	Anzeigetext eines Listeneintrags
`_selected`	Klammerung beziehungsweise Attribut für den gewählten Eintrag
`_error`	Namenszusatz für die Fehlerklasse
`_errormessage`	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.

<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 · 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.

<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~.

Schritt 11: JavaScript-Bibliothek einbinden

<head>
   <script src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
</head>

Materialien: WEBSALE JavaScript-Bibliothek

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.

// 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:

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:

<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

​Schritt 1: Felder anlegen

​Schritt 2: Auswahlmöglichkeiten definieren

​Schritt 3: Standardtyp festlegen

​Schritt 4: Sichtbarkeit der Felder steuern

​Schritt 5: Pflichtfelder festlegen

​Schritt 6: Beschriftungen umbenennen

​Schritt 7: Auslösendes Feld benennen

​Schritt 8: Felder ins Template setzen

​Die Typauswahl als Auswahlknöpfe

​Ein Auswahlfeld

​Ein Textfeld

​Die Tag-Endungen im Überblick

​Schritt 9: Nachzuladenden Bereich festlegen

​Schritt 10: Formular-ID vergeben

​Schritt 11: JavaScript-Bibliothek einbinden

​Schritt 12: Rückruffunktionen füllen

​Schritt 13: Postleitzahl-Assistent nachrüsten

​Verwandte Themen

Schritt 1: Felder anlegen

Schritt 2: Auswahlmöglichkeiten definieren

Schritt 3: Standardtyp festlegen

Schritt 4: Sichtbarkeit der Felder steuern

Schritt 5: Pflichtfelder festlegen

Schritt 6: Beschriftungen umbenennen

Schritt 7: Auslösendes Feld benennen

Schritt 8: Felder ins Template setzen

Die Typauswahl als Auswahlknöpfe

Ein Auswahlfeld

Ein Textfeld

Die Tag-Endungen im Überblick

Schritt 9: Nachzuladenden Bereich festlegen

Schritt 10: Formular-ID vergeben

Schritt 11: JavaScript-Bibliothek einbinden

Schritt 12: Rückruffunktionen füllen

Schritt 13: Postleitzahl-Assistent nachrüsten

Verwandte Themen