Funktionsweise der AJAX-Integration

Mit einem beliebigen Klick, z. B. auf einen Reiter/Tab oder Link, wird ein JavaScript aufgerufen. Dieses startet die AJAX-Kommunikation und verhindert, dass eine Folgeseite im Browser des Kunden geladen wird. Stattdessen wird eine Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann z. B. ein Layer eingeblendet werden, welcher beispielsweise eine "Bitte warten"-Grafik beinhaltet.

Wegweiser: Produktempfehlungsfunktion konventionell

Wegweiser: Templates und Tags für Produktempfehlung

Tritt bei der AJAX-Kommunikation ein Fehler auf (z. B. weil die Internetverbindung des Kunden nicht mehr besteht), wird eine andere Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann z. B. der Layer mit der Ladegrafik wieder ausgeblendet und ein Informationslayer eingeblendet werden.

Die AJAX-Anfrage wird bei erfolgreicher Kommunikation von WEBSALE V8s angenommen und bearbeitet. Es wird das Template der Funktion "Produkt weiterempfehlen" zurückgegeben, auf dem Template kann durch Tags unterschieden werden, ob die Anfrage mit AJAX oder als normaler Aufruf ausgeführt wurde.
Alle Templates, welche mit AJAX-Technik verwendet werden, haben einen besonderen Aufbau:

<WS-Ajax-ID1>
   ....
</WS-Ajax-ID1>
<WS-Ajax-ID2>
   ....
</WS-Ajax-ID2>

Das Template ist in beliebig viele dieser WS-Ajax-Sektionen eingeteilt, die alle mit dem Präfix "WS-Ajax-" beginnen. Die anschließende ID können Sie frei wählen. Bei einem AJAX-Aufruf wird durch die WEBSALE JavaScript-Systembibliothek automatisch der Inhalt jeder Sektion in den div-Container mit der entsprechenden ID geladen. Hierdurch können mehrere Inhalte automatisch getauscht werden, z. B. kann die Anzahl an Produkten auf der Merkliste dynamisch aktualisiert werden.
Abhängig vom Erfolg wird eine Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann z. B. der Layer mit der Ladegrafik aus- und die Erfolgs- bzw. Fehlermeldung von WEBSALE V8s in einem anderen Layer eingeblendet werden. Ebenso können weitere JavaScript-basierte Effekte erzeugt werden.

Wenn Templates sowohl mit AJAX- als auch normalen Aufrufen verwendet werden, sollten die entsprechenden AJAX-Bestandteile geklammert werden, damit diese bei normalen Aufrufen nicht angezeigt werden:

{ST-Ajax}
  <WS-Ajax-ID1>
{/ST-Ajax}
    ....
{ST-Ajax}
  </WS-Ajax-ID1>
{/ST-Ajax}
 
{ST-Ajax}
  <WS-Ajax-ID2>
{/ST-Ajax}
    ....
{ST-Ajax}
  </WS-Ajax-ID2>
{/ST-Ajax}

In einem der Inhaltssektionen muss das Formular mit den Eingabefeldern der Funktion "Produkt weiterempfehlen" enthalten sein. Mit einem Klick auf den Button "Produkt weiterempfehlen" wird ein JavaScript aufgerufen. Dieses startet die AJAX-Kommunikation und verhindert, dass eine Folgeseite im Browser des Kunden geladen wird. Die AJAX-Kommunikation erfolgt hier analog zur Einbindung des Formulars. Trat bei der Eingabe des Kunden ein Fehler auf, so wird das Template von "Produkt weiterempfehlen" erneut zurückgegeben. Konnte das Produkt erfolgreich weiterempfohlen werden, so wird das Bestätigungstemplate der Funktion "Produkt weiterempfehlen" zurückgegeben.

Anpassung des Templates der Funktion "Produkt weiterempfehlen"

Sie müssen das Template für "Produkt weiterempfehlen" (Template ProductRecmd) in 3 Schritten erweitern:

1. Legen Sie die AJAX-Sektion fest

Sie benötigen auf dem Template für "Produkt weiterempfehlen" (Template ProductRecmd) eine Sektion, welche das Eingabeformular enthält, wenn das Template bei einem AJAX-Aufruf verwendet wird. Sie können hierzu entweder eine eigene mit ST-Ajax geklammerte Sektion anlegen oder nur die für die AJAX-Technik benötigten Bestandteile klammern:

...
 
<!-- AJAX-Bestandteile klammern -->
{ST-Ajax}
  <!-- Definition des AJAX-Inhaltsbereichs -->
  <WS-AJAX-ws_prodrecmd_content>
{/ST-Ajax}
 
  <!-- Inhaltsbereich Eingabeformular für Produkt weiterempfehlen -->
  ...
 
  ...
 
<!-- AJAX-Bestandteile klammern -->
{ST-Ajax}
  <!-- Ende Definition des AJAX-Inhaltsbereichs -->
  </WS-AJAX-ws_prodrecmd_content>
{/ST-Ajax}
 
...

 

2. Vergeben Sie der Form eine eindeutige ID

Vergeben Sie auf dem Template für "Produkt weiterempfehlen" (Template ProductRecmd) der Form eine eindeutige ID. Diese wird benötigt, wenn das Template mit AJAX-Technik verwendet wird:

...
  <form action="~FORM-ProdRecmd~" id="ws_prod_recmd_form">
...

 

3. Versehen Sie die Schaltfläche "Produkt weiterempfehlen" mit einem JavaScript-onClick-Event

Fügen Sie auf dem Template für "Produkt weiterempfehlen" (Template ProductRecmd) ein JavaScript-onClick-Event ein, wenn das Template mit AJAX-Technik verwendet wird:

...
 
<!-- AJAX: Button mit onClick event versehen -->
{ST-Ajax}
  <input type="submit" value="absenden" onclick="return ws_AJAXsendProductRecmd('ws_prod_recmd_form', '~WS-Charset~');">
{/ST-Ajax}
 
<!-- Nicht AJAX: Button ohne onClick-Event sowie Button für Popup schließen -->
{!ST-Ajax}
  <input type="submit" value="absenden">
  <a href="javascript:window.close();">Fenster schließen</a>
{/!ST-Ajax}
 
...

 

Anpassung des Bestätigungs-Templates der Funktion "Produkt weiterempfehlen"

Sie müssen das Bestätigungs-Template für "Produkt weiterempfehlen" (Template ProductRecmdConfirm) in 1 Schritt erweitern:

1. AJAX-Sektion festlegen

Sie benötigen auf dem Bestätigungs-Template für "Produkt weiterempfehlen" (Template ProductRecmdConfirm) eine Sektion, welche die Bestätigung enthält, wenn das Template bei einem AJAX-Aufruf verwendet wird. Sie können hierzu entweder eine eigene mit ST-Ajax geklammerte Sektion anlegen oder nur die für die AJAX-Technik benötigten Bestandteile klammern:

...
 
<!-- AJAX-Bestandteile klammern -->
{ST-Ajax}
  <!-- Definition des AJAX-Inhaltsbereichs -->
  <WS-AJAX-ws_prodrecmd_content>
{/ST-Ajax}
 
  <!-- Inhaltsbereich: Meldung vielen Dank dass Sie dieses Produkt weiterempfohlen haben -->
  ...
 
  ...
 
<!-- AJAX-Bestandteile klammern -->
{ST-Ajax}
  <!-- Ende Definition des AJAX-Inhaltsbereichs -->
  </WS-AJAX-ws_prodrecmd_content>
{/ST-Ajax}
 
...

Integration in ein beliebiges Template

Sie müssen das (Produkt-)Template von dem aus Sie ein Produkt per AJAX auf die Merkliste legen möchten in 4 Schritten erweitern:

1. Einbinden der benötigten JavaScripts im Headbereich des Templates

<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.0.js"></script>
<script type="text/javascript" src="../js/ws-design-1.8.0.js"></script>

Damit binden Sie die WEBSALE JavaScript-Systembibliothek ein.
Die Designkomponente ist in den Beispielen (s.u.) enthalten.

2. Legen Sie div-Container für Inhalts-, Informations- und Fehleranzeigen an

<div id="ws_prodrecmd_loading" style="display:none;">
   <!-- AJAX-Anfrage für Einbindung oder Absenden läuft, Ladegrafik anzeigen. -->
</div>
 
<div id="ws_prodrecmd_error" style="display:none;">
    Fehler bei AJAX-Kommunikation. 
</div>
 
<div id="ws_prodrecmd_content">
    <!-- In diesen Container wird das Formular bzw. die Bestätigung eingesetzt -->
</div>

Diese Container werden je nach Bedarf per JavaScript eingeblendet, der Inhalt ggf. ausgetauscht und informieren den Käufer über den Zustand seiner Aktion.

3. JavaScript-onClick-Event zum Nachladen des Formulars auf ein beliebiges HTML-Element legen

Legen Sie auf ein JavaScript-onClick-Event auf das HTML-Element, welches das Nachladen des Formulars der Funktion "Produkt weiterempfehlen" auslösen soll.
Dies kann zum Beispiel ein Link oder ein Reiter bzw. Tab sein:

<a href="" onclick="return ws_AJAXloadProductRecmd('~WS-JSEncoding($WS-ProductRecmdLink$)~','~WS-Charset~');">

4. Fügen Sie die gewünschten JavaScript-Effekte in den dazugehörigen Funktionen ein

Dies erfolgt in der Designkomponente der WEBSALE JavaScript-Systembibliothek, die folgendermaßen voreingestellt ist:

//Diese Funktion wird aufgerufen bevor die AJAX-Anfrage zum Nachladen der Eingabefelder abgesetzt wird.
//Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
function ws_AJAXloadProductRecmdStart()
{
  //Ausblenden von Inhalts- und Fehlercontainer, einblenden des Ladecontainers
  $('#ws_prodrecmd_error').hide();
  $('#ws_prodrecmd_content').hide();
  $('#ws_prodrecmd_loading').show();
}
 
//Diese Funktion wird aufgerufen wenn das Nachladen der Eingabefelder erfolgreich war
function ws_AJAXloadProductRecmdResponseSuccess()
{
  //Ausblenden von Lade- und Fehlercontainer, einblenden des Inhaltcontainers
  $('#ws_prodrecmd_error').hide();
  $('#ws_prodrecmd_loading').hide();
  $('#ws_prodrecmd_content').show();
}
 
//Diese Funktion wird aufgerufen wenn das Nachladen der Eingabefehler nicht erfolgreich war
function ws_AJAXloadProductRecmdResponseError()
{
  //Ausblenden von Lade- und Inhaltscontainer, einblenden des Fehlercontainers
  $('#ws_prodrecmd_error').hide();
  $('#ws_prodrecmd_loading').hide();
  $('#ws_prodrecmd_content').show();
}
 
//Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
//Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z. B. wenn die Internetverbindung unterbrochen wurde) anzeigen
function ws_AJAXloadProductRecmdError()
{
  //Ausblenden von Lade- und Inhaltscontainer, einblenden des Fehlercontainers
  $('#ws_prodrecmd_loading').hide();
  $('#ws_prodrecmd_content').hide();
  $('#ws_prodrecmd_error').show();
}
 
//Diese Funktion wird aufgerufen bevor die AJAX-Anfrage zum Absenden der Produkt weiterempfehlen Funktion abgesetzt wird
//Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
function ws_AJAXsendProductRecmdStart()
{  
  //Ausblenden von Inhalts- und Fehlercontainer, einblenden des Ladecontainers
  $('#ws_prodrecmd_error').hide();
  $('#ws_prodrecmd_content').hide();
  $('#ws_prodrecmd_loading').show();
}
 
//Diese Funktion wird aufgerufen wenn das Absenden der Produkt-weiterempfehlen Funktion erfolgreich war
function ws_AJAXsendProductRecmdResponseSuccess()
{
  //Ausblenden von Lade- und Fehlercontainer, einblenden des Inhaltcontainers
  $('#ws_prodrecmd_error').hide();
  $('#ws_prodrecmd_loading').hide();
  $('#ws_prodrecmd_content').show();
}
 
//Diese Funktion wird aufgerufen wenn das Absenden der Produkt weiterempfehlen nicht erfolgreich war
function ws_AJAXsendProductRecmdResponseError()
{
  //Ausblenden von Lade- und Inhaltscontainer, einblenden des Fehlercontainers
  $('#ws_prodrecmd_loading').hide();
  $('#ws_prodrecmd_content').hide();
  $('#ws_prodrecmd_error').show();
}
 
//Diese Funktion wird aufgerufen wenn die AJAX-Kommunikation fehlschlug
//Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z. B. wenn die Internetverbindung unterbrochen wurde) anzeigen
function ws_AJAXsendProductRecmdError()
{
  //Ausblenden von Lade- und Inhaltscontainer, einblenden des Fehlercontainers
  $('#ws_prodrecmd_loading').hide();
  $('#ws_prodrecmd_content').hide();
  $('#ws_prodrecmd_error').show();
}

Referenz: WEBSALE JavaScript-Systembibliothek

Tags

{ST-Ajax}: Sektion wird angezeigt, wenn die Anfrage eine AJAX-Anfrage war
Referenz: ST-Ajax

Tracking-Schnittstelle

Wenn Sie die Trackingschnittstelle in Verbindung mit dieser Funktion verwenden wollen, beachten Sie bitte die Hinweise in Bezug auf AJAX-basierte Funktionen:

Wegweiser: Beschreibung der Tracking-Schnittstelle