Formulare per AJAX nachladen und absenden

Ein Anfrageformular muss nicht auf einer eigenen Seite liegen. Mit AJAX laden Sie es per Klick in die Seite nach, auf der der Kunde gerade steht, und senden es von dort ab, ohne die Seite zu verlassen. Das Beispiel zeigt ein Formular “Frage zum Produkt”, das von der Produktdetailansicht aus nachgeladen wird. Das Verfahren ist aber nicht auf INQUIRY beschränkt, es gilt für jedes Template, das Sie per WS-ExternInclude() einbinden. Das Formular-Template wird so gebaut, dass es beide Wege verträgt. Es lässt sich weiterhin über einen normalen Link aufrufen, auch wenn im Browser kein JavaScript läuft. Wegweiser: AJAX-Funktionen

Ausgangslage

Es gibt ein Template page_inquiry.htm, das per Link von der Produktdetailansicht ws_product.htm erreichbar ist.

<a href="~PR-DepVarLink~&tpl=page_inquiry.htm">Frage zum Produkt stellen</a>

Auf page_inquiry.htm steckt das Formular:

~WS-ExternInclude(https://ihre-domain.de/cgi/inquiry4.cgi?inq4=ihre-shopid&ini=anfrage.config)~

Der Parameter PR-DepVarLink sorgt dafür, dass die Daten des angefragten Produkts an das Formular übergeben werden. Ohne ihn weiß das Formular nicht, worauf sich die Frage bezieht. Referenz: WS-ExternInclude()

Schritt 1: Die JavaScript-Bibliothek einbinden

Binden Sie im Kopfbereich der Produktdetailansicht die WEBSALE Systembibliothek und die zugehörige Designkomponente ein. Ist sie bereits eingebunden, muss sie mindestens in Version 1.8.1 vorliegen.

<script src="/$WS/ws_sysdata/js/ws-system-1.8.1.js"></script>
<script src="../js/ws-design-1.8.1.js"></script>

Materialien: WEBSALE JavaScript-Bibliothek Wegweiser: Einbinden neuer JavaScript-Dateien

Schritt 2: Die drei Container anlegen

Legen Sie auf der Produktdetailansicht drei Bereiche an. Das Skript blendet immer genau einen davon ein.

<div id="ws_inq_loading" style="display:none;">
   <img src="loading.gif" alt="Wird geladen">
</div>

<div id="ws_inq_error" style="display:none;">
   Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.
</div>

<div id="ws_inq_content">
   <!-- hierhin wird das Formular geladen -->
</div>

Der Inhaltscontainer trägt denselben Namen wie die AJAX-Klammerung in Schritt 5. Über diesen Namen findet das Skript die Stelle, an die der nachgeladene Inhalt gehört.

Schritt 3: Den auslösenden Link setzen

<a href="" onclick="return ws_AJAXloadTemplate(
      '~PR-DepVarLink~&tpl=page_inquiry.htm',
      '~WS-Charset~',
      ws_AJAXloadInqStart,
      ws_AJAXloadInqError,
      'ws_AJAXloadInqResponseSuccess()',
      'ws_AJAXloadInqResponseError()');">
   Frage zum Produkt stellen
</a>

Die ersten beiden Rückruffunktionen werden ohne Anführungszeichen übergeben, die letzten beiden als Zeichenkette mit Klammern. Das ist kein Versehen, sondern von der Bibliothek so vorgesehen.

Schritt 4: Die vier Rückruffunktionen schreiben

Diese Funktionen gehören in die Designkomponente der Systembibliothek, nicht in die Bibliothek selbst.

// vor dem Absetzen der Anfrage: Ladeanzeige einblenden
function ws_AJAXloadInqStart() {
   $('#ws_inq_error').hide();
   $('#ws_inq_content').hide();
   $('#ws_inq_loading').show();
}

// Nachladen erfolgreich
function ws_AJAXloadInqResponseSuccess() {
   $('#ws_inq_error').hide();
   $('#ws_inq_loading').hide();
   $('#ws_inq_content').show();
}

// Formular kam mit Eingabefehlern zurück
function ws_AJAXloadInqResponseError() {
   $('#ws_inq_error').hide();
   $('#ws_inq_loading').hide();
   $('#ws_inq_content').show();
}

// die Verbindung selbst ist fehlgeschlagen
function ws_AJAXloadInqError() {
   $('#ws_inq_loading').hide();
   $('#ws_inq_content').hide();
   $('#ws_inq_error').show();
}

Die dritte Funktion blendet denselben Container ein wie die zweite. Das ist Absicht: Ein Formular mit Eingabefehlern ist kein Verbindungsfehler, der Kunde soll seine Eingaben mit den Fehlermeldungen sehen. Nur die vierte Funktion zeigt den Fehlercontainer.

Nachladen und Absenden verwenden in diesem Beispiel dieselben vier Funktionen. Wenn Sie für die beiden Vorgänge unterschiedliche Effekte wollen, brauchen Sie zwei getrennte Sätze von Funktionen.

Schritt 5: Den nachzuladenden Bereich klammern

Legen Sie auf page_inquiry.htm um den Bereich, der in den Container soll, eine AJAX-Klammerung. Die Marken selbst werden zusätzlich mit ST-Ajax geklammert, damit sie beim normalen Aufruf über einen Link nicht im Quelltext landen.

{ST-Ajax}
   <WS-Ajax-ws_inq_content>
{/ST-Ajax}

~WS-ExternInclude(https://ihre-domain.de/cgi/inquiry4.cgi?inq4=ihre-shopid&ini=anfrage.config)~

{ST-Ajax}
   </WS-Ajax-ws_inq_content>
{/ST-Ajax}

Der Name in der Marke muss genau der Container-ID aus Schritt 2 entsprechen. Stimmt er nicht überein, bleibt der Container leer, ohne dass eine Fehlermeldung erscheint.

Schritt 6: Dem Formular eine eindeutige ID geben

<form action="~FORM-Template(page_inquiry.htm)~" method="POST" id="inq_form">

Schritt 7: Das Absenden per AJAX auslösen

Legen Sie auf die Absende-Schaltfläche ein Ereignis. Weil die Schaltfläche beim normalen Aufruf anders aussehen muss als beim AJAX-Aufruf, gibt es sie zweimal.

{!ST-Ajax}
   <input type="submit" name="absenden" value="Frage zum Produkt absenden">
{/!ST-Ajax}

{ST-Ajax}
   <input type="submit" name="absenden" value="Frage zum Produkt absenden"
          onclick="return ws_AJAXsendFormTemplate(
             'inq_form',
             '~WS-Charset~',
             ws_AJAXloadInqStart,
             ws_AJAXloadInqError,
             'ws_AJAXloadInqResponseSuccess()',
             'ws_AJAXloadInqResponseError()');">
{/ST-Ajax}

ST-Ajax greift, wenn die laufende Anfrage eine AJAX-Anfrage war. Die verneinte Form !ST-Ajax greift beim normalen Seitenaufruf. Damit trägt ein Template beide Wege, ohne dass Sie es doppelt pflegen müssen.

Der erste Parameter ist die Formular-ID aus Schritt 6. Weicht sie ab, sendet die Funktion nichts, und der Kunde klickt ins Leere.

Referenz: ST-Ajax · WEBSALE JavaScript Systembibliothek

Tracking

Setzen Sie die Tracking-Schnittstelle ein, beachten Sie deren Hinweise zu AJAX-basierten Funktionen. Ein per AJAX nachgeladener Bereich löst keinen Seitenaufruf aus und wird deshalb ohne Zutun nicht gezählt. Wegweiser: Beschreibung der Tracking-Schnittstelle

​Ausgangslage

​Schritt 1: Die JavaScript-Bibliothek einbinden

​Schritt 2: Die drei Container anlegen

​Schritt 3: Den auslösenden Link setzen

​Schritt 4: Die vier Rückruffunktionen schreiben

​Schritt 5: Den nachzuladenden Bereich klammern

​Schritt 6: Dem Formular eine eindeutige ID geben

​Schritt 7: Das Absenden per AJAX auslösen

​Tracking

​Verwandte Themen

Ausgangslage

Schritt 1: Die JavaScript-Bibliothek einbinden

Schritt 2: Die drei Container anlegen

Schritt 3: Den auslösenden Link setzen

Schritt 4: Die vier Rückruffunktionen schreiben

Schritt 5: Den nachzuladenden Bereich klammern

Schritt 6: Dem Formular eine eindeutige ID geben

Schritt 7: Das Absenden per AJAX auslösen

Tracking

Verwandte Themen