Auswahl zwischen Privat- und Geschäftsadresse

Ein Privatkunde soll nicht durch Felder für Firma und Umsatzsteuer-ID scrollen müssen, ein Geschäftskunde diese Felder aber vorfinden. Statt beides nebeneinander zu zeigen, lassen Sie den Käufer zuerst seinen Adresstyp wählen und blenden dann nur die passenden Felder ein. Das ist derselbe Mechanismus wie bei der Auswahl zwischen postalischer Lieferadresse und Packstation, die eingabeabhängige Adressdatensteuerung. Hier wirkt sie auf die Rechnungsadresse, weshalb überall A- statt D- steht und die Konfigurationsabschnitte anders heißen.

Wegweiser: Auswahl zwischen postalischer Lieferadresse und Packstation 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.

Schritt 1: Felder anlegen

Im Abschnitt <AddressFields-Txt> legen Sie alle Felder an, die einer der beiden Adresstypen braucht. Die Typauswahl selbst bekommt ein eigenes Feld, hier Suffix1.

<AddressFields-Txt>
   Suffix1    = Wählen Sie Ihren Adress-Typ
   Company    = Firma / Institution    # nur für die Geschäftsadresse
   Salutation = Anrede
   FirstName  = Vorname
   LastName   = Nachname
   Street1    = Straße, Nr.
   Zip        = PLZ
   City       = Ort
   Country    = Land
   TaxID      = Umsatzsteuer-ID        # nur für die Geschäftsadresse
</AddressFields-Txt>

Referenz: Abschnitt AddressFields-Txt

Schritt 2: Auswahlmöglichkeiten definieren

Die Einträge für Suffix1 stehen in einem eigenen Abschnitt direkt darunter. Die Liste ist beliebig erweiterbar, beispielsweise um „Behörde” oder „Verein”.

<A-Suffix1>
   <+Entry>
      Name  = Privatadresse
      Value = 01
   </+Entry>
   <+Entry>
      Name  = Geschäftsadresse
      Value = 02
   </+Entry>
</A-Suffix1>

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

Schritt 3: Standardtyp festlegen

Welcher Typ bei der ersten Adresseingabe vorausgewählt ist, steht im Abschnitt <AddressFields-Standards>. Eingetragen wird der Value aus Schritt 2.

<AddressFields-Standards>
   Suffix1 = 01
</AddressFields-Standards>

Wählen Sie als Standard den Typ, der bei Ihnen häufiger vorkommt. Ein reiner B2B-Shop startet sinnvollerweise mit der Geschäftsadresse, damit die meisten Käufer gar nichts umstellen müssen. Referenz: Abschnitt AddressFields-Standards

Schritt 4: Sichtbarkeit der Felder steuern

Für das Beispiel ergibt sich diese Aufteilung:

Feld	Privatadresse	Geschäftsadresse
Anrede, Vorname, Nachname	ja	ja
Straße, Postleitzahl, Ort, Land	ja	ja
Firma	nein	ja
Umsatzsteuer-ID	nein	ja

Felder, die in beiden Fällen erscheinen, brauchen keine Regel. Firma und Umsatzsteuer-ID hängen an derselben Bedingung und passen deshalb in einen Block.

<AddressFields-InputVisibility>
   <+FieldVisibility>
      AddressField  = Company,TaxID
      AddressType   = bill
      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 eine Firmenangabe, die der Käufer vor dem Wechsel zur Privatadresse eingetragen hatte, unbemerkt mit in die Bestellung.

Referenz: Abschnitt AddressFields-InputVisibility

Schritt 5: Pflichtfelder festlegen

Felder, die für beide Typen Pflicht sind, fassen Sie in einer Zeile zusammen.

<InputCheck>
   <+InputCheck>
      AddressField   = Salutation,FirstName,LastName,Street1,Zip,City,Country
      AddressType    = bill
      Type           = minlen
      Len            = 1
      ErrorMessageID = emptyerror
   </+InputCheck>

   <+InputCheck>               # nur bei Geschäftsadresse
      AddressField   = Company,TaxID
      AddressType    = bill
      Type           = minlen
      Len            = 1
      ErrorMessageID = emptyerror
      <+Condition>
         Field = Suffix1
         Type  = value
         Value = 02
      </+Condition>
   </+InputCheck>
</InputCheck>

Vergessen Sie die Bedingung, wird ein ausgeblendetes Feld zum Pflichtfeld. Der Käufer bekommt dann eine Fehlermeldung zu einem Feld, das er gar nicht sieht, und kommt nicht weiter.

Referenz: Abschnitt InputCheck · Wegweiser: Prüfungen von Adressdaten festlegen

Schritt 6: Auslösendes Feld benennen

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

<AddressFields-Actions>
   <+FieldAction>
      AddressField = Suffix1
      AddressType  = bill
   </+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 7: Felder ins Template setzen

Die Felder gehören in das Formular auf beiden Templates, die eine Rechnungsadresse entgegennehmen: ws_address_combined.htm im Bestellablauf und ws_address_manage.htm im Kundenkonto. Jedes Feld folgt demselben Aufbau. {A-…[_visible](/v8s/referenz/tags/a-rechnungsadresse)} entscheidet über die Anzeige, {A-…[_action](/v8s/referenz/tags/a-rechnungsadresse)} fügt den AJAX-Aufruf nur dort ein, wo er gebraucht wird, und {A-…[_required](/v8s/referenz/tags/a-rechnungsadresse)} markiert Pflichtfelder.

Die Typauswahl als Auswahlknöpfe

{A-Suffix1_visible}
   <fieldset>
      <legend>~A-Suffix1_text~ {A-Suffix1_required}*{/A-Suffix1_required}</legend>
      {@A-Suffix1_data}
         <label>
            <input type="radio" name="~A-Suffix1_input~" value="~A-Suffix1_code~"
               {A-Suffix1_action}onchange="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_Refresh~','~WS-Charset~')"{/A-Suffix1_action}
               {A-Suffix1_selected}checked{/A-Suffix1_selected}>
            ~A-Suffix1_value~
         </label>
      {/@A-Suffix1_data}
   </fieldset>
   {A-Suffix1_errormessage}<p class="errormessage">~A-Suffix1_errormessage~</p>{/A-Suffix1_errormessage}
{/A-Suffix1_visible}

Die Auswahlknöpfe teilen sich einen Namen, dürfen also keine gemeinsame id bekommen. Umschließen Sie deshalb jeden Knopf mit seinem eigenen label, statt mit for auf eine id zu verweisen. Die Gruppenüberschrift gehört in ein legend innerhalb eines fieldset.

Ein Auswahlfeld

{A-Salutation_visible}
   <label for="~A-Salutation_input~">~A-Salutation_text~ {A-Salutation_required}*{/A-Salutation_required}</label>
   <select name="~A-Salutation_input~" id="~A-Salutation_input~" class="select_salutation~A-Salutation_error~"
      {A-Salutation_action}onchange="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_Refresh~','~WS-Charset~')"{/A-Salutation_action}>
      {@A-Salutation_data}
         <option value="~A-Salutation_code~" ~A-Salutation_selected~>~A-Salutation_value~</option>
      {/@A-Salutation_data}
   </select><br>
   {A-Salutation_errormessage}~A-Salutation_errormessage~{/A-Salutation_errormessage}
{/A-Salutation_visible}

Ein Textfeld

{A-Company_visible}
   <label for="~A-Company_input~">~A-Company_text~ {A-Company_required}*{/A-Company_required}</label>
   <input type="text" name="~A-Company_input~" id="~A-Company_input~"
      maxlength="~A-Company_max~" value="~A-Company~" class="input~A-Company_error~"
      {A-Company_action}onblur="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_Refresh~','~WS-Charset~')"{/A-Company_action}><br>
   {A-Company_errormessage}~A-Company_errormessage~{/A-Company_errormessage}
{/A-Company_visible}

Die übrigen Felder des Beispiels bauen Sie nach einem dieser Muster: FirstName, LastName, Street1, Zip, City und TaxID wie das Textfeld, Country wie das Auswahlfeld. Bei Auswahlfeldern löst onchange aus, bei Textfeldern onblur. Ein onchange am Textfeld griffe erst beim Verlassen, ein onkeyup löste bei jedem Tastendruck eine AJAX-Anfrage aus.

Die Tag-Endungen im Überblick

Endung	Liefert
`_visible`	Klammerung: Feld wird angezeigt
`_text`	Beschriftung
`_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 8: Die technische Einbettung

Die restlichen Schritte sind mit denen der Packstation-Auswahl identisch. Sie richten sie einmal ein und nutzen sie für beide Adressarten.

Was	Kurzfassung
nachzuladender Bereich	den Container mit `{ST-AJAX}<WS-Ajax-content>{/ST-AJAX}` klammern
Formular-ID	`id="addressform"` vergeben, dieselbe ID steht im JavaScript-Aufruf
JavaScript-Bibliothek	`ws-system-1.8.3.js` im Kopfbereich einbinden
Rückruffunktionen	die vier `ws_AJAXRefreshAddressInput…`-Funktionen in der Designkomponente füllen
Postleitzahl-Assistent	seine Einrichtung in eine eigene Funktion auslagern und innerhalb der AJAX-Klammerung aufrufen

<form action="~FORM-AddrManage~" method="post" autocomplete="off" id="addressform">
   ...
</form>

Auf der Adressseite im Bestellablauf tritt an die Stelle des Formular-Tags ~FORM-Addr~. Die ausführliche Beschreibung dieser Schritte samt Codebeispielen finden Sie auf der Schwesterseite. Wegweiser: Auswahl zwischen postalischer Lieferadresse und Packstation

​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: Auslösendes Feld benennen

​Schritt 7: Felder ins Template setzen

​Die Typauswahl als Auswahlknöpfe

​Ein Auswahlfeld

​Ein Textfeld

​Die Tag-Endungen im Überblick

​Schritt 8: Die technische Einbettung

​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: Auslösendes Feld benennen

Schritt 7: Felder ins Template setzen

Die Typauswahl als Auswahlknöpfe

Ein Auswahlfeld

Ein Textfeld

Die Tag-Endungen im Überblick

Schritt 8: Die technische Einbettung

Verwandte Themen