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

# Materialien Direktbestellung

> Die Funktionsparameter des JavaScript-Moduls, das die Eingaben der Direktbestellung während einer Sitzung festhält: Formularklassen, gegliederte Produktnummer, Cookie-Steuerung und Callbacks.

Bei der Direktbestellung tippt der Kunde Produktnummern und Mengen in ein Formular, statt sich durch den Katalog zu klicken. Damit seine Eingaben beim Blättern und Nachladen nicht verloren gehen, legt ein JavaScript-Modul sie in einem Cookie ab.

Diese Seite beschreibt die Parameter, mit denen Sie dieses Modul an Ihr Formular anpassen.

Wegweiser: [Direktbestellung](https://dokumentation.websale.de/v8s/weitere-funktionen-im-bestellprozess-kontext/direktbestellung.md) · Referenz: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

## Das Modul einbinden

Das Modul heißt `ws-product-reminder-1.7.0.js` und setzt die jQuery-Bibliothek voraus.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script src="/$WS/ws_sysdata/js/ws-product-reminder-1.7.0.js"></script>
```

Alle Parameter sind optional. Übergeben Sie nur die, die von der Vorgabe abweichen. Der Rest der Seite ist nach Aufgaben gegliedert, nicht alphabetisch, damit Sie die zusammengehörigen Parameter beieinander finden.

## Die Felder des Formulars

Diese vier Klassen muss das Modul in Ihrem Formular wiederfinden. Ohne sie erkennt es die Eingabezeilen nicht.

| Parameter | Typ | Standardwert | Beschreibung |
| - | - | - | - |
| `productLine` | String | `cookie_product_reminder_data_line` | Klasse der einzelnen Eingabezeilen im Formular |
| `productNumberClass` | String | `input_number` | Klasse des Eingabefelds für die Produktnummer |
| `quantityClass` | String | `input_quantity` | Klasse des Eingabefelds für die Bestellmenge |
| `productNameClass` | String | `productName` | Klasse des Felds, in dem der Produktname erscheint |

> [!WARNING]
>
> Erst wenn das Namensfeld einen Inhalt hat, schreibt das Modul Produktnummer und Menge dieser Zeile in das Cookie. Das ist kein Fehler, sondern Absicht: gespeichert wird nur, was der Shop als gültiges Produkt bestätigt hat.
>
> Lassen Sie das Namensfeld also im Formular stehen, auch wenn Sie es per CSS ausblenden.

## Prüfen und Löschen

| Parameter | Typ | Standardwert | Beschreibung |
| - | - | - | - |
| `checkButtonClass` | String | `checkProducts` | Klasse der Schaltfläche, die die Eingaben prüft |
| `checkOnChange` | Bool | `false` | prüft automatisch, sobald eine Produktnummer geändert und die Zeile verlassen wurde |
| `removeClass` | String | `removeReminder` | Klasse der Schaltfläche, die das Cookie löscht. Das ist zugleich die Schaltfläche, die die Produkte in den Warenkorb legt |
| `removeProduct` | String | `deleteProduct` | Klasse der Schaltfläche, die ein einzelnes Produkt aus Liste und Cookie entfernt. Ab Version 1.6.0 |

`checkOnChange` nimmt dem Kunden einen Klick ab, löst aber bei jeder Zeile einen Serveraufruf aus. Bei Formularen mit vielen Zeilen lohnt es sich, stattdessen bei der Sammelprüfung über `checkButtonClass` zu bleiben.

## Gegliederte Produktnummer

Viele Sortimente haben Produktnummern aus mehreren Blöcken, beispielsweise `123-456-XL`. Das Modul kann das Eingabefeld dafür in drei Felder aufteilen.

| Parameter | Typ | Standardwert | Beschreibung |
| - | - | - | - |
| `numberIntoElements` | Bool | `true` | gliedert die Produktnummer in drei Blöcke. Die ersten beiden sind Pflichtfelder |
| `generateElements` | Bool | `true` | erzeugt die drei Felder selbst. Bei `false` legen Sie sie im Template an und geben ihnen die Klasse `input_number_part` |
| `productElement1Class` | String | `input_number_part1` | Klasse des ersten Blocks |
| `productElement2Class` | String | `input_number_part2` | Klasse des zweiten Blocks |
| `productElement3Class` | String | `input_number_part3` | Klasse des dritten Blocks |
| `productElement1MaxSize` | Number | `3` | maximale Länge des ersten Blocks |
| `productElement2MaxSize` | Number | `4` | maximale Länge des zweiten Blocks |
| `productElementSeparator` | String | `-` | Zeichen zwischen den Blöcken |
| `productElementSeparator1Class` | String | `input_number_spacer1` | Klasse des Trennzeichens zwischen erstem und zweitem Block |
| `productElementSeparator2Class` | String | `input_number_spacer2` | Klasse des Trennzeichens zwischen zweitem und drittem Block |

Alle Parameter dieser Gruppe wirken nur, solange `numberIntoElements` auf `true` steht. Schalten Sie die Gliederung ab, bleibt ein einzelnes Eingabefeld mit der Klasse aus `productNumberClass`.

> [!NOTE]
>
> Für den dritten Block gibt es keinen Parameter für die maximale Länge. Er nimmt auf, was nach dem zweiten Trennzeichen folgt.
>
> Das ist ein Übertragungsfehler, hier auf `input_number_part2` und `input_number_part3` korrigiert.

## Werbemittelkennzeichen

Ab Version 1.6.0 kann das Modul ein Werbemittelkennzeichen aus derselben Texteingabe abtrennen wie die Produktnummer.

| Parameter | Typ | Standardwert | Beschreibung |
| - | - | - | - |
| `codeNumberIntoElement` | Bool | `false` | schaltet die Trennung des Werbemittelkennzeichens ein |
| `codeNumberElementClass` | String | `input_code_number` | Klasse des Felds für das Werbemittelkennzeichen |
| `codeNumberMaxLength` | Number | `30` | Wert für das `maxlength`-Attribut dieses Felds |

## Das Cookie

| Parameter | Typ | Standardwert | Beschreibung |
| - | - | - | - |
| `cookieAction` | String | `load` | `load` liest das Cookie und füllt die Felder, `save` schreibt die Felder in ein Cookie |
| `cookieActionParam` | String | `otpcookie` | Name des Parameters, über den der Aktionstyp übergeben wird. Ab Version 1.7.0 |
| `sessionid` | String | `null` | die Session-ID wird Teil des Cookie-Namens, damit das Cookie an die Sitzung gebunden ist |

`cookieActionParam` kam mit Version 1.7.0 dazu, weil mehrere gleichnamige OTPX-Parameter auf einer Seite zu Fehlern führen konnten. Wenn Sie auf einer Seite mehr als ein Direktbestellungs-Formular einsetzen, geben Sie jedem einen eigenen Parameternamen.

## Scrollposition

Nach dem Prüfen lädt die Seite neu. Diese drei Parameter sorgen dafür, dass der Kunde dabei nicht den Überblick verliert.

| Parameter | Typ | Standardwert | Beschreibung |
| - | - | - | - |
| `scrollOnReload` | Bool | `true` | behält die Scrollposition nach dem Prüfen bei |
| `scrollPosition` | Number | `0` | Position, zu der beim Laden der Seite gesprungen wird |
| `reloadInputName` | String | `otp2` | Name des Eingabefelds, über das die Scrollposition übergeben wird |

`scrollPosition` und `reloadInputName` werden nur gebraucht, solange `scrollOnReload` eingeschaltet ist.

## Callbacks

An drei Stellen können Sie eigene Funktionen einhängen.

| Parameter | Typ | Standardwert | Wird aufgerufen |
| - | - | - | - |
| `onInit` | Function | `null` | nachdem das Modul fertig eingerichtet ist |
| `onCheck` | Function | `null` | bevor die Eingaben geprüft werden |
| `onRemove` | Function | `null` | nachdem das Cookie gelöscht wurde |

## Was sich zwischen den Versionen geändert hat

| Version | Änderung |
| - | - |
| 1.7.0 | `productLine` heißt jetzt `cookie_product_reminder_data_line` statt `direct_order_productLine`. Das Modul prüft, ob überhaupt eine Eingabezeile vorhanden ist. Neu: `cookieActionParam` |
| 1.6.0 | Werbemittelkennzeichen und Produktnummer lassen sich aus derselben Texteingabe trennen. Die gewählte Variantenkombination kann gespeichert werden. Neu: `removeProduct` |

> [!WARNING]
>
> Beim Wechsel auf 1.7.0 ändert sich der Standardwert von `productLine`. Wenn Ihr Stylesheet oder Ihr Template `direct_order_productLine` verwendet, greift es danach nicht mehr. Entweder Sie benennen die Klasse um, oder Sie setzen `productLine` wieder auf den alten Wert.


## Related topics

- [Direktbestellung](https://dokumentation.websale.de/v8s/weitere-funktionen-im-bestellprozess-kontext/direktbestellung.md)
- [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)
- [Nicht mehr verfügbare Produkte und Kategorien](https://dokumentation.websale.de/v8s/seo/nicht-mehr-verfuegbare-produkte-und-kategorien.md)
- [Schaltflächen für Schnell- und Direktbestellung](https://dokumentation.websale.de/v8s/referenz/tags/bt/schnell-und-direktbestellung.md)
- [$wsDirectOrder - Direktbestellung](https://dokumentation.websale.de/frontend/referenz/module/wsdirectorder.md)


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