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

# Materials: direct order

> The function parameters of the JavaScript module that retains direct order entries during a session: form classes, segmented product number, cookie control, and callbacks.

With a direct order, the customer types product numbers and quantities into a form instead of clicking through the catalog. So that their entries aren't lost when paging and reloading, a JavaScript module stores them in a cookie.

This page describes the parameters you use to adapt this module to your form.

Guide: Direct order · Reference: WEBSALE JavaScript library

## Including the module

The module is named `ws-product-reminder-1.7.0.js` and requires the jQuery library.

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

All parameters are optional. Pass only those that differ from the default. The rest of the page is organized by task, not alphabetically, so you can find related parameters together.

## The form fields

The module must find these four classes in your form. Without them, it doesn't recognize the input rows.

| Parameter | Type | Default value | Description |
| - | - | - | - |
| `productLine` | String | `cookie_product_reminder_data_line` | class of the individual input rows in the form |
| `productNumberClass` | String | `input_number` | class of the input field for the product number |
| `quantityClass` | String | `input_quantity` | class of the input field for the order quantity |
| `productNameClass` | String | `productName` | class of the field in which the product name appears |

> [!WARNING]
>
> Only when the name field has content does the module write the product number and quantity of that row to the cookie. This isn't a bug but intentional: only what the shop has confirmed as a valid product is saved.
>
> So keep the name field in the form, even if you hide it with CSS.

## Checking and deleting

| Parameter | Type | Default value | Description |
| - | - | - | - |
| `checkButtonClass` | String | `checkProducts` | class of the button that checks the entries |
| `checkOnChange` | Bool | `false` | checks automatically as soon as a product number has been changed and the row has been left |
| `removeClass` | String | `removeReminder` | class of the button that deletes the cookie. This is also the button that adds the products to the basket |
| `removeProduct` | String | `deleteProduct` | class of the button that removes a single product from the list and the cookie. As of version 1.6.0 |

> [!NOTE]
>
> `checkOnChange` saves the customer a click but triggers a server request for each row. For forms with many rows, it's worth sticking with the bulk check via `checkButtonClass` instead.

## Segmented product number

Many product ranges have product numbers made up of several blocks, for example `123-456-XL`. The module can split the input field into three fields for this.

| Parameter | Type | Default value | Description |
| - | - | - | - |
| `numberIntoElements` | Bool | `true` | splits the product number into three blocks. The first two are required fields |
| `generateElements` | Bool | `true` | generates the three fields itself. With `false`, you create them in the template and give them the class `input_number_part` |
| `productElement1Class` | String | `input_number_part1` | class of the first block |
| `productElement2Class` | String | `input_number_part2` | class of the second block |
| `productElement3Class` | String | `input_number_part3` | class of the third block |
| `productElement1MaxSize` | Number | `3` | maximum length of the first block |
| `productElement2MaxSize` | Number | `4` | maximum length of the second block |
| `productElementSeparator` | String | `-` | character between the blocks |
| `productElementSeparator1Class` | String | `input_number_spacer1` | class of the separator between the first and second block |
| `productElementSeparator2Class` | String | `input_number_spacer2` | class of the separator between the second and third block |

All parameters in this group only take effect as long as `numberIntoElements` is set to `true`. If you turn off the segmentation, a single input field with the class from `productNumberClass` remains.

> [!NOTE]
>
> There's no parameter for the maximum length of the third block. It takes whatever follows the second separator.
>
> In the previous documentation, the second and third blocks both have `input_number_part1` as their default value. This is a transcription error, corrected here to `input_number_part2` and `input_number_part3`.

## Advertising medium code

As of version 1.6.0, the module can separate an advertising medium code from the same text input as the product number.

| Parameter | Type | Default value | Description |
| - | - | - | - |
| `codeNumberIntoElement` | Bool | `false` | enables separation of the advertising medium code |
| `codeNumberElementClass` | String | `input_code_number` | class of the field for the advertising medium code |
| `codeNumberMaxLength` | Number | `30` | value for the `maxlength` attribute of this field |

## The cookie

| Parameter | Type | Default value | Description |
| - | - | - | - |
| `cookieAction` | String | `load` | `load` reads the cookie and fills the fields, `save` writes the fields to a cookie |
| `cookieActionParam` | String | `otpcookie` | name of the parameter used to pass the action type. As of version 1.7.0 |
| `sessionid` | String | `null` | the session ID becomes part of the cookie name so that the cookie is bound to the session |

> [!NOTE]
>
> `cookieActionParam` was added in version 1.7.0 because multiple OTPX parameters with the same name on one page could lead to errors. If you use more than one direct order form on a page, give each one its own parameter name.

## Scroll position

After checking, the page reloads. These three parameters make sure the customer doesn't lose their place.

| Parameter | Type | Default value | Description |
| - | - | - | - |
| `scrollOnReload` | Bool | `true` | keeps the scroll position after checking |
| `scrollPosition` | Number | `0` | position to jump to when the page loads |
| `reloadInputName` | String | `otp2` | name of the input field used to pass the scroll position |

`scrollPosition` and `reloadInputName` are only needed as long as `scrollOnReload` is enabled.

## Callbacks

You can hook in your own functions at three points.

| Parameter | Type | Default value | Called |
| - | - | - | - |
| `onInit` | Function | `null` | after the module has been fully set up |
| `onCheck` | Function | `null` | before the entries are checked |
| `onRemove` | Function | `null` | after the cookie has been deleted |

## What changed between versions

| Version | Change |
| - | - |
| 1.7.0 | `productLine` is now `cookie_product_reminder_data_line` instead of `direct_order_productLine`. The module checks whether an input row exists at all. New: `cookieActionParam` |
| 1.6.0 | Advertising medium code and product number can be separated from the same text input. The selected variant combination can be saved. New: `removeProduct` |

> [!WARNING]
>
> When you switch to 1.7.0, the default value of `productLine` changes. If your stylesheet or template uses `direct_order_productLine`, it no longer takes effect afterward. Either rename the class or set `productLine` back to the old value.


## Related topics

- [WEBSALE JavaScript library](https://dokumentation.websale.de/en/v8s/materialien/websale-javascript-bibliothek.md)
- [Shopping basket and order process](https://dokumentation.websale.de/en/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/warenkorb-und-bestellprozess.md)
- [DirectOrder](https://dokumentation.websale.de/en/frontend/referenz/aktionen/directorder.md)
- [$wsDirectOrder - Direct order](https://dokumentation.websale.de/en/frontend/referenz/module/wsdirectorder.md)
- [Buttons for quick and direct orders](https://dokumentation.websale.de/en/v8s/referenz/tags/bt/schnell-und-direktbestellung.md)


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