Direktbestellung

Wer aus einem gedruckten Katalog oder einer Bestellliste kauft, hat die Produktnummern bereits vor sich liegen. Für ihn ist der Weg über Kategorien und Produktseiten ein Umweg. Die Direktbestellung gibt ihm stattdessen ein Formular, in das er Nummer und Menge Zeile für Zeile einträgt und alles auf einmal in den Warenkorb legt. Typisch ist das im B2B-Geschäft und überall dort, wo Kunden regelmäßig dieselben Artikel nachbestellen. Voraussetzung ist, dass dem Käufer die Produktnummern vorliegen. Diese Seite beschreibt zuerst die Grundintegration und danach vier Ausbaustufen, die aufeinander aufbauen.

Grundintegration

Schritt 1: Den Abschnitt `<DirectOrder>` anlegen

Legen Sie in der Shopkonfiguration shop.config den Abschnitt <DirectOrder> an, falls er noch nicht vorhanden ist.

<DirectOrder>
   DefaultInputLines-Value                  = 5
   ExtendInputLines-Value                   = 5
   Notify1-Txt                              = Die Eingabe einer Menge fehlt.
   Notify2-Txt                              = Die Eingabe einer Produktnummer fehlt.
   Notify3-Txt                              = Die Produktnummer "~PR-Number~" konnte nicht gefunden werden.
   Notify4-Txt                              = Mehrere Ausführungen möglich. Bitte wählen Sie:
   Notify5-Txt                              = Das Produkt hat eine Mindestbestellmenge von ~PR-MinQuantity~ ~PR-Unit~.
   Notify6-Txt                              = Das Produkt hat eine maximale Bestellmenge von ~PR-MaxQuantity~ ~PR-Unit~.
   Notify7-Txt                              = Das Produkt ist leider ausverkauft.
   ShowBaseProductsAtDirectOrderInput-Allow = no
</DirectOrder>

Parameter	Bedeutung
`DefaultInputLines-Value`	Eingabezeilen beim ersten Aufruf der Seite
`ExtendInputLines-Value`	Zeilen, die “Tabelle erweitern” hinzufügt
`Notify1-Txt` bis `Notify7-Txt`	die Meldungen der Eingabeprüfung
`ShowBaseProductsAtDirectOrderInput-Allow`	Verhalten bei Eingabe einer Varianten-Produktnummer

Startzeilen und Erweiterungszeilen zusammen dürfen 100 nicht überschreiten. Beginnen Sie eher mit wenigen Zeilen. Ein Formular mit fünf Zeilen und einer Schaltfläche zum Erweitern wirkt einladender als eine Tabelle mit fünfzig leeren Feldern.

Meldung	Wann sie erscheint
`Notify1-Txt`	eine Produktnummer steht da, aber keine Menge
`Notify2-Txt`	eine Menge steht da, aber keine Produktnummer
`Notify3-Txt`	die Produktnummer wurde nicht gefunden
`Notify4-Txt`	das Produkt hat mehrere Ausführungen zur Auswahl
`Notify5-Txt`	die Menge liegt unter der Mindestbestellmenge
`Notify6-Txt`	die Menge liegt über der maximalen Bestellmenge
`Notify7-Txt`	das Produkt ist ausverkauft

In den Meldungen können Sie Produkt-Tags verwenden, beispielsweise ~PR-Number~ für die eingegebene Nummer oder ~PR-MinQuantity~ für die Mindestmenge. Der Käufer erfährt damit nicht nur, dass etwas nicht stimmt, sondern auch welche Zeile gemeint ist. Referenz: Abschnitt DirectOrder

Schritt 2: Das Template zuweisen

<Templates>
   ...
   DirectOrder = ws_direct_order.htm
   ...
</Templates>

Referenz: Abschnitt Templates

Schritt 3: Den Link einbauen

Den Link zur Direktbestellung können Sie in jedem Template setzen.

<a href="~WS-Link~&act=direct_order">Zur Direktbestellung</a>

Optional geben Sie die Zeilenzahl über den Link-Parameter ws_do_lines mit. Der Wert aus der Konfiguration wird damit für diesen Aufruf überschrieben.

<a href="~WS-Link~&act=direct_order&ws_do_lines=100">Zur Direktbestellung</a>

Das ist praktisch, wenn Sie zwei Einstiege anbieten wollen: einen kurzen für den Gelegenheitskauf und einen langen für Stammkunden, die eine ganze Bestellliste abarbeiten. Referenz: WS-Link()

Schritt 4: Das Template erstellen

Legen Sie die Datei unter dem Namen an, den Sie bei DirectOrder eingetragen haben, und speichern Sie sie in Ihrem Templateverzeichnis.

{CAT-Data}
<form action="~FORM-DirectOrder~" name="DirectOrder" method="post">
   <table>
      <tr>
         <th>Position</th>
         <th>Menge</th>
         <th>Artikelnummer</th>
         <th colspan="2">Produktinformationen</th>
         <th>Preis</th>
      </tr>

      {@PR-Data}
      <tr>
         <td>~PR-Position~</td>
         <td><input type="text" name="~PR-Quantity_Input~" value="~PR-Quantity~"></td>
         <td><input type="text" name="~PR-Number_Input~" value="~PR-Number_Value~"></td>
         <td>
            {PR-Thumbnail}<img src="~PR-Thumbnail~">{/PR-Thumbnail}
            {!PR-Thumbnail}&nbsp;{/!PR-Thumbnail}
         </td>
         <td>
            {PR-Name}
               <a href="~PR-Link~">~PR-Name~</a>
               {PR-Name2}Zusatzbezeichnung: ~PR-Name2~{/PR-Name2}
               Produktnummer: ~PR-Number~
            {/PR-Name}
            {PR-Inventory}Lagerbestand: ~PR-DeliveryText~{/PR-Inventory}
            {!MSG-DirectOrder_Notify}~PR-DirectOrderVariations~{/!MSG-DirectOrder_Notify}
            {MSG-DirectOrder_Notify}
               ~MSG-DirectOrder_Notify~ ~PR-TextInputFields~ ~PR-Variations~ ~PR-DepVariations~
            {/MSG-DirectOrder_Notify}
         </td>
         <td>
            {PR-Name}~PR-Price~ ~WS-CurrencySymbol~{/PR-Name}
            {!PR-Name}&nbsp;{/!PR-Name}
         </td>
      </tr>
      {/@PR-Data}

      <tr>
         <td colspan="6">
            <input type="submit" name="~BT-DirectOrder_ExtendLines~" value="Tabelle erweitern">
         </td>
      </tr>
   </table>

   <input type="submit" name="~BT-DirectOrder_Check~" value="Eingaben prüfen">
   {ST-DirectOrder_OK}
      <input type="submit" name="~BT-DirectOrder_Basket~" value="In den Warenkorb">
   {/ST-DirectOrder_OK}
</form>
{/CAT-Data}

Der Ablauf hat zwei Stufen. Mit “Eingaben prüfen” liest der Shop die Nummern, zeigt Namen, Bild und Preis an und meldet Fehler. Erst wenn alles stimmt, erscheint über ST-DirectOrder_OK die Schaltfläche in den Warenkorb. Diese Trennung ist Absicht: Der Käufer sieht, was er bestellt, bevor er es bestellt.

Der ganze Block gehört in {CAT-Data}. Ohne diese Klammer stehen die Produktdaten nicht zur Verfügung, und die Schleife {@PR-Data} bleibt leer.

Referenz: CAT-Data · FORM-DirectOrder · PR-Data · ST-DirectOrder_OK · MSG-DirectOrder_Notify · BT-DirectOrder_Check · BT-DirectOrder_ExtendLines · BT-DirectOrder_Basket · PR-Position · PR-Quantity · PR-Quantity_Input · PR-Number · PR-Number_Input · PR-Number_Value · PR-Name · PR-Name2 · PR-Link · PR-Price · PR-Thumbnail · PR-Inventory · PR-DeliveryText · PR-Variations · PR-DepVariations · PR-DirectOrderVariations · PR-TextInputFields · WS-CurrencySymbol

Eingaben während der Sitzung halten

Ohne diese Erweiterung sind alle Eingaben weg, sobald der Käufer das Formular verlässt, beispielsweise um eine Produktseite nachzusehen. Bei einer halb ausgefüllten Bestellliste ist das ärgerlich genug, um den Kauf abzubrechen. Die Funktion speichert die geprüften, aber noch nicht in den Warenkorb gelegten Produkte in einem sitzungsbezogenen Cookie. Bei einem erneuten Aufruf des Formulars sind alle Felder wieder gefüllt. Auch wenn betriebsnotwendige Cookies ohne ausdrückliche Einwilligung zulässig sind, stimmen Sie den Einsatz mit Ihrem Datenschutzbeauftragten ab.

Schritt 1: Die JavaScript-Datei einbinden

Voraussetzung ist die WEBSALE JavaScript-Bibliothek oder eine andere jQuery-Bibliothek. Binden Sie die folgende Datei im HTML-Kopf ein.

<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-product-reminder-1.5.0.min.js"></script>

Schritt 2: Die Übergabeparameter ergänzen

Innerhalb des Formulars brauchen Sie zwei OTP-Parameter. otp1 löst nach der Prüfung das Speichern aus, otp2 nimmt die Scrollposition auf, die das JavaScript vor dem Absenden selbst einträgt.

<form action="~FORM-DirectOrder~" name="DirectOrder" method="post" id="directorder">
   ...
   <input type="hidden" name="otp1" value="save">
   <input type="hidden" name="otp2" value="">
   ...
</form>

Das Formular braucht außerdem die ID directorder, über die das JavaScript es findet. Sie steht im Beispiel oben bereits mit drin.

Schritt 3: Die Klassen vergeben

Das JavaScript findet die Felder nicht über die WEBSALE-Tags, sondern über CSS-Klassen. Jede dieser Klassen entspricht einer Option im Funktionsaufruf.

HTML-Element	Klasse	Option im JavaScript
die Zeile beziehungsweise das Element in der Schleife	`direct_order_productLine`	fest vorgegeben
Mengeneingabefeld	`input_quantity`	`quantityClass`
Produktnummerneingabefeld	`input_number`	`productNumberClass`
Schaltfläche “Eingaben prüfen”	`checkProducts`	`checkButtonClass`
Anzeige des Produktnamens	`productName`	`productNameClass`
Schaltfläche “In den Warenkorb”	`removeReminder`	`removeClass`

{@PR-Data}
   <tr class="direct_order_productLine">
      <td>
         <input type="text" name="~PR-Quantity_Input~" value="~PR-Quantity~" class="input_quantity">
      </td>
      <td>
         <input type="text" name="~PR-Number_Input~" value="~PR-Number_Value~" class="input_number">
      </td>
      <td><span class="productName">~PR-Name~</span></td>
   </tr>
{/@PR-Data}

<input type="submit" name="~BT-DirectOrder_Check~" value="Eingaben prüfen" class="checkProducts">
<input type="submit" name="~BT-DirectOrder_Basket~" value="In den Warenkorb" class="removeReminder">

Die Klasse checkProducts gehört an jede Schaltfläche “Eingaben prüfen”. Wenn Sie mehrere davon im Formular haben, beispielsweise oben und unten, und eine davon vergessen, wird über diese Schaltfläche nichts gespeichert. Der Käufer verliert seine Eingaben dann genau dann, wenn er die falsche Schaltfläche erwischt hat.Arbeiten Sie nicht mit einer Tabelle, sondern beispielsweise mit div-Containern, dann bekommt das äußerste Element der Schleife die Klasse direct_order_productLine. Das JavaScript erkennt eine Produktzeile ausschließlich an dieser Klasse.

Schritt 4: Das JavaScript aufrufen

Der Aufruf gehört unterhalb des Formulars.

{CAT-Data}
   ...
{/CAT-Data}

<script type="text/javascript">
   $("#directorder").ws_product_reminder({
      sessionid: "~WS-SID~",
      numberIntoElements: false,
      quantityClass: "input_quantity",
      productNumberClass: "input_number",
      checkButtonClass: "checkProducts",
      productNameClass: "productName",
      removeClass: "removeReminder"
      {WS-OTP1(save)},cookieAction: "save"{/WS-OTP1(save)}
      {WS-OTP2},scrollPosition: ~WS-OTP2~{/WS-OTP2}
   });
</script>

Achten Sie auf die Kommas. Die letzte feste Option steht ohne Komma, die beiden bedingten Abschnitte bringen ihr Komma jeweils innerhalb der Sektion mit. Andersherum entsteht ein doppeltes oder ein überzähliges Komma, sobald eine der Sektionen nicht greift, und das JavaScript bricht mit einem Syntaxfehler ab. Das Formular funktioniert dann noch, die Zwischenspeicherung aber nicht.

Materialien: Übersicht aller Funktionsparameter des JavaScriptes

Produktnummer auf mehrere Felder aufteilen

Lange Produktnummern tippt man leichter in Blöcken. Aus 11129338 wird im Formular 11-1293-38, intern setzt WEBSALE V8s die Nummer wieder zusammen und sucht mit der ungegliederten Form. Diese Ausbaustufe setzt die Zwischenspeicherung aus dem vorigen Abschnitt voraus. Sie ist Teil desselben JavaScripts. Es gibt zwei Wege. Bei beiden ersetzen Sie den Aufruf aus Schritt 4 durch die hier gezeigte Variante.

	Standard-Methode	Erweiterte Methode
Zahl der Blöcke	fest drei	beliebig viele
Eingabefelder	erzeugt das JavaScript selbst	bauen Sie ins Template ein
Aufwand	ein geänderter Aufruf	Aufruf plus Template-Ergänzung

Standard-Methode

Das JavaScript teilt die Eingabe automatisch in drei Felder auf. Sie müssen dafür nichts ins Template einbauen.

<script type="text/javascript">
   $("#directorder").ws_product_reminder({
      sessionid: "~WS-SID~",
      productElementSeparator: "-",
      quantityClass: "input_quantity",
      productNumberClass: "input_number",
      checkButtonClass: "checkProducts",
      productNameClass: "productName",
      removeClass: "removeReminder"
      {WS-OTP1(save)},cookieAction: "save"{/WS-OTP1(save)}
      {WS-OTP2},scrollPosition: ~WS-OTP2~{/WS-OTP2}
   });
</script>

In productElementSeparator tragen Sie das Trennzeichen ein, das in Ihren Produktnummern verwendet wird.

Erweiterte Methode

Hier bestimmen Sie die Zahl der Blöcke selbst. Der Aufruf bekommt zwei zusätzliche Optionen.

<script type="text/javascript">
   $("#directorder").ws_product_reminder({
      sessionid: "~WS-SID~",
      numberIntoElements: true,
      generateElements: false,
      productElementSeparator: ".",
      quantityClass: "input_quantity",
      productNumberClass: "input_number",
      checkButtonClass: "checkProducts",
      productNameClass: "productName",
      removeClass: "removeReminder"
      {WS-OTP1(save)},cookieAction: "save"{/WS-OTP1(save)}
      {WS-OTP2},scrollPosition: ~WS-OTP2~{/WS-OTP2}
   });
</script>

generateElements: false sagt dem JavaScript, dass es die Felder nicht selbst erzeugen soll. Sie ergänzen sie stattdessen im Template direkt hinter dem Feld ~PR-Number_Input~, mit der Klasse input_number_part und dem Trennzeichen als Text dazwischen. Zwei Blöcke, beispielsweise 123.123:

<input type="text" name="~PR-Number_Input~" value="~PR-Number_Value~">
<input type="text" class="input_number_part">.<input type="text" class="input_number_part">

Drei Blöcke, beispielsweise 123.123.123:

<input type="text" name="~PR-Number_Input~" value="~PR-Number_Value~">
<input type="text" class="input_number_part">.<input type="text" class="input_number_part">.<input type="text" class="input_number_part">

Das ursprüngliche Feld ~PR-Number_Input~ bleibt stehen. Es nimmt die zusammengesetzte Nummer auf und wird an den Shop übergeben. Die Teilfelder sind reine Eingabehilfe und tragen deshalb auch keinen name. Materialien: Übersicht aller Funktionsparameter des JavaScriptes

Varianten-Produktnummern

Gibt der Käufer eine vollständige Varianten-Produktnummer ein, zeigt der Shop ihm standardmäßig genau diese Variante an. Das ist meist das Gewünschte: Er weiß, was er will, und bekommt es. Alternativ können Sie stattdessen das Basisprodukt mit den Auswahllisten anzeigen lassen. Der Käufer muss seine Kombination dann noch einmal selbst wählen.

<DirectOrder>
   ...
   ShowBaseProductsAtDirectOrderInput-Allow = no
   ...
</DirectOrder>

Wert	Verhalten bei Eingabe einer Varianten-Produktnummer
`no`	die gewählte Variante wird angezeigt
`yes`	das Basisprodukt mit Auswahllisten wird angezeigt

yes ist dann sinnvoll, wenn Ihre Varianten-Produktnummern im Katalog nicht vollständig abgedruckt sind oder wenn Käufer erfahrungsgemäß die Nummer der falschen Ausführung eintippen. Der Umweg über die Auswahlliste kostet einen Klick, verhindert aber Fehlbestellungen. Referenz: Abschnitt DirectOrder

Alternative Produktnummern

Käufer tippen nicht immer die Nummer ein, die Sie im Kopf haben. Sie tippen die EAN vom Etikett, die Nummer aus dem Katalog des Vorjahres oder Ihre eigene Lieferantennummer. Mit alternativen Produktnummern findet der Shop das Produkt trotzdem. Eingegeben wird alles in dasselbe Feld. Der Shop durchsucht die von Ihnen festgelegten Produktfelder nach der eingegebenen Zeichenfolge und zeigt das gefundene Produkt an. Eine Freischaltung ist dafür nicht nötig.

Schritt 1: Die Produktdaten pflegen

Tragen Sie die alternativen Nummern in den entsprechenden Produktfeldern ein. Möglich sind bis zu fünf alternative Nummern je Produkt, AltNumber1 bis AltNumber5.

Schritt 2: Die Suchfelder festlegen

<DirectOrder>
   ...
   NumberSearchFields = Number,AltNumber1,AltNumber2,AltNumber3,AltNumber4,AltNumber5
   Notify8-Txt        = Die eingegebene Produktnummer konnte nicht gefunden werden.
   ...
</DirectOrder>

Parameter	Bedeutung
`NumberSearchFields`	die Felder, in denen gesucht wird, durch Komma getrennt
`Notify8-Txt`	die Meldung, wenn in einem Alternativfeld nichts gefunden wurde

Die Reihenfolge in NumberSearchFields ist die Suchreihenfolge. Der Shop geht die Felder von links nach rechts durch und hört beim ersten Treffer auf. Steht dieselbe Zeichenfolge bei zwei verschiedenen Produkten in unterschiedlichen Feldern, gewinnt das Feld, das weiter vorn steht. Setzen Sie Number deshalb an den Anfang.

Für die beiden Fälle gibt es zwei verschiedene Meldungen. Notify3-Txt greift, wenn die Suche im Feld Number erfolglos bleibt, Notify8-Txt bei den Alternativfeldern. Wenn Sie die Alternativsuche nutzen, formulieren Sie Notify8-Txt so, dass der Käufer nicht an der Produktnummer zweifelt, obwohl er die EAN eingegeben hat. Die eingegebenen alternativen Nummern lassen sich auch anzeigen, beispielsweise auf der Produktdetailseite oder im Warenkorb, und ein Produkt lässt sich über eine alternative Nummer gezielt laden. Referenz: Abschnitt DirectOrder · PR-AltNumber1…5 · BASKET-PR-AltNumber1…5 · PR-LoadData()

Wegweiser

Grundintegration

Schritt 1: Den Abschnitt `<DirectOrder>` anlegen

Schritt 2: Das Template zuweisen

Schritt 3: Den Link einbauen

Schritt 4: Das Template erstellen

Eingaben während der Sitzung halten

Schritt 1: Die JavaScript-Datei einbinden

Schritt 2: Die Übergabeparameter ergänzen

Schritt 3: Die Klassen vergeben

Schritt 4: Das JavaScript aufrufen

Produktnummer auf mehrere Felder aufteilen

Standard-Methode

Erweiterte Methode

Varianten-Produktnummern

Alternative Produktnummern

Schritt 1: Die Produktdaten pflegen

Schritt 2: Die Suchfelder festlegen

Verwandte Themen

​Grundintegration

​Schritt 1: Den Abschnitt <DirectOrder> anlegen

​Schritt 2: Das Template zuweisen

​Schritt 3: Den Link einbauen

​Schritt 4: Das Template erstellen

​Eingaben während der Sitzung halten

​Schritt 1: Die JavaScript-Datei einbinden

​Schritt 2: Die Übergabeparameter ergänzen

​Schritt 3: Die Klassen vergeben

​Schritt 4: Das JavaScript aufrufen

​Produktnummer auf mehrere Felder aufteilen

​Standard-Methode

​Erweiterte Methode

​Varianten-Produktnummern

​Alternative Produktnummern

​Schritt 1: Die Produktdaten pflegen

​Schritt 2: Die Suchfelder festlegen

​Verwandte Themen

Grundintegration

Schritt 1: Den Abschnitt `<DirectOrder>` anlegen

Schritt 2: Das Template zuweisen

Schritt 3: Den Link einbauen

Schritt 4: Das Template erstellen

Eingaben während der Sitzung halten

Schritt 1: Die JavaScript-Datei einbinden

Schritt 2: Die Übergabeparameter ergänzen

Schritt 3: Die Klassen vergeben

Schritt 4: Das JavaScript aufrufen

Produktnummer auf mehrere Felder aufteilen

Standard-Methode

Erweiterte Methode

Varianten-Produktnummern

Alternative Produktnummern

Schritt 1: Die Produktdaten pflegen

Schritt 2: Die Suchfelder festlegen

Verwandte Themen