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

# Bestellhistorie integrieren

> Wie Sie angemeldeten Käufern in WEBSALE V8s ihre früheren Bestellungen anzeigen, wahlweise als frei gestaltbare Liste oder als Auswahlliste.

Ein Käufer, der wissen will, was er vor drei Monaten bestellt hat, sucht diese Information im Kundenkonto. Die Bestellhistorie beantwortet ihm das, ohne dass er bei Ihnen anrufen muss.

Weil dabei kundenspezifische Daten erscheinen, steht die Funktion erst nach der Anmeldung zur Verfügung.

## Wie die Bestelldaten aufgebaut sind

Die Bestellhistorie zeigt keine aktuellen Produktdaten, sondern die eingefrorenen Daten der damaligen Bestellung, in der Sprache und mit den Bezeichnungen von damals. Ändert sich später ein Produktname, bleibt in der Historie der alte stehen. Genau das ist der Sinn der Sache.

Die Daten sind in Sektionen gegliedert, und jede Sektion enthält Parameter. Damit sich die Tags von den Produktdaten-Tags des Shops unterscheiden, tragen alle das Präfix `OH` für Order History, gefolgt von `S` für Sektion oder `P` für Parameter.

| Tag | Aufgabe |
| - | - |
| `{[OH-S-<technische ID>](/v8s/referenz/tags/oh-bestellhistorie)}` | Sektion auswählen. Als Klammerung zeigt es, ob die Sektion vorhanden ist, als Schleife läuft es über alle gleichnamigen Sektionen. |
| [`~OH-P-<technische ID>~`](https://dokumentation.websale.de/v8s/referenz/tags/oh-bestellhistorie) | Wert eines Parameters innerhalb der gewählten Sektion |
| [`~OH-S-RawData~`](https://dokumentation.websale.de/v8s/referenz/tags/oh-bestellhistorie#die-tags-im-uberblick) | Text einer Sektion, die nur Text enthält, beispielsweise `<CustomerComment>` |
| [`~OH-S-LoopCounter~`](https://dokumentation.websale.de/v8s/referenz/tags/oh-bestellhistorie#die-tags-im-uberblick) | Position innerhalb der laufenden Schleife |

Untersektionen erreichen Sie, indem Sie die Klammerungen ineinander schachteln. So legen Sie beispielsweise eine Schleife über alle Positionen einer Bestellung. Mit dem schließenden Tag verlassen Sie die Sektion wieder.

> [!WARNING]
>
> Sicherheitsrelevante Daten sind gesperrt. Die Sektion `<CreditCard>` lässt sich nicht auswählen, Kartennummern und Prüfziffern erscheinen also nie in der Historie.

### Die drei Formen von OH-P

Zu vielen Parametern speichern die Bestelldaten nicht einen, sondern bis zu drei Werte: den technischen Wert, einen lesbaren Anzeigewert und einen Anzeigenamen. Dafür gibt es drei Tag-Formen.

| Form | Liefert |
| - | - |
| `~OH-P-<ID>~` | den Anzeigewert `<ID>_DValue`, ersatzweise den Wert von `<ID>` |
| `~OH-P-<ID>_text~` | den Anzeigenamen `<ID>_DName`, ersatzweise die technische ID selbst |
| `~OH-P-<ID>_rawdata~` | immer den technischen Wert von `<ID>` |

Alle drei funktionieren auch als Klammerung mit einem Argument. Der Bereich erscheint dann nur, wenn Argument und Wert übereinstimmen.

Ein Beispiel aus der Sektion `<CustomerAddress>`. Dort steht das Land dreifach:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<CustomerAddress>
   Country        = DEU
   Country_DValue = Deutschland
   Country_DName  = Land
</CustomerAddress>
```

Damit lassen sich Beschriftung, lesbarer Wert und technischer Code gezielt einzeln ausgeben. Nützlich ist das beispielsweise für eine Länderflagge, deren Dateiname den sprachunabhängigen ISO-Code trägt:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{OH-S-CustomerAddress}
   ~OH-P-Country_text~                      <!-- Land -->
   ~OH-P-Country~                           <!-- Deutschland -->
   <img src="~OH-P-Country_rawdata~.jpg" alt="">   <!-- DEU.jpg -->
{/OH-S-CustomerAddress}
```

Welche Sektionen und Parameter Ihre Bestelldaten enthalten, hängt vom Funktionsumfang Ihres Shops ab. Eine Übersicht der wichtigsten finden Sie in den [Materialien](https://dokumentation.websale.de/v8s/materialien/uebersicht-bestelldaten.md).

## Welche Variante passt

Für die Anzeige stehen zwei Wege zur Wahl.

| | Frei positionierbare Anzeige | Auswahlliste |
| - | - | - |
| Darstellung | alle Bestellungen als gestaltbare Liste, beispielsweise als Tabelle | Auswahlfeld, aus dem der Käufer eine Bestellung wählt |
| Übersicht vorab | Datum, Bestellnummer, Adresse, Summe und mehr auf einen Blick | nur die Einträge des Auswahlfelds |
| Blättern | eingebaut | entfällt |
| Stand | aktuelle Integration | bisherige Integration |

Die frei positionierbare Anzeige ist die Empfehlung. Der Käufer sieht seine Bestellungen, bevor er eine auswählt, statt sich durch ein Auswahlfeld raten zu müssen.

Besonders lohnt sie sich, wenn Sie weder die WWS-Infodatenschnittstelle noch die WS-REST-OrderManagement-Schnittstelle einsetzen, denn dann ist sie die einzige Stelle, an der der Käufer seine Bestellungen überhaupt zu sehen bekommt.

## Gemeinsame Vorbereitung

Diese drei Schritte gelten für beide Varianten.

### Schritt 1: Freischaltung

Eine Freischaltung durch WEBSALE ist nicht erforderlich.

### Schritt 2: Reichweite festlegen

Betreiben Sie mehrere Subshops, entscheiden Sie, ob die Historie alle davon umfasst oder nur den, in dem der Käufer gerade angemeldet ist.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Basic>
   OrderHistoryAllSubShops-Allow = yes
</Basic>
```

Für Desktop- und Mobile-Subshops desselben Sortiments gehört der Wert auf `yes`, sonst sieht der Käufer je nach Gerät unterschiedliche Bestellungen. Bei fachlich getrennten Subshops kann die Trennung dagegen gewollt sein.

Referenz: [OrderHistoryAllSubShops-Allow](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#sitzung-cookies-und-bestellabschluss)

### Schritt 3: Template anlegen und zuweisen

Legen Sie das Template an, falls es noch nicht existiert, und tragen Sie es ein.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   OrderHistory = ws_order_history.htm
</Templates>
```

Referenz: [Abschnitt Templates](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#templates)

## Frei positionierbare Anzeige (empfohlen)

Das Template zeigt zwei Zustände: die Liste aller Bestellungen und die Detailansicht einer einzelnen. Unterschieden werden sie über einen frei wählbaren Parameter, im Beispiel `otporderdetail`.

![20220902 Bestellhistorie](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/20220902_bestellhistorie.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=8409fb84d3afbe336039072f550fe8c4)

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!WS-OTPorderdetail}
<form action="~FORM-OrderHistory~" name="OrderHistory" method="post" id="wsOrderHistoryForm">
   {MSG-OrderHistory_Notify}~MSG-OrderHistory_Notify~{/MSG-OrderHistory_Notify}

   {WS-OrderHistoryCustomList}
      <input name="~WS-OrderHistoryOpenBtnName~" type="hidden">
      <input type="hidden" name="otporderdetail" value="true">

      <table>
         <tr>
            <th>Bestellung</th>
            <th>Datum</th>
            <th>Verschickt an</th>
            <th>Artikel</th>
            <th>Bestellsumme</th>
            <th>Aktion</th>
         </tr>

         {@WS-OrderHistoryCustomList}
            <tr>
               <td>{OH-S-ID}{OH-P-OrderNumber}~OH-P-OrderNumber~{/OH-P-OrderNumber}{/OH-S-ID}</td>
               <td>{OH-S-ID}{OH-P-Date}~OH-P-Date~{/OH-P-Date}{/OH-S-ID}</td>
               <td>
                  {!OH-S-DeliveryAddress}
                     {OH-S-CustomerAddress}~OH-P-Salutation~ ~OH-P-FirstName~ ~OH-P-LastName~{/OH-S-CustomerAddress}
                  {/!OH-S-DeliveryAddress}
                  {OH-S-DeliveryAddress}~OH-P-Salutation~ ~OH-P-FirstName~ ~OH-P-LastName~{/OH-S-DeliveryAddress}
               </td>
               <td>
                  {OH-S-OrderList}{OH-S-Item}
                     ~DC-Counter1_reset~{@OH-S-Item}~DC-Counter1_inc~{/@OH-S-Item}~DC-Counter1~
                  {/OH-S-Item}{/OH-S-OrderList}
               </td>
               <td>{OH-S-Order}~OH-P-Total~{/OH-S-Order}</td>
               <td>
                  <a href="javascript:void(0)"
                     onclick="wsShowOrder({OH-S-ID}~OH-P-OrderNumber~{/OH-S-ID});">Bestellung ansehen</a>
               </td>
            </tr>
         {/@WS-OrderHistoryCustomList}
      </table>

      <script>
         function wsShowOrder(ordernumber) {
            document.forms['OrderHistory'].~WS-OrderHistoryOpenBtnName~.value = ordernumber;
            document.forms['OrderHistory'].js_order_history.value = "on";
            document.forms['OrderHistory'].submit();
         }
      </script>
   {/WS-OrderHistoryCustomList}

   {WS-OrderHistoryCustomListPaging_Pages}
      {WS-OrderHistoryCustomListPaging_BackLink}
         <a href="~WS-OrderHistoryCustomListPaging_BackLink~">zurück</a>
      {/WS-OrderHistoryCustomListPaging_BackLink}

      {@WS-OrderHistoryCustomListPaging_Pages}
         <a href="~WS-OrderHistoryCustomListPaging_PagesLink~"
            class="page{WS-OrderHistoryCustomListPaging_PagesActive} page-active{/WS-OrderHistoryCustomListPaging_PagesActive}">~WS-OrderHistoryCustomListPaging_PagesNumber~</a>
      {/@WS-OrderHistoryCustomListPaging_Pages}

      {WS-OrderHistoryCustomListPaging_NextLink}
         <a href="~WS-OrderHistoryCustomListPaging_NextLink~">weiter</a>
      {/WS-OrderHistoryCustomListPaging_NextLink}
   {/WS-OrderHistoryCustomListPaging_Pages}
</form>
{/!WS-OTPorderdetail}

{WS-OTPorderdetail}
   <!-- Detailansicht der gewählten Bestellung, siehe Abschnitt "Bestelldaten ausgeben" -->
{/WS-OTPorderdetail}
```

### Was dabei zu beachten ist

> [!WARNING]
>
> Das Formular muss `name="OrderHistory"` tragen. Das Skript spricht es unter genau diesem Namen an. Ein anderer Name lässt die Schaltfläche wirkungslos, ohne dass eine Meldung erscheint.

Das Feld `js_order_history`, das das Skript setzt, steht nicht im Beispiel, weil [`~FORM-OrderHistory~`](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare#kundenkonto-und-kundendaten) es zusammen mit dem Sitzungskontext selbst in das Formular einfügt. Das funktioniert nur, wenn das Tag im `action`-Attribut eines echten `<form>`-Tags steht.

[`~WS-OrderHistoryOpenBtnName~`](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern#die-tags-im-uberblick) gibt den Feldnamen aus, unter dem der Shop die gewählte Bestellnummer erwartet. Das Skript schreibt die Nummer hinein und schickt das Formular ab.

### Anzahl der Bestellungen je Seite

Ohne weitere Angabe zeigt der Shop zehn Bestellungen pro Seite. Liegen weniger vor, entfällt das Blättern vollständig.

Die Klammerung `{[WS-OrderHistoryCustomListPaging_Pages](/v8s/referenz/tags/ws/suche-listen-und-blaettern#die-tags-im-uberblick)}` erscheint nur, wenn es tatsächlich mehr als eine Seite gibt. Sie müssen die Blätterleiste also nicht selbst ausblenden.

## Anzeige als Auswahlliste

Diese Variante zeigt statt einer Liste ein Auswahlfeld. Sie kommt ohne Blätterfunktion aus, bietet dem Käufer aber auch keine Übersicht vor der Auswahl.

### Skript in den Kopfbereich

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   <script>
      function SubmitSelection() {
         document.forms['OrderHistory'].js_order_history.value = "on";
         document.forms['OrderHistory'].submit();
      }
   </script>
</head>
```

### Auswahlfeld und Meldung

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-OrderHistory~" name="OrderHistory" method="post">
   {MSG-OrderHistory_Notify}
      ~MSG-OrderHistory_Notify~
   {/MSG-OrderHistory_Notify}

   {WS-OrderHistoryList}
      Bitte wählen Sie Ihre Bestellung aus:
      ~WS-OrderHistoryList~
      <input type="submit" value="OK" class="button">
   {/WS-OrderHistoryList}

   <!-- Detailansicht der gewählten Bestellung, siehe nächster Abschnitt -->
</form>
```

Auch hier gilt: Das Formular muss `name="OrderHistory"` heißen.

## Bestelldaten ausgeben

Dieser Teil ist für beide Varianten derselbe. Innerhalb der Detailansicht positionieren Sie die Bestelldaten frei.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{OH-S-OrderList}                     <!-- Sektion <OrderList> -->
   {OH-S-Item}                       <!-- Sektion <Item> -->
      {@OH-S-Item}                   <!-- Schleife über alle Positionen -->
         ~OH-P-Name~                       <!-- Produktname -->
         ~OH-P-Number~                     <!-- Produktnummer -->
         ~OH-P-Price_text~: ~OH-P-Price~   <!-- Beschriftung und Wert, etwa "Preis: 5,99" -->

         {@OH-S-Variation}    <!-- Schleife über die Varianten der Position -->
            ~OH-P-Name~       <!-- Name der Variante, etwa "Farbe" -->
            ~OH-P-Option~     <!-- Wert der Variante, etwa "rot" -->
         {/@OH-S-Variation}
      {/@OH-S-Item}
   {/OH-S-Item}
{/OH-S-OrderList}

{OH-S-CustomerAddress}                          <!-- Rechnungsadresse -->
   {OH-P-Company}~OH-P-Company~{/OH-P-Company}
   ~OH-P-Salutation~
   ~OH-P-FirstName~ ~OH-P-LastName~
   ~OH-P-Street1~
   ~OH-P-Zip~ ~OH-P-City~
   ~OH-P-Country~
{/OH-S-CustomerAddress}

{OH-S-CustomerComment}    <!-- Kommentar des Käufers -->
   ~OH-S-RawData~
{/OH-S-CustomerComment}

{OH-S-Order}
   {OH-P-DeliveryCost}
      ~OH-P-DeliveryCost_text~: ~OH-P-DeliveryCost~
   {/OH-P-DeliveryCost}
   {OH-P-PaymentCost}
      ~OH-P-PaymentCost_text~: ~OH-P-PaymentCost~
   {/OH-P-PaymentCost}
   ~OH-P-Total_text~: ~OH-P-Total~
{/OH-S-Order}
```

> [!WARNING]
>
> Ein Parameter gilt immer nur innerhalb der aktuellen Sektion. Innerhalb von `{@OH-S-Variation}` lässt sich `~OH-P-Number~` nicht ausgeben, weil die Sektion `<Variation>` keinen Parameter `Number` enthält. Verlassen Sie die Sektion, um wieder auf die Daten der übergeordneten zuzugreifen.

Die Klammerung um einzelne Parameter, wie oben bei `{OH-P-Company}` und `{OH-P-DeliveryCost}`, sorgt dafür, dass Beschriftungen nicht ohne Wert stehen bleiben. Bei einer Privatadresse ohne Firma entfällt die Zeile so vollständig.

## Link im Kundenkonto

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-OrderHistoryLink~">Zur Bestellhistorie</a>
```

Referenz: [WS-OrderHistoryLink](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern.md#die-tags-im-uberblick)

## Umstieg von V7 auf V8

Bestellungen, die noch unter V7 aufgegeben wurden, liegen in einem anderen Format vor und lassen sich nicht mit den `OH`-Tags auslesen. Solange solche Bestellungen in der Historie stehen, braucht das Template deshalb zwei Zweige.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-V7Order}
   ~WS-OrderHistoryData~
{/ST-V7Order}

{ST-V8Order}
   <!-- Anzeige wie oben beschrieben -->
{/ST-V8Order}
```

Mit der Zeit laufen die V7-Bestellungen aus der Historie heraus. Der V7-Zweig lässt sich dann entfernen.

## Verwandte Themen

* Wegweiser: [Anmeldung und Registrierung, denn die Historie setzt ein Kundenkonto voraus](https://dokumentation.websale.de/v8s/kundenkonto/anmeldung-registrierung.md)
* Materialien: Übersicht der wichtigsten Sektionen und Parameter in den Bestelldaten


## Related topics

- [OH- (Bestellhistorie)](https://dokumentation.websale.de/v8s/referenz/tags/oh-bestellhistorie.md)
- [Suche, Listen und Blättern](https://dokumentation.websale.de/v8s/referenz/tags/ws/suche-listen-und-blaettern.md)
- [Freie Produktfelder im Warenkorb anzeigen](https://dokumentation.websale.de/v8s/warenkorb/freie-produktfelder-im-warenkorb-anzeigen.md)
- [Upload-Modul](https://dokumentation.websale.de/v8s/upload-modul/upload-modul.md)
- [Upload-Modul integrieren](https://dokumentation.websale.de/v8s/upload-modul/upload-modul-integrieren.md)


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