Online order form

With direct ordering, the buyer can add one or more products directly to the basket by entering product numbers. The prerequisite is that the customer has the product numbers, e.g., from a catalog. Note: still being tested. The function does not require additional scripts.

Persisting direct order entries during a session

Already included. No additional scripts are required. The products checked during a direct order that have not yet been added to the basket are stored in a session-related cookie. If the direct order form is called up again later, the product data stored in the cookie is automatically transferred into the corresponding input fields. This avoids having to re-enter the product number and quantity if the shop visitor has not yet added their selection to the basket but has visited other pages of the shop.

Actions

The following actions are available:

DirectOrderAdd

This action creates a new basket item from the order form.

{{ foreach $cProduct in range(0, $wsDirectOrder.currentLines - 1) }}
  {{ var $cActionDirectOrderAdd = $wsActions.create("DirectOrderAdd", tag=string($cProduct)) }}
{{ /foreach }}

DirectOrderDelete

This action removes a basket item from the order form.

{{ foreach $cProduct in range(0, $wsDirectOrder.currentLines - 1) }}
  {{ var $cActionDirectOrderDelete = $wsActions.create("DirectOrderDelete", tag=string($cProduct)) }}
{{ /foreach }}

Integration of the direct order

Create template

Create a new file directOrder.htm in the views directory. In this file, several rows are generated for the respective order items.

{{ 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">
							<svg role="img" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 512 512"><g><path d="M379.453,123.562c0,0,7.232,270.164,17.48,336.787c-164.692,52.798-282.127,0-282.127,0c10.247-66.623,19.001-339.639,19.001-339.639" fill="none" stroke="#474747" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="15"/><path d="M131.033,193.628l-30.599,64.168c-46.962-7.004-88.077-48.676-88.077-48.676l99.61-164.692l81.112-19.349l10.59,29.084c25.215,35.473,78.085,34.885,102.505-1.141l8.858-27.944l82.999,19.349l99.61,164.692c0,0-41.115,41.672-88.077,48.676l-27.741-61.85" fill="none" stroke="#474747" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="15"/></g></svg>
						</td>
						<td>
							<div class="row">
								<div class="col-12 col-md">
									<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 the item number</p>
										<div class="row">
											<div class="col col-sm-auto">
												<div class="form-floating">
													<input type="text" name="id" value="{{= $wsDirectOrder.items[$cProduct].id | ifNull('') }}" class="wsDirectOrderInputNumber form-control" placeholder="Item no.">
													<label>Item no.</label>
												</div>
											</div>
											<div class="col-auto">
												<button type="submit" name="wsact" value="{{= $cActionDirectOrderAdd.id }}" class="btn btn-primary"><svg role="img" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class="align-text-bottom"><path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path></svg></button>
												<button type="submit" name="wsact" value="{{= $cActionDirectOrderDelete.id }}" class="btn btn-secondary">Delete</button>
											</div>
										</div>
										<label>Quantity</label>
										<input type="text" name="quantity" value="{{= $wsDirectOrder.items[$cProduct].quantity | ifNull('') }}">
										{{ foreach $item in $wsConfig.directOrder.itemNumberFields }}
											<div class="itemNumberFields"> 
												{{ if $item.type == "field" }}
													<input type="text" name="{{= $item.name }}">
												{{ elseif $item.type == "separator" }}
													{{= $item.sign }}
												{{ /if }}
											</div>
										{{ /foreach }}
									</form>
								</div>
							</div>
						</td>
					</tr>
				{{ /foreach }}
			</tbody>
		</table>
	</div>
{{ /block }}

Error messages

The error messages can be placed either before or inside the form element. In this example, error messages for the entry of the quantity of an item are displayed.

{{ foreach $cProduct in range(0, $wsDirectOrder.currentLines - 1) }}
  {{ var $cActionDirectOrderAdd = $wsActions.create("DirectOrderAdd", tag=string($cProduct)) }}
  {{ var $cActionDirectOrderDelete = $wsActions.create("DirectOrderDelete", tag=string($cProduct)) }}
  ...
  {{ if $cActionDirectOrderAdd.errorsByField.quantity }}
	<div class="alert alert-danger">
      Errors occurred:
  	   <ul>
		{{ foreach $err in $cActionDirectOrderAdd.errorsByField.quantity }}
			{{ if $err.text }}
				<li>{{= $err.text }}</li>
    		{{ else }}
				<li>{{= $err.code }}</li>
			{{ /if }}
		{{ /foreach }}
      </ul>
    </div>
  {{ /if }}
{{ /foreach }}

In this example, error messages for adding an item are displayed.

{{ foreach $cProduct in range(0, $wsDirectOrder.currentLines - 1) }}
  {{ var $cActionDirectOrderAdd = $wsActions.create("DirectOrderAdd", tag=string($cProduct)) }}
  {{ var $cActionDirectOrderDelete = $wsActions.create("DirectOrderDelete", tag=string($cProduct)) }}
  ...
  {{ if $cActionDirectOrderAdd.errorsByField.id }}
    <div class="alert alert-danger">
      Errors occurred:
      <ul>
		{{ foreach $err in $cActionDirectOrderAdd.errorsByField.id }}
			{{ if $err.text }}
				<li>{{= $err.text }}</li>
			{{ else }}
				<li>{{= $err.code }}</li>
			{{ /if }}
		{{ /foreach }}
      </ul>
	</div>
  {{ /if }}
{{ /foreach }}

You can integrate the link to the direct order in any template. It is:

<a href="{{= $wsViews.viewUrl('module/directOrder.htm')}}">Direct order</a>

WEBSALE V8s

Persisting direct order entries during a session

Actions

DirectOrderAdd

DirectOrderDelete

Integration of the direct order

Create template

Error messages

Linking the page in the footer

​Persisting direct order entries during a session

​Actions

​DirectOrderAdd

​DirectOrderDelete

​Integration of the direct order

​Create template

​Error messages

​Linking the page in the footer

Persisting direct order entries during a session

Actions

DirectOrderAdd

DirectOrderDelete

Integration of the direct order

Create template

Error messages

Linking the page in the footer