Abhängige Varianten per AJAX nachladen

Wählt der Käufer eine abhängige Variante, wird die Produktseite normalerweise neu geladen. Mit AJAX tauschen Sie stattdessen nur die betroffenen Bereiche aus. Der Käufer verliert seine Position auf der Seite nicht, und während des Ladens lässt sich eine Ladeanzeige einblenden.

Diese Funktion verwendet AJAX- und Layertechnik und steht deshalb nur zur Verfügung, wenn der Käufer JavaScript aktiviert hat. Ist es deaktiviert, wird die Seite wie gewohnt neu aufgebaut. Ihr Template muss also in beiden Zuständen funktionieren.Vorausgesetzt wird außerdem die WEBSALE JavaScript-Systembibliothek ab Version 1.1.0.

Funktionsweise

Der Ablauf ist bei beiden Darstellungsarten derselbe. Ein Klick auf die Auswahlliste oder den Link einer abhängigen Variante ruft eine JavaScript-Funktion auf. Diese startet die AJAX-Kommunikation und unterbindet den Neuaufbau der Seite. Vorher läuft eine Funktion der Design-Komponente, in der Sie beispielsweise einen Layer mit einer Wartegrafik einblenden. Kommt keine Antwort zustande, etwa bei abgebrochener Internetverbindung, läuft eine andere Funktion der Design-Komponente. Dort blenden Sie die Ladegrafik wieder aus und stattdessen einen Hinweis ein. Bei Erfolg nimmt WEBSALE V8s die Anfrage an und liefert die neuen Inhalte. Damit die Systembibliothek weiß, welche Teile der Seite sie ersetzen soll, definieren Sie im Produkttemplate Austauschbereiche.

<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>

Der Aufbau folgt einer festen Regel: Jeder Bereich beginnt mit dem Präfix WS-Ajax- und steht direkt in einem div mit derselben ID. Die ID wählen Sie frei. Bei einem AJAX-Aufruf schreibt die Systembibliothek den Inhalt jedes Bereichs in den div mit der passenden ID. Sie können damit mehrere Stellen der Seite auf einmal austauschen. Die Klammerung ST-Ajax um die Bereichsmarken sorgt dafür, dass diese nur bei einem AJAX-Aufruf ausgegeben werden. Beim normalen Aufruf des Produkts blieben sie sonst sichtbar im Quelltext stehen.

Prüfen Sie JavaScript, das innerhalb dieser div-Container läuft oder sich auf Elemente darin bezieht. Nach einem AJAX-Aufruf verhält es sich unter Umständen anders. Einige Funktionen, allen voran document.write(), lassen sich innerhalb eines solchen Bereichs gar nicht verwenden.

Setzen Sie die Tracking-Schnittstelle zusammen mit dieser Funktion ein, beachten Sie die dortigen Hinweise zu AJAX-basierten Funktionen. Da kein vollständiger Seitenaufbau stattfindet, greifen Tracking-Aufrufe sonst nicht.Wegweiser: Beschreibung der Tracking-Schnittstelle

Integration

Das Produkttemplate erweitern Sie in sechs Schritten. Nur der zweite Schritt unterscheidet sich danach, ob Sie die Varianten als Auswahllisten oder als Links darstellen.

Schritt 1: Systembibliothek einbinden

Binden Sie im <head> des Templates die Systembibliothek samt Design-Komponente ein.

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

Schritt 2: Auslöser einbauen

Hier trennen sich die beiden Darstellungsarten. Bei Auswahllisten legen Sie im <head> die Funktion SubmitSelection() an, die von der Auswahlliste über onchange aufgerufen wird. Sie übergibt die ID des Produktformulars und den Zeichensatz.

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

Bei Links brauchen Sie keine eigene Funktion. Stattdessen ergänzen Sie an jedem Variantenlink ein onClick, das ws_AJAXPRLink() mit dem Ziel des Links und dem Zeichensatz aufruft.

{@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}

Für jede weitere abhängige Variante wiederholen Sie den Block mit der nächsthöheren Nummer. Das href bleibt in beiden Fällen erhalten, damit der Link ohne JavaScript weiterhin funktioniert.

Schritt 3: Container für Meldungen anlegen

Diese drei Container werden per JavaScript ein- und ausgeblendet und informieren den Käufer über den Zustand seiner Aktion. Legen Sie sie mit position: fixed über die Seite, damit sie unabhängig von der Scrollposition sichtbar sind.

<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>

Die drei Container decken drei verschiedene Fälle ab: das Warten, den Kommunikationsfehler und die vom Shop gemeldete nicht mehr verfügbare Auswahl.

Schritt 4: Produktformular mit eindeutiger ID versehen

Die Funktion aus Schritt 2 spricht das Formular über seine ID an. Ohne sie findet sie die gewählten Werte nicht.

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

Schritt 5: Austauschbereiche festlegen

Tauschen Sie den gesamten Bereich aus, in 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 -->

Vier Punkte entscheiden darüber, ob der Austausch funktioniert:Die Anfangs- und Endemarken der AJAX-Bereiche gehören in eine ST-Ajax-Klammerung.Das Formular mit der Action FORM-Product muss innerhalb eines ausgetauschten Bereichs liegen. Sonst zeigt das Formular nach dem Nachladen noch auf die alte Variante.Die Anfangs- und Endemarken stehen unmittelbar nach beziehungsweise vor den zugehörigen div-Containern.JavaScript innerhalb der Austauschbereiche oder mit Bezug auf Elemente darin muss getestet und gegebenenfalls angepasst werden.

Schritt 6: Funktionen in der Design-Komponente füllen

Die Systembibliothek ruft vier Funktionen auf, die in der Design-Komponente liegen. Dort hinterlegen Sie Ihre Ein- und Ausblendungen oder weitere Effekte. Die Voreinstellung sieht so aus:

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

// Läuft, bevor die AJAX-Anfrage abgesetzt wird, beispielsweise für eine Ladeanzeige
function ws_AJAXPRStart()
{
        // Fehler- und Infocontainer ausblenden, Ladecontainer einblenden
        $('#pr_ajax_com_error').hide();
        $('#pr_ajax_error').fadeOut();
        $('#pr_ajax_wait').fadeIn();
}

// Läuft, wenn die Varianten-Kombination geladen werden konnte
function ws_AJAXPRResponseSuccess()
{
        // Ladecontainer ausblenden
        $('#pr_ajax_wait').fadeOut();
}

// Läuft, wenn die Varianten-Kombination nicht geladen werden konnte
// Hier lässt sich die von WEBSALE V8s erzeugte Fehlermeldung ausgeben
function ws_AJAXPRResponseError()
{
        // Ladecontainer ausblenden, Hinweismeldung einblenden
        $('#pr_ajax_wait').fadeOut();
        $('#pr_ajax_error').show();
}

// Läuft, wenn die AJAX-Kommunikation fehlgeschlagen ist,
// beispielsweise bei unterbrochener Internetverbindung
function ws_AJAXPRError()
{
        // Ladecontainer ausblenden, Kommunikationsfehler einblenden
        $('#pr_ajax_wait').fadeOut();
        $('#pr_ajax_com_error').show();
}

Die beiden letzten Funktionen decken verschiedene Fälle ab. ws_AJAXPRResponseError greift, wenn der Shop geantwortet und dabei einen Fehler gemeldet hat, etwa weil die gewählte Kombination nicht mehr verfügbar ist. ws_AJAXPRError greift, wenn gar keine Antwort zustande kam.

Tag	Bedeutung
`ST-Ajax`	Der Bereich erscheint nur, wenn der Aufruf eine AJAX-Anfrage war
`WS-Ajax-"ID"`	Austauschbereich, dessen Inhalt in den `div` mit derselben ID geschrieben wird

Wegweiser

Abhängige Varianten per AJAX nachladen

Funktionsweise

Integration

Schritt 1: Systembibliothek einbinden

Schritt 2: Auslöser einbauen

Schritt 3: Container für Meldungen anlegen

Schritt 4: Produktformular mit eindeutiger ID versehen

Schritt 5: Austauschbereiche festlegen

Schritt 6: Funktionen in der Design-Komponente füllen

Tags

Verwandte Themen

​Funktionsweise

​Integration

​Schritt 1: Systembibliothek einbinden

​Schritt 2: Auslöser einbauen

​Schritt 3: Container für Meldungen anlegen

​Schritt 4: Produktformular mit eindeutiger ID versehen

​Schritt 5: Austauschbereiche festlegen

​Schritt 6: Funktionen in der Design-Komponente füllen

​Tags

​Verwandte Themen

Funktionsweise

Integration

Schritt 1: Systembibliothek einbinden

Schritt 2: Auslöser einbauen

Schritt 3: Container für Meldungen anlegen

Schritt 4: Produktformular mit eindeutiger ID versehen

Schritt 5: Austauschbereiche festlegen

Schritt 6: Funktionen in der Design-Komponente füllen

Tags

Verwandte Themen