Ausgabe der Versandarten im Bestellprozess

Für die Ausgabe der Versandarten auf der Zahlungs- und Versandartenseite gibt es zwei Wege, und Sie entscheiden sich für einen davon.

Weg	Wann er passt
Einzel-Tag `~WS-DeliveryFields~`	Sie brauchen die Auswahl schnell und kommen mit der vorgegebenen Struktur aus
`DELIV-Data`-Tags	Sie wollen jedes Element selbst setzen, eigene Klassen vergeben oder Inhalte anders anordnen

Der erste Weg erzeugt eine fertige Struktur aus div-Containern, die Sie über CSS gestalten. Der zweite erzeugt gar nichts von selbst, Sie bauen das Markup vollständig selbst und setzen die Tags dort ein, wo Sie die Werte brauchen. Beide Wege greifen auf dieselbe Konfiguration zu. Sie können jederzeit wechseln, ohne die <+Deliverer>-Abschnitte anzufassen. Für den Wechsel von der ersten auf die zweite Variante gibt es ein Beispiel, das dieselben Klassennamen erzeugt, siehe unten.

Weg 1: Das Einzel-Tag

Setzen Sie ~WS-DeliveryFields~ einmal auf ws_pay_deliv.htm, innerhalb des Formulars.

<form action="~FORM-PayDeliv~" method="post" name="PaymentDelivery" id="PaymentDelivery">
   {MSG-PayDeliv_Notify}~MSG-PayDeliv_Notify~{/MSG-PayDeliv_Notify}

   <p>Bitte wählen Sie eine Versandart:</p>
   ~WS-DeliveryFields~

   {ST-Change}
      <input name="~BT-PayDeliv_Change~" type="submit" value="Änderung übernehmen">
   {/ST-Change}

   {!ST-Change}
      <input name="~BT-PayDeliv_Back~" type="submit" value="zurück">
      <input name="~BT-PayDeliv_Next~" type="submit" value="weiter">
   {/!ST-Change}
</form>

Das Tag gibt alle Versandarten aus, die für diesen Warenkorb, dieses Lieferland und die gewählte Zahlungsart verfügbar sind. Die erzeugte div-Struktur und ihre Klassennamen sind in der Referenz beschrieben. Referenz: WS-DeliveryFields · FORM-PayDeliv · MSG-PayDeliv_Notify · ST-Change · BT-PayDeliv_Change · BT-PayDeliv_Back · BT-PayDeliv_Next

Die gewählte Versandart anzeigen

Nach der Auswahl geben Sie die Versandart auf der Bestellübersicht, der Bestelleingangsbestätigung und in der Bestätigungsmail mit einem einzelnen Tag aus.

<p>Gewählte Versandart: ~WS-Delivery~</p>

Referenz: WS-Delivery

Weg 2: Freie Positionierung mit DELIV-Data

Die DELIV-Data-Tags erzeugen kein vorgegebenes Markup. Sie schreiben das HTML selbst und holen sich die Werte über Tags. Verwendbar sind die Tags auf allen Templates. Der Aufbau ist immer derselbe: eine äußere Klammerung {DELIV-Data}, darin die Schleife {@DELIV-Data} über die Versandarten.

<form action="~FORM-PayDeliv~" method="post" name="PaymentDelivery" id="PaymentDelivery">
<input type="hidden" name="js_paydeliv" id="js_paydeliv" value="">

<h2>Zahlungsarten</h2>
{PAY-Data}
   {@PAY-Data}
      ...
   {/@PAY-Data}
{/PAY-Data}

<h2>Versandarten</h2>
{DELIV-Data}
   {@DELIV-Data}
      <input id="~DELIV-Data_Selection_html_id~"
             class="~DELIV-Data_Selection_html_class_global~ ~DELIV-Data_Selection_html_class_active~"
             type="radio"
             name="~DELIV-Data_Selection_radioname~"
             value="~DELIV-Data_Selection_radiovalue~"
             ~DELIV-Data_Selection_disabled~
             ~DELIV-Data_Selection_checked~
             onclick="~DELIV-Data_Selection_html_js_onclick~">
      ~DELIV-Data_NameSuffix~<br>

      {DELIV-Data_Suffix}
         ~DELIV-Data_Suffix~<br>
      {/DELIV-Data_Suffix}

      {DELIV-Data_Image}
         <img src="~DELIV-Data_Image~"
              {DELIV-Data_Image_html_js_onclick}onclick="~DELIV-Data_Image_html_js_onclick~"{/DELIV-Data_Image_html_js_onclick}>
      {/DELIV-Data_Image}
   {/@DELIV-Data}
{/DELIV-Data}

</form>

Das Formular muss die Zahlungsarten und die Versandarten umschließen. Die beiden hängen voneinander ab, und der Shop wertet sie gemeinsam aus.

Das versteckte Feld js_paydeliv sorgt dafür, dass die Seite nach der Auswahl neu aufgebaut wird und der Käufer auf ihr bleibt. Ohne dieses Feld springt er direkt auf die Bestellübersicht weiter und kann die Zahlungsart nicht mehr ändern.

Tag	Liefert
`~DELIV-Data_Name~`	den Namen aus `Name-Txt`
`~DELIV-Data_Country~`	den Text aus `Country-Txt`
`~DELIV-Data_NameSuffix~`	Name, Liefergebiet und Kostenhinweis zusammengesetzt
`~DELIV-Data_Suffix~`	den Text aus `Suffix-Txt`
`~DELIV-Data_Image~`	den Pfad zum Logo
`~DELIV-Data_Selection_radioname~`	den Feldnamen des Auswahlfelds
`~DELIV-Data_Selection_radiovalue~`	den Wert dieser Versandart
`~DELIV-Data_Selection_checked~`	`checked`, wenn diese Versandart gewählt ist
`~DELIV-Data_Selection_disabled~`	`disabled`, wenn sie nicht wählbar ist

Referenz: Alle DELIV-Data-Tags

Die gewählte Versandart hervorheben

Legen Sie einen Container um den Inhalt der Schleife und setzen Sie die Klasse nur für die gewählte Versandart.

{DELIV-Data}
   {@DELIV-Data}
      <div {DELIV-Data_selected}class="~DELIV-Data_html_class_active(main)~"{/DELIV-Data_selected}>
         ...
      </div>
   {/@DELIV-Data}
{/DELIV-Data}

Referenz: DELIV-Data_selected · DELIV-Data_html_class_active

Versandkosten ausgeben

{DELIV-Data_Cost}
   Versandkosten: ~DELIV-Data_Cost~
{/DELIV-Data_Cost}

Tag	Liefert
`~DELIV-Data_Cost~`	die Versandkosten in der Darstellung des Shops
`~DELIV-Data_NetCost~`	dieselben ohne Mehrwertsteuer
`~DELIV-Data_GrossCost~`	dieselben einschließlich Mehrwertsteuer

In einem Bruttopreis-Shop liefern ~DELIV-Data_Cost~ und ~DELIV-Data_GrossCost~ denselben Betrag, in einem Nettopreis-Shop sind es ~DELIV-Data_Cost~ und ~DELIV-Data_NetCost~. Wenn im Text „inklusive Mehrwertsteuer” steht, nehmen Sie deshalb ~DELIV-Data_GrossCost~. Nur dann stimmt die Aussage in beiden Shoparten. Die Klammerung greift nur, wenn tatsächlich Kosten anfallen. Bei versandkostenfreier Lieferung bleibt der Bereich leer, und Sie können über {!DELIV-Data_Cost} einen eigenen Text setzen. Referenz: DELIV-Data_Cost · DELIV-Data_NetCost · DELIV-Data_GrossCost

Versandkosten in der alternativen Währung

{DELIV-Data_AltCurrencyCost}
   (~DELIV-Data_AltCurrencyCost~ ~WS-AltCurrencyISO~)
{/DELIV-Data_AltCurrencyCost}

Auch hier gibt es die Netto- und Bruttovariante als ~DELIV-Data_AltCurrencyNetCost~ und ~DELIV-Data_AltCurrencyGrossCost~. Wegweiser: Alternative Währung · Referenz: DELIV-Data_AltCurrencyCost · Referenz: DELIV-Data_AltCurrencyNetCost · Referenz: DELIV-Data_AltCurrencyGrossCost

Versandkostenrabatt des Kunden ausgeben

{ST-LoggedIn}
   {DELIV-Data_UserDeliveryCostDiscount}
      Ihr Versandkostenrabatt: ~DELIV-Data_UserDeliveryCostDiscount~ ~WS-CurrencySymbol~
   {/DELIV-Data_UserDeliveryCostDiscount}
{/ST-LoggedIn}

Tag	Liefert
`~DELIV-Data_UserDeliveryCostDiscount~`	den Rabattbetrag
`~DELIV-Data_UserDeliveryCostNetDiscount~`	denselben ohne Mehrwertsteuer
`~DELIV-Data_UserDeliveryCostGrossDiscount~`	denselben einschließlich Mehrwertsteuer
`~DELIV-Data_UserDeliveryCostDiscountRate~`	den Rabattsatz in Prozent

Ein Rabatt ist an das Kundenkonto gebunden. Klammern Sie den Bereich deshalb in {ST-LoggedIn}, sonst steht der Text auch bei Gastbestellungen da, wo es nie einen Rabatt geben kann.

Nicht verfügbare Versandarten begründen

Wenn Sie nicht verfügbare Versandarten ausgegraut statt ausgeblendet anzeigen, gehört ein Grund dazu.

{DELIV-Data_disabled}
   ~DELIV-Data_disabledmessage~
{/DELIV-Data_disabled}

Tag	Liefert
`{DELIV-Data_disabled}`	Klammerung, greift wenn die Versandart nicht wählbar ist
`~DELIV-Data_disabledmessage~`	den hinterlegten Hinweistext
`~DELIV-Data_disabledcode~`	die Nummer des Ablehnungsgrundes

Der Hinweistext kommt nicht aus dem <+Deliverer>-Abschnitt, sondern aus einer eigenen Definition, die Sie der Versandart zuweisen. Wie das eingerichtet wird, steht auf der Seite zu den erweiterten Einstellungen. Referenz: DELIV-Data_disabled · DELIV-Data_disabledmessage · DELIV-Data_disabledcode

Zusatzeingaben zur Versandart ausgeben

Manche Versandarten brauchen eine zusätzliche Angabe vom Käufer, etwa eine Telefonnummer für die Spedition. Die Felder werden außerhalb des <+Deliverer>-Abschnitts definiert und der Versandart nur zugewiesen. Im Template laufen Sie über eine zweite Schleife.

{DELIV-Data_AdditionalInput}
   {@DELIV-Data_AdditionalInput}

      {Deliv-Data_Additionalinput_descr}
         ~Deliv-Data_Additionalinput_descr~{DELIV-Data_AdditionalInput_required}*{/DELIV-Data_AdditionalInput_required}
      {/Deliv-Data_Additionalinput_descr}

      {DELIV-Data_AdditionalInput_type_isInput}
         <input type="text"
                name="~DELIV-Data_Additionalinput_input~"
                value="~DELIV-Data_Additionalinput_value~"
                maxlength="~DELIV-Data_AdditionalInput_maxlength~">
      {/DELIV-Data_AdditionalInput_type_isInput}

      {DELIV-Data_AdditionalInput_type_isCheckbox}
         <input type="checkbox"
                name="~DELIV-Data_Additionalinput_input~"
                value="checked"
                ~DELIV-Data_Additionalinput_value~>
      {/DELIV-Data_AdditionalInput_type_isCheckbox}

      {DELIV-Data_AdditionalInput_type_isListbox}
         <select name="~DELIV-Data_Additionalinput_input~" {DELIV-Data_disabled}disabled{/DELIV-Data_disabled}>
            {@DELIV-Data_AdditionalInput_listbox}
               <option value="~DELIV-Data_AdditionalInput_listbox_value~" ~DELIV-Data_AdditionalInput_listbox_selected~>
                  ~DELIV-Data_AdditionalInput_listbox_value_txt~
               </option>
            {/@DELIV-Data_AdditionalInput_listbox}
         </select>
      {/DELIV-Data_AdditionalInput_type_isListbox}

      {DELIV-Data_AdditionalInput_additionalinfotext}
         ~DELIV-Data_AdditionalInput_additionalinfotext~
      {/DELIV-Data_AdditionalInput_additionalinfotext}

      {DELIV-Data_AdditionalInput_errormessage}
         ~DELIV-Data_AdditionalInput_errormessage~
      {/DELIV-Data_AdditionalInput_errormessage}

   {/@DELIV-Data_AdditionalInput}
{/DELIV-Data_AdditionalInput}

Es gibt drei Feldarten, und für jede eine eigene Klammerung: Eingabefeld, Ankreuzfeld und Auswahlliste. Welche davon greift, entscheidet die Definition des Feldes, nicht das Template. Sie bauen deshalb alle drei ein und lassen den Shop wählen. Der Stern für Pflichtfelder gehört nicht an ein Ankreuzfeld, dort steht die Verpflichtung schon im Text. Klammern Sie ihn mit {!DELIV-Data_AdditionalInput_type_isCheckbox} aus. Wegweiser: Erweiterte Einstellungen, für die Definition der Zusatzeingaben

Eigene Zusatztexte je Versandart

Im <+Deliverer>-Abschnitt können Sie beliebig viele eigene Texte hinterlegen und im Template einzeln abrufen. Der Text wird zugleich in die Bestelldaten übernommen.

<+Deliverer>
   +AdditionalInfo-lieferzeit = Lieferzeit 5 Werktage
</+Deliverer>

{DELIV-Data_AdditionalInfo-lieferzeit}
   ~DELIV-Data_AdditionalInfo-lieferzeit~
{/DELIV-Data_AdditionalInfo-lieferzeit}

Der Teil hinter +AdditionalInfo- ist Ihre eigene Kennung und taucht im Tagnamen unverändert wieder auf. Referenz: DELIV-Data_AdditionalInfo-<ID>

Den Typ der Versandart mitgeben

<+Deliverer>
   Type = spedition01
</+Deliverer>

Der Wert ist frei wählbar, wird in die Bestelldaten geschrieben und lässt sich im Template ausgeben.

{DELIV-Data_type}
   Versandart-Typ: ~DELIV-Data_type~
{/DELIV-Data_type}

Type ist für die Warenwirtschaft gedacht, nicht für den Käufer. Es ist der richtige Ort, um mehrere Versandarten zu einer Gruppe zusammenzufassen, die im Shop unterschiedlich heißen, aber gleich behandelt werden sollen. Referenz: DELIV-Data_type

Vom Einzel-Tag auf DELIV-Data umstellen

Wenn Sie einen bestehenden Shop umstellen, wollen Sie in der Regel die vorhandenen CSS-Regeln behalten. Dafür gibt es Tags, die genau die Kennungen und Klassennamen liefern, die das Einzel-Tag erzeugt hätte.

Tag	Liefert
`~DELIV-Data_html_id(bereich)~`	die Kennung des Containers
`~DELIV-Data_html_class_global(bereich)~`	die allgemeine Klasse
`~DELIV-Data_html_class_counter(bereich)~`	die Klasse mit der laufenden Nummer
`~DELIV-Data_html_class_active(bereich)~`	die Klasse für die gewählte Versandart
`~DELIV-Data_html_class_disable(bereich)~`	die Klasse für eine nicht wählbare Versandart

Als Bereich setzen Sie ein, welchen Teil der Struktur Sie gerade bauen, beispielsweise main, logo, radio, text, name, suffix oder clear.

{DELIV-Data}
   {@DELIV-Data}
      <div id="~DELIV-Data_html_id(main)~"
           class="~DELIV-Data_html_class_global(main)~ ~DELIV-Data_html_class_counter(main)~ ~DELIV-Data_html_class_active(main)~ ~DELIV-Data_html_class_disable(main)~">

         <div id="~DELIV-Data_html_id(logo)~"
              class="~DELIV-Data_html_class_global(logo)~ ~DELIV-Data_html_class_active(logo)~">
            {DELIV-Data_Image}
               <img src="~DELIV-Data_Image~">
            {/DELIV-Data_Image}
         </div>

         <div id="~DELIV-Data_html_id(radio)~"
              class="~DELIV-Data_html_class_global(radio)~ ~DELIV-Data_html_class_active(radio)~">
            <input id="~DELIV-Data_Selection_html_id~"
                   type="radio"
                   name="~DELIV-Data_Selection_radioname~"
                   value="~DELIV-Data_Selection_radiovalue~"
                   ~DELIV-Data_Selection_disabled~
                   ~DELIV-Data_Selection_checked~
                   onclick="~DELIV-Data_Selection_html_js_onclick~">
         </div>

         <div id="~DELIV-Data_html_id(text)~"
              class="~DELIV-Data_html_class_global(text)~ ~DELIV-Data_html_class_active(text)~">
            <p id="~DELIV-Data_html_id(name)~" class="~DELIV-Data_html_class_global(name)~">
               ~DELIV-Data_NameSuffix~
            </p>
         </div>

      </div>
   {/@DELIV-Data}
{/DELIV-Data}

Das ist ein gekürztes Gerüst. Die vollständige Struktur mit allen Bereichen und allen Zusatzfeldern ist umfangreich. Nehmen Sie sie aus der Referenz zu WS-DeliveryFields, dort steht, welche Container das Einzel-Tag in welcher Verschachtelung erzeugt. Wenn Sie ohnehin neu gestalten, lassen Sie diese Tags weg und vergeben eigene Klassen. Das Ergebnis ist deutlich kürzer und besser lesbar.

​Weg 1: Das Einzel-Tag

​Die gewählte Versandart anzeigen

​Weg 2: Freie Positionierung mit DELIV-Data

​Die gewählte Versandart hervorheben

​Versandkosten ausgeben

​Versandkosten in der alternativen Währung

​Versandkostenrabatt des Kunden ausgeben

​Nicht verfügbare Versandarten begründen

​Zusatzeingaben zur Versandart ausgeben

​Eigene Zusatztexte je Versandart

​Den Typ der Versandart mitgeben

​Vom Einzel-Tag auf DELIV-Data umstellen

​Verwandte Themen

Weg 1: Das Einzel-Tag

Die gewählte Versandart anzeigen

Weg 2: Freie Positionierung mit DELIV-Data

Die gewählte Versandart hervorheben

Versandkosten ausgeben

Versandkosten in der alternativen Währung

Versandkostenrabatt des Kunden ausgeben

Nicht verfügbare Versandarten begründen

Zusatzeingaben zur Versandart ausgeben

Eigene Zusatztexte je Versandart

Den Typ der Versandart mitgeben

Vom Einzel-Tag auf DELIV-Data umstellen

Verwandte Themen