> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Ausgabe der Versandarten im Bestellprozess

> Die zwei Wege, Versandarten auf der Zahlungs- und Versandartenseite auszugeben: das Einzel-Tag WS-DeliveryFields und die freie Positionierung mit den DELIV-Data-Tags.

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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](https://dokumentation.websale.de/v8s/referenz/tags/ws/zahlung-versand-und-bestellabschluss.md#die-tags-im-uberblick) · [FORM-PayDeliv](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#bestellablauf) · [MSG-PayDeliv\_Notify](https://dokumentation.websale.de/v8s/referenz/tags/msg-meldungen.md#bestellprozess) · [ST-Change](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md#die-tags-im-uberblick) · [BT-PayDeliv\_Change](https://dokumentation.websale.de/v8s/referenz/tags/bt/bestellprozess.md#die-tags-im-uberblick) · [BT-PayDeliv\_Back](https://dokumentation.websale.de/v8s/referenz/tags/bt/bestellprozess.md#die-tags-im-uberblick) · [BT-PayDeliv\_Next](https://dokumentation.websale.de/v8s/referenz/tags/bt/bestellprozess.md#die-tags-im-uberblick)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<p>Gewählte Versandart: ~WS-Delivery~</p>
```

Referenz: [WS-Delivery](https://dokumentation.websale.de/v8s/referenz/tags/ws/zahlung-versand-und-bestellabschluss.md#die-tags-im-uberblick)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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>
```

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick) · [DELIV-Data\_html\_class\_active](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick)

### Versandkosten ausgeben

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick) · [DELIV-Data\_NetCost](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick) · [DELIV-Data\_GrossCost](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick)

### Versandkosten in der alternativen Währung

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/preise/waehrungen.md#alternative-wahrung) · Referenz: [DELIV-Data\_AltCurrencyCost](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick) · Referenz: [DELIV-Data\_AltCurrencyNetCost](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick) · Referenz: [DELIV-Data\_AltCurrencyGrossCost](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick)

### Versandkostenrabatt des Kunden ausgeben

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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 |

> [!WARNING]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick) · [DELIV-Data\_disabledmessage](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick) · [DELIV-Data\_disabledcode](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<+Deliverer>
   +AdditionalInfo-lieferzeit = Lieferzeit 5 Werktage
</+Deliverer>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<+Deliverer>
   Type = spedition01
</+Deliverer>
```

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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](https://dokumentation.websale.de/v8s/referenz/tags/deliv.md#die-tags-im-uberblick)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

## Verwandte Themen

* Wegweiser: [Versandarten anlegen, für die Konfiguration dahinter](https://dokumentation.websale.de/v8s/versandarten-anlegen/versandarten-anlegen.md)
* Wegweiser: [Erweiterte Einstellungen beim Anlegen von Versandarten](https://dokumentation.websale.de/v8s/versandarten-anlegen/erweiterte-einstellungen.md)
* Wegweiser: [Globale Anzeige der Versandarten](https://dokumentation.websale.de/v8s/materialien/materialien-globale-zahlungs-und-versandarten.md), für die statische Übersichtsseite


## Related topics

- [Versandarten anlegen](https://dokumentation.websale.de/v8s/versandarten-anlegen/versandarten-anlegen.md)
- [Erweiterte Einstellungen beim Anlegen von Versandarten](https://dokumentation.websale.de/v8s/versandarten-anlegen/erweiterte-einstellungen.md)
- [Versandoptionen und Services für Käufer](https://dokumentation.websale.de/v8s/versandarten-anlegen/versandoptionen-und-services.md)
- [Spezielle Versandarten](https://dokumentation.websale.de/v8s/versandarten-anlegen/spezielle-versandarten.md)
- [Eigene Zahlungsarten definieren](https://dokumentation.websale.de/v8s/zahlungsarten-anlegen/eigene-zahlungsarten-definieren.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.