Skip to main content
With the $wsDirectOrder module, you read the state of a direct order. In a direct order, the customer places products into the basket directly by entering their item numbers, without searching for them individually in the shop. The module returns the current number of input lines and the items recorded so far, including their validity. This page covers reading the direct-order state. Adding and deleting items happens via the DirectOrderAdd / DirectOrderDelete actions.

​
Basic concept

The order form is a form with several input lines. In each line, the customer enters an item number (and a quantity). When submitted, the DirectOrderAdd action checks whether the number exists and adds the product to the basket. $wsDirectOrder provides the current state for this:
  • currentLines – how many input lines are currently displayed. The value comes from the configuration ($wsConfig.directOrder: initialNumber to maximalNumber).
  • items – the items already recorded, each with id, quantity, and valid.

​
Validity

The valid field of an item indicates whether the entered item number exists in the shop and can be ordered. Evaluate it to give the customer immediate feedback on an invalid entry.

​
Module overview

Example / excerpt of $wsDirectOrder 
{{= $wsDirectOrder | json }}
JSON output 
{
  "currentLines": 5,
  "items": [
    { "id": "123-45678", "quantity": 1, "valid": true },
    { "id": "910-111213", "quantity": 1, "valid": false }
  ]
}
Variables overview
VariableTypeDescription
currentLinesintCurrent number of displayed input lines.
itemsarrayRecorded order items (structure see below).
Properties of an order item (items[])
PropertyTypeDescription
idstringEntered item number.
quantityintEntered quantity.
validbooltrue if the item number exists and can be ordered.

​
Templates

By default, the order form is located in the template module/directOrder.htm. Link it, e.g. in the footer (see example).

​
Variables

​
$wsDirectOrder.currentLines

Returns the current number of displayed input lines. The value is configured via $wsConfig.directOrder (initialNumber as the start, maximalNumber as the upper limit). Use it, for example, to generate exactly that many lines. 
Current lines: {{= $wsDirectOrder.currentLines }}

​
$wsDirectOrder.items

Returns the recorded order items. Use the line index to access a specific item (items[$index]). 
{{ foreach $item in $wsDirectOrder.items }}
  {{= $item.id }} – Quantity: {{= $item.quantity }} – valid: {{= $item.valid }}
{{ /foreach }}

​
Properties of an order item

PropertyTypeDescription
idstringEntered item number.
quantityintEntered quantity.
validbooltrue if the item number exists and can be ordered.

​
Methods

No methods are available for $wsDirectOrder.

​
Actions

$wsDirectOrder itself does not provide any actions. Adding and deleting items happens via the actions.

​
Examples

​
Order form template

This example generates an input row for every configured line (currentLines). range(0, currentLines - 1) returns the indexes 0 to currentLines - 1. For each line, the actions DirectOrderAdd and DirectOrderDelete are created with the line index as tag, so that inputs and errors are assigned to the correct line. The ifNull('') filter sets an empty value if the line has not yet been filled in. 
{{ extends "layouts/layout.htm" }}
{{ block content_main }}
  <div id="wsBasketWrapper">
    <h1>Direct order</h1>
    <table class="table">
      <tbody id="wsDirectOrderTableBody">
        {{ foreach $cProduct in range(0, $wsDirectOrder.currentLines - 1) }}
          {{ var $cActionDirectOrderAdd = $wsActions.create("DirectOrderAdd", tag=string($cProduct)) }}
          {{ var $cActionDirectOrderDelete = $wsActions.create("DirectOrderDelete", tag=string($cProduct)) }}
          <tr class="wsDirectOrderRow">
            <td class="wsTableCellMin">
              <!-- Product icon (SVG) -->
            </td>
            <td>
              <form method="POST" action="{{= $wsViews.current.url() }}">
                <input type="hidden" name="wscsrf" value="{{= $cActionDirectOrderAdd.csrf }}">
                <input type="hidden" name="wstarget" value="{{= $wsViews.current.url() }}">
                <p>Please enter item number</p>
                <input type="text" name="id" placeholder="Item no."
                       value="{{= $wsDirectOrder.items[$cProduct].id | ifNull('') }}">
                <label>Quantity</label>
                <input type="text" name="quantity"
                       value="{{= $wsDirectOrder.items[$cProduct].quantity | ifNull('') }}">
                <button type="submit" name="wsact" value="{{= $cActionDirectOrderAdd.id }}">Search</button>
                <button type="submit" name="wsact" value="{{= $cActionDirectOrderDelete.id }}">Delete</button>

                {{ foreach $field in $wsConfig.directOrder.itemNumberFields }}
                  {{ if $field.type == "field" }}
                    <input type="text" name="{{= $field.name }}">
                  {{ elseif $field.type == "separator" }}
                    {{= $field.sign }}
                  {{ /if }}
                {{ /foreach }}
              </form>
            </td>
          </tr>
        {{ /foreach }}
      </tbody>
    </table>
  </div>
{{ /block }}
Result
An order form with as many input rows as currentLines specifies. Rows that have already been filled in are pre-populated with their item number and quantity.

​
Display error messages

The DirectOrderAdd action reports errors per field via errorsByField. This example shows the errors for the item number (id) and the quantity (quantity) per line. 
{{ foreach $cProduct in range(0, $wsDirectOrder.currentLines - 1) }}
  {{ var $cActionDirectOrderAdd = $wsActions.create("DirectOrderAdd", tag=string($cProduct)) }}

  {{ if $cActionDirectOrderAdd.errorsByField.id }}
    <div class="alert alert-danger">
      {{ foreach $err in $cActionDirectOrderAdd.errorsByField.id }}
        {{ if $err.text }}{{= $err.text }}{{ else }}{{= $err.code }}{{ /if }}
      {{ /foreach }}
    </div>
  {{ /if }}

  {{ if $cActionDirectOrderAdd.errorsByField.quantity }}
    <div class="alert alert-danger">
      {{ foreach $err in $cActionDirectOrderAdd.errorsByField.quantity }}
        {{ if $err.text }}{{= $err.text }}{{ else }}{{= $err.code }}{{ /if }}
      {{ /foreach }}
    </div>
  {{ /if }}
{{ /foreach }}
Result
On invalid input (e.g. an invalid item number or quantity), the corresponding message appears in the affected line.

​
Link the page in the footer

You generate the link to the direct order with viewUrl(). Pass the path to the template as the argument. 
<a href="{{= $wsViews.viewUrl('module/directOrder.htm') }}">Direct order</a>
Result
A link that leads to the direct-order page.