Abhängige Varianten per AJAX nachladen

Sie können die Auswahl der abhängigen Varianten per AJAX nachladen lassen. Voraussetzung ist, das der Käufer in seinem Browser JavaScript aktiviert hat. Mit der AJAX-Technik können bestimmte Teilbereiche einer Seite aktualisiert werden, ohne dass die gesamte Seite neu geladen werden muss. Zudem kann eine dynamische Ladeanzeige in den DIV-Containern angezeigt werden.

Hinweis:

Diese Funktion verwendet AJAX- und Layertechnik. Deshalb ist dieses Feature nur verfügbar, wenn der Käufer in seinem Browser JavaScript aktiviert hat. Ist JavaScript nicht aktiviert, wird die Seite neu aufgebaut. Zur Realisierung der Techniken wird die WEBSALE JavaScript-Systembibliothek (mindestens Version 1.1.0) vorausgesetzt. Näheres zu dieser Systembibliothek entnehmen Sie bitte der Referenz.

Referenz: WEBSALE JavaScript Systembibliothek

Funktionsweise

Mit einem Klick auf die Selectbox oder den Link einer abhängigen Variante wird ein JavaScript aufgerufen. Dieses startet die AJAX-Kommunikation und verhindert, dass die Produktseite neu geladen wird. Hierzu wird eine Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann ein Layer eingeblendet werden, welcher z. B. eine "bitte warten"-Grafik beinhaltet.

Tritt bei der AJAX-Kommunikation ein Fehler auf (z. B. weil die Internetverbindung des Käufers 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. Auf dem Produkttemplate müssen dabei die Bereiche, die ausgetauscht werden sollen, definiert sein:

...
   <div id="ID1">
      {ST-Ajax}<WS-Ajax-ID1>{/ST-Ajax}
      ....
      {ST-Ajax}</WS-Ajax-ID1>{/ST-Ajax}
   </div>
...
   <div id="id2>
      {ST-Ajax}<WS-Ajax-ID2>{/ST-Ajax}
      ....
      {ST-Ajax}</WS-Ajax-ID2>{/ST-Ajax}
   </div>
...

Das Template enthält beliebig viele dieser Bereiche, die alle mit dem Präfix "WS-Ajax-" beginnen und direkt in einem div-Container mit der zugehörigen ID enthalten sind. Die ID können Sie frei wählen. Bei einem AJAX-Aufruf wird durch die WEBSALE JavaScript-Systembibliothek automatisch der Inhalt jedes Bereichs in den div-Container mit der entsprechenden ID geladen. Hierdurch können mehrere Inhalte automatisch ausgetauscht werden.

Abhängig vom Erfolg wird eine Funktion der Designkomponente der WEBSALE JavaScript-Systembibliothek aufgerufen. Dort kann z. B. der Layer mit der Ladegrafik ausgeblendet werden. Ebenso können weitere JavaScript-basierte Effekte verwendet werden.

Die Bereichsklammerung durch das Tag ST-Ajax bewirkt, dass die Elemente mit dem Präfix "WS-Ajax" nicht angezeigt werden, wenn das Template bei der Anzeige des Produkts verwendet wird, sondern nur, wenn eine abhängige Variante per AJAX nachgeladen wird.

Achtung:

Werden innerhalb dieser div-Container JavaScripts ausgeführt, so muss geprüft werden, ob diese nach einem AJAX-Aufruf korrekt funktionieren! Einige JavaScript-Funktionen – z. B. document.write() – können NICHT innerhalb eines solchen Bereichs verwendet werden!

Integration

Wenn Sie das dynamische Nachladen per AJAX integrieren, können Sie die abhängigen Varianten entweder in Auswahllisten oder als Links darstellen lassen. Beide Design-Möglichkeiten werden im Folgenden beschrieben.

Hinweis:

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

Darstellung abhängiger Varianten in Auswahllisten

Das Produkt-Template muss in sechs Schritten erweitert werden:

Schritt 1: Einbinden der benötigten JavaScripts im Head-Bereich des Templates

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

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

Schritt 2: Anlegen bzw. Anpassen der JavaScript-Funktion "SubmitSelection()" im Head-Bereich des Templates

Dies bewirkt eine AJAX-Anfrage und die Seite wird nicht neu geladen wenn der Besteller eine abhängige Variante wählt.

<head>
...
<script type="text/javascript">
function SubmitSelection()
{
   return ws_AJAXPR('productform', '~WS-CharSet~');
}
</script>
...
</head>

Schritt 3: div-Container für Informations- und Fehlermeldungen anlegen

Diese Container werden je nach Bedarf per JavaScript eingeblendet und informieren den Kunden über den Zustand seiner Aktion. Die Container sollten "über" die Seite gelegt werden, damit sie stets sichtbar sind - wie im folgenden Beispiel gezeigt. 

 <div id="pr_ajax_wait" style="display:none; left: 50%; position: fixed; top: 200px; margin-left:150px; width: 300px; height: 100px;">
	AJAX start, Ladegrafik anzeigen.
</div>

<div id="pr_ajax_com_error" style="background-color: red; display:none; left: 50%; position: fixed; top: 200px; margin-left:150px; width: 300px; height: 100px;">
    Fehler bei AJAX-Kommunikation.
    <br>
    <a onclick="javascript:$('#pr_ajax_com_error').hide(); return false;" href="">schliessen</a>
</div>

<div id="pr_ajax_error" style="background-color: red; display:none; left: 50%; position: fixed; top: 200px; margin-left:150px; width: 300px; height: 100px;">
    Ihre Auswahl ist nicht mehr verfügbar.
    <br>
    <a onclick="javascript:$('#pr_ajax_error').hide(); return false;" href="">schliessen</a>
</div>

Schritt 4: Eindeutige ID für die Produkt-Form vergeben

<form action="~FORM-Product~" method="Post" name="product" id="productform">

Schritt 5: Bereiche auf dem Produkt-Template festlegen, die per AJAX ausgetauscht werden sollen

Sie sollten den gesamten Bereich austauschen, auf dem das Produkt dargestellt wird - also den zentralen Bereich der Seite.

...
<div id="productcontainer">
{ST-Ajax}<WS-Ajax-productcontainer>{/ST-Ajax}
...
     <form action="~FORM-Product~" method="Post" name="product" id="productform">
...
{ST-Ajax}</WS-Ajax-productcontainer>{/ST-Ajax}
</div> <!-- schliesst den Container mit der ID productcontainer -->
... 

Achtung:

- Die Anfangs- und Endekennungen der AJAX-Bereiche sollten durch das Tag ST-Ajax geklammert sein.

- Die Form mit der Action FORM-Product muss sich innerhalb eines Bereichs befinden, der ausgetauscht wird.

- Die Anfangs- und Ende-Kennungen der AJAX-Bereiche sollten unmittelbar nach bzw. vor den zugehörigen DIV-Containern stehen.

- JavaScript-Funktionalitäten bzw. JavaScripts, die innerhalb der AJAX-Bereiche ausgeführt werden oder sich auf Elemente innerhalb der AJAX-Bereiche beziehen, müssen getestet und ggf. angepasst werden.

Schritt 6: Gewünschte JavaScript-Effekte in den zugehörigen Funktionen einfügen

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


//////////////////////////////////////////////////////////////////////////////////////////
//    Modul: "Abhängige Varianten per AJAX nachladen"                                   //
//////////////////////////////////////////////////////////////////////////////////////////

//Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
//Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
function ws_AJAXPRStart()
{
        //Blendet die Fehler- und Infocontainer aus sowie den Ladecontainer ein
        $('#pr_ajax_com_error').hide();
        $('#pr_ajax_error').fadeOut();
        $('#pr_ajax_wait').fadeIn();
}

//Diese Funktion wird aufgerufen, wenn eine abhängige Variantenkombination geladen werden konnte
//Blendet nur den Ladecontainer aus
function ws_AJAXPRResponseSuccess()
{
        //Blendet den Ladecontainer aus
        $('#pr_ajax_wait').fadeOut();
}

//Diese Funktion wird aufgerufen, wenn eine abhängige Variantenkombination NICHT geladen werden konnte
//Mit dieser Funktion laesst sich die von WEBSALE V8s erzeugte Fehlermeldung ausgeben

function ws_AJAXPRResponseError()
{
        //Blendet den Ladecontainer aus und die Hinweismeldung ein
        $('#pr_ajax_wait').fadeOut();
        $('#pr_ajax_error').show();
}

//Diese Funktion wird aufgerufen, wenn die AJAX-Kommunikatino fehlschlug
//Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler anzeigen
//(z.B. wenn die Internetverbindung unterbrochen wurde)
{
        //Blendet den Ladecontainer aus und den AJAX-Fehlercontainer ein
        $('#pr_ajax_wait').fadeOut();
        $('#pr_ajax_com_error').show();
}

Wegweiser: Abhängige Varianten als Auswahllisten darstellen

Materialien: WEBSALE JavaScript Systembibliothek

Darstellung abhängiger Varianten als Links

Das Produkt-Template muss in sechs Schritten erweitert werden:

Schritt 1: Einbinden der benötigten JavaScripts im Head-Bereich des Templates

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

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

Schritt 2: Anlegen der JavaScript-Funktion zum Nachladen der abhängigen Varianten auf die Links der Varianten

Dies bewirkt eine AJAX-Anfrage und die Seite wird nicht neu geladen, wenn der Besteller eine Link zu einer abhängige Variante anklickt.

...
  {@PR-DepVariationOption1}
    ...
    <a href="~PR-DepVariationOptionLink1~" onClick="return ws_AJAXPRLink('~PR-DepVariationOptionLink1~', '~WS-CharSet~');">
    ...
  {/@PR-DepVariationOption1}

...

  {@PR-DepVariationOption2}
    ...
    <a href="~PR-DepVariationOptionLink2~" onClick="return ws_AJAXPRLink('~PR-DepVariationOptionLink2~', '~WS-CharSet~');">
    ...
  {/@PR-DepVariationOption2}

...

  {@PR-DepVariationOption3}
    ...
    <a href="~PR-DepVariationOptionLink3~" onClick="return ws_AJAXPRLink('~PR-DepVariationOptionLink3~', '~WS-CharSet~');">
    ...
  {/@PR-DepVariationOption3}
  
...

Schritt 3: div-Container für Informations- und Fehlermeldungen anlegen

Diese Container werden je nach Bedarf per JavaScript eingeblendet und informieren den Kunden über den Zustand seiner Aktion. Die Container sollten "über" die Seite gelegt werden, damit sie stets sichtbar sind - wie im folgenden Beispiel gezeigt. 

 <div id="pr_ajax_wait" style="display:none; left: 50%; position: fixed; top: 200px; margin-left:150px; width: 300px; height: 100px;">
	AJAX start, Ladegrafik anzeigen.
</div>

<div id="pr_ajax_com_error" style="background-color: red; display:none; left: 50%; position: fixed; top: 200px; margin-left:150px; width: 300px; height: 100px;">
    Fehler bei AJAX-Kommunikation.
    <br>
    <a onclick="javascript:$('#pr_ajax_com_error').hide(); return false;" href="">schliessen</a>
</div>

<div id="pr_ajax_error" style="background-color: red; display:none; left: 50%; position: fixed; top: 200px; margin-left:150px; width: 300px; height: 100px;">
    Ihre Auswahl ist nicht mehr verfügbar.
    <br>
    <a onclick="javascript:$('#pr_ajax_error').hide(); return false;" href="">schliessen</a>
</div>

Schritt 4: Eindeutige ID für die Produkt-Form vergeben

<form action="~FORM-Product~" method="Post" name="product" id="productform">

Schritt 5: Bereiche auf dem Produkt-Template festlegen, die per AJAX ausgetauscht werden sollen

Sie sollten den gesamten Bereich austauschen, auf dem das Produkt dargestellt wird - also den zentralen Bereich der Seite.

...
<div id="productcontainer">
{ST-Ajax}<WS-Ajax-productcontainer>{/ST-Ajax}
...
     <form action="~FORM-Product~" method="Post" name="product" id="productform">
...
{ST-Ajax}</WS-Ajax-productcontainer>{/ST-Ajax}
</div> <!-- schliesst den Container mit der ID productcontainer -->
... 

Achtung:

- Die Anfangs- und Endekennungen der AJAX-Bereiche sollten durch das Tag ST-Ajax geklammert sein.

- Die Form mit der Action FORM-Product muss sich innerhalb eines Bereichs befinden, der ausgetauscht wird.

- Die Anfangs- und Ende-Kennungen der AJAX-Bereiche sollten unmittelbar nach bzw. vor den zugehörigen DIV-Containern stehen.

- JavaScript-Funktionalitäten bzw. JavaScripts, die innerhalb der AJAX-Bereiche ausgeführt werden oder sich auf Elemente innerhalb der AJAX-Bereiche beziehen, müssen getestet und ggf. angepasst werden.

Schritt 6: Gewünschte JavaScript-Effekte in den zugehörigen Funktionen einfügen

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


//////////////////////////////////////////////////////////////////////////////////////////
//    Modul: "Abhängige Varianten per AJAX nachladen"                                   //
//////////////////////////////////////////////////////////////////////////////////////////

//Diese Funktion wird aufgerufen bevor die AJAX-Anfrage abgesetzt wird.
//Mit dieser Funktion ist zum Beispiel eine Ladeanzeige realisierbar
function ws_AJAXPRStart()
{
        //Blendet die Fehler- und Infocontainer aus sowie den Ladecontainer ein
        $('#pr_ajax_com_error').hide();
        $('#pr_ajax_error').fadeOut();
        $('#pr_ajax_wait').fadeIn();
}

//Diese Funktion wird aufgerufen, wenn eine abhängige Variantenkombination geladen werden konnte
//Blendet nur den Ladecontainer aus
function ws_AJAXPRResponseSuccess()
{
        //Blendet den Ladecontainer aus
        $('#pr_ajax_wait').fadeOut();
}

//Diese Funktion wird aufgerufen, wenn eine abhängige Variantenkombination NICHT geladen werden konnte
//Mit dieser Funktion laesst sich die von WEBSALE V8s erzeugte Fehlermeldung ausgeben

function ws_AJAXPRResponseError()
{
        //Blendet den Ladecontainer aus und die Hinweismeldung ein
        $('#pr_ajax_wait').fadeOut();
        $('#pr_ajax_error').show();
}

//Diese Funktion wird aufgerufen, wenn die AJAX-Kommunikatino fehlschlug
//Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler anzeigen
//(z.B. wenn die Internetverbindung unterbrochen wurde)
{
        //Blendet den Ladecontainer aus und den AJAX-Fehlercontainer ein
        $('#pr_ajax_wait').fadeOut();
        $('#pr_ajax_com_error').show();
}

Wegweiser: Abhängige Varianten als Links darstellen

Materialien: WEBSALE JavaScript Systembibliothek

Tags

{ST-Ajax}: Der Bereich wird angezeigt, wenn der Aufruf eine AJAX-Anfrage war

Referenz: ST-Ajax