Das Einzel-Tag WS-DeliveryFields zeigt automatisch alle Versandarten an, die Sie in der Shopkonfiguration shop.config aktiviert und konfiguriert haben. Es erzeugt eine Struktur von div-Containern für die Anzeige aller Versanddaten auf der Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm) im Bestellprozess.

Mehr Informationen zur Anpassung der CSS-IDs und Klassen siehe weiter unten: Aufbau der div-Struktur
Die Reihenfolge der <+Deliverer>-Abschnitte in der Shopkonfiguration bestimmt die Reihenfolge der Versandarten im Shop.

Für jede einzelne Versandart werden folgende Elemente angezeigt:
- der zur Auswahl notwendige Radiobutton,
- der Namen der Versandart (Parameter Name-Txt),
- Informationen zum Liefergebiet (Parameter Country-Txt),
- eine optionale zusätzliche Beschreibung (Parameter Suffix-Txt oder Descr-Txt)  
- und das Logo oder Symbol des Versenders (Parameter Img).

Wegweiser: Versandarten anlegen
Referenz: Abschnitt +Deliverer

Platzieren Sie dazu das Tag einmal auf Ihrem Template innerhalb der <form action="~Form-PayDeliv~">.

<form action="~FORM-PayDeliv~">
   ...
   Bitte wählen Sie eine Versandart:
   ~WS-DeliveryFields~
   ...
</form>

Verwendbar als …

Einzel-Tag

+

Bereichs-Tag

–

negatives Bereichs-Tag

–

Schleifen-Tag

–

Zulässig in Templates …

Zahlungs- und Versandarten-Seite (ws_pay_deliv.htm)

 

Aufbau der div-Struktur

Für jede verfügbare Versandart gibt die Shop-Software folgendes Konstrukt von div-Containern aus:

Hauptcontainer der Versandart, z. B. DHL

 

Logocontainer
Beinhaltet das zugehörige DHL-Logo als Grafik, wenn entsprechendes vorhanden (<img...> Element), ansonsten &nbsp;

 

Radiobutton-Container
Enthält den Radiobutton zur Auswahl dieser Versandart (<input type="radio" ...> Element)

 

Textcontainer
Beinhaltet den Namen der Versandart (<p...> Element)

Suffixcontainer
Beinhaltet die zusätzliche Beschreibung (Text)
(Dieser Container ist optional und wird nur erzeugt, wenn zu der betreffenden Versandart eine zusätzliche Beschreibung angegeben ist.)

 

Clearcontainer
Dieser Container hat keinen Inhalt und wird nur für das Design benötigt.

 

Der mit dem Einzel-Tag ~WS-DeliveryFields~ erzeugte HTML-Code kann selbst nicht angepasst werden.

Styles und JavaScripts

Jeder Container erhält bis zu 3 CSS-Klassen und eine optionale ID. Diese IDs und Klassen können in die CSS-Datei übernommen und entsprechend angepasst werden. Damit ist sowohl ein individuelles Design als auch der Zugriff per JavaScript möglich:

Klassennamen für jeden div-Container:

•ws_deliverydiv_<Art des Containers>
Diese Klasse ist für alle Versandarten gleich. Über diese Klasse kann die Darstellung der Containerart für alle Versandarten festgelegt werden.

•ws_deliverydiv_<Art des Containers>_<Nummer der verfügbaren Versandart>
Diese Klassen werden nummeriert, um anhand der Position der Versandart eine individuelle Darstellung realisieren zu können. Sie können zum Beispiel einen Farbwechsel erzeugen, indem Sie den Klassen mit den Nummern 1,3,5,7,... eine andere Hintergrundfarbe zuweisen als den Klassen mit den Nummern 2,4,6,8,....

•ws_deliverydiv_<Art des Containers>_active
Diese Klasse wird nur dann bei der Versandart gesetzt, wenn der Käufer diese Versandart ausgewählt hat. Mit dieser Klasse können Sie die gewählte Versandart visuell hervorheben.

Optionale IDs für jeden div-Container:

Wenn Sie für ihre Versandarten jeweils eine ID konfiguriert haben (Parameter ID im Abschnitt <+Deliverer> der Shopkonfiguration shop.config), wird bei jedem div-Container folgende ID erzeugt:

ws_deliverydiv_<Art des Containers>_id_<konfigurierte ID der Versandart>

Durch diese ID können Sie jeden einzelnen div-Container per CSS-Styles individuell gestalten oder per JavaScript darauf zugreifen.

Containerarten, Klassennamen und IDs

Folgende Containerarten/HTML-Elemente mit zugehörigen Klassen und IDs werden erzeugt:

Containerart/
HTML-Element

Beschreibung

Klassen

ID

main

Hauptcontainer

ws_deliverydiv_main

ws_deliverydiv_main_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_main_active

ws_deliverydiv_main_id_
<konfigurierte ID der Versandart>

logo

Logocontainer

ws_deliverydiv_logo

ws_deliverydiv_logo_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_logo_active

ws_deliverydiv_logo_id_
<konfigurierte ID der Versandart>

radio

Radiobutton-Container

ws_deliverydiv_radio

ws_deliverydiv_radio_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_radio_active

ws_deliverydiv_radio_id_
<konfigurierte ID der Versandart>

text

Textcontainer

ws_deliverydiv_text

ws_deliverydiv_text_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_text_active

ws_deliverydiv_text_id_
<konfigurierte ID der Versandart>

suffix

Suffixcontainer

ws_deliverydiv_suffix

ws_deliverydiv_suffix_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_suffix_active

ws_deliverydiv_suffix_id_
<konfigurierte ID der Versandart>

clear

Clearcontainer

ws_deliverydiv_clear

ws_deliverydiv_clear_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_clear_active

ws_deliverydiv_clear_id_
<konfigurierte ID der Versandart>

name

p-Element im Textcontainer mit dem Namen der Versandart

ws_deliverydiv_name

ws_deliverydiv_name_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_name_active

ws_deliverydiv_name_id_
<konfigurierte ID der Versandart>

inputelement

Radiobutton im Radiobutton-Container,

<input type="radio"...>

ws_deliverydiv_inputelement

ws_deliverydiv_inputelement_
<Nummer der verfügbaren Versandart>

ws_deliverydiv_inputelement_active

ws_deliverydiv_inputelement_id_
<konfigurierte ID der Versandart>

Individuelle JavaScripts angeben

Sie haben die Möglichkeit, auf bestimmte HTML-Elemente individuelle JavaScripts zu legen:

Element

Event

Beschreibung

<img ...> Element im Logocontainer

onClick

Sie können bei einem Klick auf das Logo der Versandart ein JavaScript ausführen lassen (ein angegebener Link bei der Versandart sowie die ID der Versandart kann der Funktion übergeben werden) .

Konfigurieren Sie dafür die Versandart im Abschnitt <+Deliverer> in der Shopkonfiguration shop.config):

Beispiel 1 - Auswahl der Versandart (Standard):

ImgOnCLick = selectDelivererImage('~ID~');

Beispiel 2 - Öffnet ein neues Popup-Fenster mit der URL, die im Parameter Link eingetragen ist:

ImgOnCLick = window.open('~Link~', '_blank', 'top=400,left=400,width=600,height=200');

<input type="radio"...> Element im Radiobutton-Container

onClick

Sie können ein JavaScript ausführen lassen wenn der Käufer die Versandart auswählt (die ID der Versandart sowie die ID des Radiobuttons kann der Funktion übergeben werden).

Dieses können Sie bei der Versandart konfigurieren (Parameter RadioOnCLick, Abschnitt <+Deliverer> in der Shopkonfiguration shop.config).

Anwendungsbeispiel:
Sie können die Hervorhebung der aktivierten Versandart per JavaScript anpassen und zum Beispiel die Klassen ..._active für alle entsprechenden Container entfernen und dem Container mit der entsprechenden ID die Klasse ..._active wieder hinzufügen.

Referenz: Abschnitt +Deliverer

Beispiel

Folgendes Beispiel zeigt den HTML-Quellcode und die div-Struktur für genau eine Versandart mit der ID "XYZ". Dieser Code wird automatisch von WEBSALE V8s allein durch das eine WS-DeliveryFields-Tag für jede verfügbare Versandart erzeugt.

<div id="ws_deliverydiv_main_id_XYZ" class="ws_deliverydiv_main ws_deliverydiv_main_XYZ">
   <div id="ws_deliverydiv_logo_id_XYZ" class="ws_deliverydiv_logo ws_deliverydiv_logo_XYZ">
      <img src="../../navigation/grafiken/logo-XYZ.png" onclick="selectDelivererImage('XYZ');">
   </div>
   <div id="ws_deliverydiv_radio_id_XYZ" class="ws_deliverydiv_radio ws_deliverydiv_radio_XYZ">
      <input 
         id="ws_deliverydiv_inputelement_XYZ" 
         class="ws_deliverydiv_inputelement" 
         type="radio" 
         name="ws_input_delivery" 
         value="XYZ" 
         onclick="selectDeliverer('XYZ');" >
   </div>
   <div id="ws_deliverydiv_text_id_XYZ" class="ws_deliverydiv_text ws_deliverydiv_text_XYZ">
      <p id="ws_deliverydiv_name_id_XYZ" class="ws_deliverydiv_name ws_deliverydiv_name_XYZ">
         Name-Txt Country-Txt
      </p>
      <div id="ws_deliverydiv_suffix_id_XYZ" class="ws_deliverydiv_suffix ws_deliverydiv_suffix_XYZ">
         Suffix-Txt
      </div>
   </div>
   <div id="ws_deliverydiv_clear_id_XYZ" class="ws_deliverydiv_clear ws_deliverydiv_clear_XYZ">
   </div>
</div>

Anzeige der gewählten Versandart

Die gewählte Versandart können Sie auf der Bestellübersichtsseite, Bestelleingangsbestätigungsseite und Bestelleingangsbestätigungs-E-Mail anzeigen lassen.
Platzieren Sie dazu das Tag WS-Delivery auf Ihrem Template:

...
   Sie haben folgende Versandart gewählt:
   ~WS-Delivery~
...

Referenz: WS-Delivery