<< Click here to display Table of Contents >> Navigation: Wegweiser > Bestellprozess > Adressdaten:

Auswahl zwischen postalischer Lieferadresse und Packstation

Sie haben die Möglichkeit, bei der Eingabe einer abweichenden Lieferadresse zwischen verschiedenen Adresstypen zu unterscheiden, z. B. zwischen postalischer Lieferadresse und Packstation. Diese Auswahl kann auf weitere Adresstypen erweitert werden. In diesem Beispiel werden nach Abfrage des Adresstyps die jeweils notwendigen und entsprechend bezeichneten Adresseingabefelder angezeigt.

Integration der Abfrage einer abweichenden Lieferadresse (postalisch oder DHL Packstation)

Diese Funktionalität ist ein Beispiel für die "eingabeabhängige Adressdatensteuerung".

Schritt 1: Anlegen/Aktivieren der Eingabefelder

Legen Sie im Abschnitt <DeliveryAddressFields-Txt> der Shopkonfiguration shop.config alle Adresseingabefelder fest, die für die Eingabe einer postalischen Lieferadresse oder Packstation erforderlich sind.

<DeliveryAddressFields-Txt>
   Suffix1     = Wählen Sie Ihren Lieferadress-Typ
   Salutation  = Anrede
   FirstName   = Vorname
   LastName    = Name
   Country     = Land
   Street1     = Straße, Hsnr.     # Wird auch für die Abfrage der Packstation Nr. verwendet
   Zip         = Postleitzahl
   City        = Ort
   Suffix2     = Postnummer
</DeliveryAddressFields-Txt>

Hinweis:

Manche Warenwirtschaftssysteme unterstützen nur eine bestimmte Anzahl an Adressdatenfeldern für die Übergabe einer abweichenden Lieferadresse. Dadurch kann es passieren, dass Informationen wie "Straße, Hsnr." oder "Packstation Nr." in das gleiche technische Produktdatenfeld, z. B. Street1, übergeben werden müssen. Diese Besonderheit ist in unserem Beispiel berücksichtigt.

Sprechen Sie daher bitte mit Ihrer Warenwirtschaft ab, in welche Adressdatenfelder die Daten übergeben werden sollen.

Referenz: Abschnitt DeliveryAddressFields-Txt

Schritt 2: Definition der Auswahlmöglichkeiten

Im technischen Adressdatenfeld Suffix1 soll die Abfrage des Adresstyps stattfinden. Für dieses Feld müssen die Auswahlmöglichkeiten in der Shopkonfiguration shop.config definiert werden.

Fügen Sie den Abschnitt <D-Suffix1> unterhalb des Abschnittes <DeliveryAddressFields-Txt> ein. Die Auswahlmöglichkeiten werden mit <+Entry>-Abschnitten definiert und sind 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: Definition des Standard-Lieferadresstyps

Legen Sie fest, welcher Lieferadresstyp Standard sein soll. Dieser Adresstyp ist standardmäßig vorausgewählt und die dazugehörigen Adresseingabefelder werden angezeigt, wenn der Shopkunde eine neue Lieferadresse eingeben möchte.

Fügen Sie hierzu den Abschnitt <DeliveryAddressFields-Standards> in Ihre Shopkonfiguration shop.config ein. Der Standard-Adresstyp wird durch den Parameter Suffix1 und den Wert des gewünschten Adresstyps definiert, wie im oben gezeigten Abschnitt bei Value angegeben.

In unserem Beispiel soll die postalische Lieferadresse als Standard definiert werden.

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

Referenz: Abschnitt DeliveryAddressFields-Standards

Schritt 4: Definition der Anzeige der Eingabefelder

Nach dem Anlegen der Adresseingabefelder in der Shopkonfiguration shop.config muss festgelegt werden, welche Adresseingabefelder bei welchem Adresstyp angezeigt werden sollen.

Für unser Beispiel ergibt sich die folgende Definition:

Feld	Postalische Lieferadresse	DHL Packstation
Anrede	x	x
Vorname	x	x
Name	x	x
Straße, Hausnummer / Packstation	x	x
Postleitzahl	x	x
Ort	x	x
Land	x	-
Postnummer	-	x

Für die Adresseingabefelder, die bei beiden Adresstypen angezeigt werden, müssen keine speziellen Definitionen vorgenommen werden.

Für die Adresseingabefelder "Land" und "Postnummer" müssen folgende Regeln erstellt werden:

Das Adresseingabefeld "Land" soll nur angezeigt werden, wenn als Adresstyp "postalische Lieferadresse" gewählt wurde.

Das Adresseingabefeld "Postnummer" soll nur angezeigt werden, wenn als Adresstyp "DHL Packstation" gewählt wurde.

Diese Festlegung wird im Abschnitt <AddressFields-InputVisibility> in der Shopkonfiguration shop.config vorgenommen.

<AddressFields-InputVisibility>

   <+FieldVisibility>   # Definition für das Eingabefeld "Land"
      AddressField  = Country
      AddressType   = delivery
      Visible       = yes
      ResetIfHidden = yes

      <+Condition>
         Field    = Suffix1
         Type     = value
         Value    = 01
      </+Condition>

   </+FieldVisibility>

   <+FieldVisibility>    # Definition für das Eingabefeld "Postnummer"
      AddressField  = Suffix2
      AddressType   = delivery
      Visible       = yes
      ResetIfHidden = yes

      <+Condition>
         Field    = Suffix1
         Type     = value
         Value    = 02
      </+Condition>

   </+FieldVisibility>

</AddressFields-InputVisibility>

Referenz: Abschnitt AddressFields-InputVisibility

Schritt 5: Definition der Pflichtfelder

Ob ein Adresseingabefeld ein Pflichtfeld ist, also zwingend vom Kunden ausgefüllt werden muss, wird im Abschnitt <InputCheck> in der Shopkonfiguration shop.config definiert.

In unserem Beispiel sind alle Eingabefelder Pflichtfelder. Für die Adresseingabefelder, die bei beiden Adresstypen verwendet werden, erstellen Sie die Pflichtfeld-Definition wie folgt:

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

Die beiden Eingabefelder "Land" und "Postnummer" sollen nur dann als Pflichtfelder definiert werden, wenn der Shopkunde den entsprechenden Adresstyp ausgewählt hat.

"Land" soll Pflichtfeld sein, wenn der Adresstyp "Postalische Lieferadresse" gewählt wurde.

"Postnummer" soll Pflichtfeld sein, wenn der Adresstyp "DHL Packstation" gewählt wurde.

<InputCheck>
   ...
   <+InputCheck>   # Definition für das Adresseingabefeld "Land"
      AddressField   = Country
      AddressType    = delivery
      Type           = minlen
      Len            = 1
      ErrorMessageID = emptyerror
      <+Condition>
         Field    = Suffix1
         Type     = value
         Value    = 01
      </+Condition>
   </+InputCheck>

   <+InputCheck>   # Definition für das Adresseingabefeld "Postnummer"
      AddressField   = Suffix2
      AddressType    = delivery
      Type           = minlen
      Len            = 1
      ErrorMessageID = emptyerror
      <+Condition>
         Field    = Suffix1
         Type     = value
         Value    = 02
      </+Condition>
   </+InputCheck>
   ...
</InputCheck>

Referenz: Abschnitt InputCheck

Referenz: Prüfungen von Adressdaten festlegen

Schritt 6: Umbenennung der Felder definieren

Um für den Kunden die Eingabe seiner Lieferadresse so komfortabel wie möglich zu gestalten, kann die Bezeichnung der Adresseingabefelder je nach Adresstyp automatisch angepasst werden.

In unserem Beispiel wird das technische Adressdatenfeld Street1 sowohl für die Abfrage der "Straße, Hsnr." als auch für die "Packstation Nr." verwendet.

Die Bezeichnung der Eingabefelder der Standard-Adresstyps (hier "postalische Lieferadresse") ist bereits im Abschnitt <DeliveryAddressFields-Txt> definiert.

Die Bezeichnung soll sich in unserem Beispiel ändern, wenn der Adresstyp "DHL Packstation" gewählt wurde.

Dies wird im Abschnitt <AddressFields-AlternativeText> festgelegt:

<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: Festlegen der Felder, die eine Aktion auslösen

Bei Auswahl eines Adresstyps sollen die jeweiligen, oben festgelegten Eingabefelder angezeigt werden. Hierfür wird der Abschnitt <AddressFields-Actions> benötigt.

In diesem Abschnitt wird festgelegt, welche Felder eine Aktion auslösen sollen: in diesem Fall also das Ein- und Ausblenden sowie Umbenennen von Adresseingabefeldern nach Auswahl des Adresstyps.

<AddressFields-Actions>
   <+FieldAction>
      AddressField   = Suffix1
      AddressType    = delivery
   </+FieldAction>
</AddressFields-Actions>

Referenz: Abschnitt AddressFields-Actions

Schritt 8: Integration der Eingabefelder im Template

Eine abweichende Lieferadresse kann im Bestellablauf auf der Rechnungs- und Lieferadresseingabeseite (ws_address_combined.htm) und bei der Verwaltung der Lieferadressen im Kundenkonto (ws_deliv_address_manage.htm) eingegeben werden.

Fügen Sie hierzu die folgenden Adresseingabefelder innerhalb der <form> auf beiden Templates ein:

...
<h1>Wohin sollen wir Ihre Bestellung liefern</h1>

<!-- Auswahl der Adressart als RadioButtons -->
{D-Suffix1_visible}
<label for="~D-Suffix1_input~">~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}


<!-- Auswahl der Anrede -->
{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}


<!-- Adresseingabfeld Vorname -->
{D-FirstName_visible}
<label for="~D-FirstName_input~">~D-FirstName_text~ {D-FirstName_required}*{/D-FirstName_required} </label>
<input type="text" name="~D-FirstName_input~" maxlength="~D-FirstName_max~" value="~D-FirstName~" class="input~D-FirstName_error~" {D-FirstName_action}onBlur="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_refresh~','~WS-Charset~')"{/D-FirstName_action}><br>
{D-FirstName_errormessage}~D-FirstName_errormessage~{/D-FirstName_errormessage}
{/D-FirstName_visible}


<!-- Adresseingabfeld Name -->
{D-LastName_visible}
<label for="~D-LastName_input~">~D-LastName_text~ {D-LastName_required}*{/D-LastName_required} </label>
<input type="text" name="~D-LastName_input~" maxlength="~D-LastName_max~" value="~D-LastName~" class="input~D-LastName_error~" {D-LastName_action}onBlur="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_refresh~','~WS-Charset~')"{/D-LastName_action}><br>
{D-LastName_errormessage}~D-LastName_errormessage~{/D-LastName_errormessage}
{/D-LastName_visible}


<!-- Auswahl des Landes -->
{D-Country_visible}
<label for="~D-Country_input~">~D-Country_text~ {D-Country_required}*{/D-Country_required}</label>
<select name="~D-Country_input~" id="~D-Country_input~" class="select_Country~D-Country_error~" {D-Country_action}onChange="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_refresh~','~WS-Charset~')"{/D-Country_action}>
{@D-Country_data}
    <option value="~D-Country_code~" ~D-Country_selected~>~D-Country_value~</option>
{/@D-Country_data}
</select><br>
{D-Country_errormessage}~D-Country_errormessage~{/D-Country_errormessage}
{/D-Country_visible}


<!-- Eingabefeld der Postnummer -->
{D-Suffix2_visible}
<label for="~D-Suffix2_input~">~D-Suffix2_text~ {D-Suffix2_required}*{/D-Suffix2_required} </label>
<input type="text" name="~D-Suffix2_input~" maxlength="~D-Suffix2_max~" value="~D-Suffix2~" class="input~D-Suffix2_error~" {D-Suffix2_action}onBlur="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_refresh~','~WS-Charset~')"{/D-Suffix2_action}><br>
{D-Suffix2_errormessage}~D-Suffix2_errormessage~{/D-Suffix2_errormessage}
{/D-Suffix2_visible}


<!-- Eingabefeld der Straße/Hsnr. bzw. Packstation Nr. -->
{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~" 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}

<!-- Eingabefeld der Postleitzahl -->
{D-Zip_visible}
<label for="~D-Zip_input~">~D-Zip_text~ {D-Zip_required}*{/D-Zip_required} </label>
<input type="text" name="~D-Zip_input~" maxlength="~D-Zip_max~" value="~D-Zip~" class="input~D-Zip_error~" {D-Zip_action}onBlur="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_refresh~','~WS-Charset~')"{/D-Zip_action}>
{D-Zip_errormessage}~D-Zip_errormessage~{/D-Zip_errormessage}
{/D-Zip_visible}

<!-- Eingabefeld des Ortes -->
{D-City_visible}
<label for="~D-City_input~">~D-City_text~ {D-City_required}*{/D-City_required} </label>
<input type="text" name="~D-City_input~" maxlength="~D-City_max~" value="~D-City~" class="input~D-City_error~" {D-City_action}onBlur="ws_AJAXRefreshAddressInput('addressform','~BT-Addr_refresh~','~WS-Charset~')"{/D-City_action}>
{D-City_errormessage}~D-City_errormessage~{/D-City_errormessage}
{/D-City_visible}
...

Referenz: D-"technischer Name"_text

Referenz: D-"technischer Name"_required

Referenz: D-"technischer Name"_input

Referenz: D-"technischer Name"_data

Referenz: D-"technischer Name"_code

Referenz: D-"technischer Name"_action

Referenz: D-"technischer Name"_selected

Referenz: D-"technischer Name"_value

Referenz: D-"technischer Name"_max

Referenz: D-"technischer Name"_visible

Referenz: D-"technischer Name"_error

Referenz: D-"technischer Name"_errormessage

Schritt 9: Nachladen der Seite/Aktion auf dem Template ausführen

Das Ein-/Ausblenden und Umbenennen der Adresseingabefelder erfolgt über AJAX. Hierzu muss der Bereich definiert werden, der nachgeladen werden soll, um die Ansicht der ein-/ausgeblendeten und umbenannten Adresseingabefelder anzuzeigen.

Beispiel:
Unser div-Container mit der ID content soll nachgeladen werden. Aus diesem Grund setzen wir die AJAX-Klammerung mit dem Namen unserer ID: <WS-Ajax-content>.

Referenz: ST-Ajax

Referenz: WS-Ajax-"ID"

Wegweiser: AJAX-Funktionen

Schritt 10: Zuweisen einer ID für die <form>

Vergeben Sie der jeweiligen <form> auf Ihren Templates der Rechnungs- und Lieferadresseingabeseite (ws_address_combined.htm) und der Verwaltung der Lieferadressen im Kundenkonto (ws_deliv_address_manage.htm) eine ID.

Referenz: FORM-Addr

Referenz: FORM-DelivAddrManage

Schritt 11: Integrieren der aktuellen JavaScript-Bibliothek

Überprüfen Sie, ob die folgende Version der WEBSALE JavaScript-Bibliothek bereits im <head>-Bereich Ihrer Seite eingebunden ist. Sollte dies nicht der Fall sein, fügen Sie diese bitte hinzu:

Materialien: WEBSALE JavaScript-Bibliothek

Schritt 12: Integrieren der JavaScript-Funktionen

Fügen Sie die folgenden JavaScript-Funktionen in Ihre Designkomponente (ws-design) ein. Hier können Sie dann wie gewohnt Ladecontainer, Fehlerhinweis-Layer etc. definieren.

//////////////////////////////////////////////////////////////////////////////////////////
//    Modul: "Eingabeabhängige Adressdatensteuerung"                               //
//////////////////////////////////////////////////////////////////////////////////////////

//Diese Funktion wird aufgerufen bevor die AJAX-Anfrage zum Nachladen der Eingabefelder abgesetzt wird.
//Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar

function ws_AJAXRefreshAddressInputStart()
{

}
 
//Diese Funktion wird aufgerufen wenn das Nachladen der Eingabefelder erfolgreich war
function ws_AJAXRefreshAddressInputResponseSuccess()
{

}
 
//Diese Funktion wird aufgerufen wenn das Nachladen der Eingabefehler nicht erfolgreich war
function ws_AJAXRefreshAddressInputResponseError()
{

}
 
//Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
//Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
function ws_AJAXRefreshAddressInputError()
{

}

Schritt 13: WEBSALE Postleitzahl-Assistent

Nutzen Sie den WEBSALE Postleitzahl-Assistenten, müssen Sie sicherstellen, dass das verantwortliche JavaScript auch nach dem Nachladen per Ajax funktioniert. Dazu müssen Sie realisieren, dass das JavaScript nach einem Ajax-Reload wieder geladen wird.

Wir empfehlen, den $(document).ready()-Funktionsaufruf durch eine eigene Funktion, z. B. function ifajaxreload_zip_help() zu ersetzen:

	<script language="JavaScript" type="text/javascript">
  function ifajaxreload_zip_help(){
      // PLZ-Assistent für Rechnungsadresse
      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);
      // PLZ Assistent für Lieferadresse
      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);
  };
  </script>

Fügen Sie dann innerhalb Ihres Content-Bereiches zwischen den Ajax-Klammerungen <WS-Ajax-Ihre ID> und </WS-Ajax-Ihre ID> das JavaScript mit Ihrem Funktionsaufruf ein. Dadurch realisieren Sie, dass das JavaScript wieder erneut geladen wird.

  <div id="content">
    {ST-Ajax}<WS-Ajax-content>{/ST-Ajax}
      ...
      <script language="JavaScript" type="text/javascript">
      $(document).ready(function(){
         ifajaxreload_zip_help()
      })
      </script>
      ...
    {ST-Ajax}</WS-Ajax-content>{/ST-Ajax}
  </div>

Wegweiser: PLZ-Assistent