Informationsseiten per AJAX nachladen
Mittels AJAX können beliebige Inhalte, beispielsweise von Informationsseiten, nachgeladen und dynamisch in die aktuelle Shop-Seite einfügt werden. Hierdurch werden die entsprechenden Informationen erst dann geholt, wenn sie benötigt werden, ohne die komplette Seite neu aufzubauen.
In diesem Beispiel wird ein Teil der bestehenden Informationsseite der AGB durch Klick auf einen Link per AJAX nachgeladen. Dieser Link wird auf der Produktdetailansicht (ws_product.htm) integriert. Die Informationsseite wird so angepasst, dass diese sowohl per AJAX nachgeladen als auch weiterhin "normal" (ohne AJAX-Verlinkung) aufgerufen werden kann.
Allgemeine Informationen zur Funktionsweise von AJAX-Integrationen finden Sie unter
Wegweiser: AJAX-Funktionen
Voraussetzung
Es existiert eine Informationsseite, die unter dem Dateinamen "tpl_agb.htm" in Ihrem Templateverzeichnis, z. B. benutzer/templates/translation, gespeichert ist.
Schritt 1: WEBSALE System Bibliothek und WEBSALE Design-Komponente
Binden Sie zuerst die WEBSALE JavaScript-Systembibliothek inklusive Designkomponente in die Produktdetailansicht (ws_product.htm) ein. Wenn Sie diese bereits eingebunden haben, achten Sie bitte darauf, mindestens die Version 1.8.1 zu verwenden.
...
<head>
...
<script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
<script type="text/javascript" src="../<Ihr Verzeichnis>/ws-design-1.8.3.js"></script>
...
</head>
...
Materialien: WEBSALE JavaScript-Bibliothek
Schritt 2: AJAX-Verlinkung zur Informationsseite AGB auf der Produktdetailansicht (ws_product.htm)
Platzieren Sie einen Link und legen Sie ein JavaScript-onClick-Event auf diesen Link, wodurch das Nachladen der AGB ausgelöst wird:
<a onclick="return ws_AJAXloadTemplate('~WS-LoadTpl(tpl_agb.htm)~', '~WS-Charset~', ws_AJAXloadAGBsStart, ws_AJAXloadAGBsError,
'ws_AJAXloadAGBsResponseSuccess()', 'ws_AJAXloadAGBsResponseError()');">
AGBs anzeigen
</a>
Referenz: WS-LoadTpl()
Referenz: WS-Charset
Wegweiser: Syntaxerklärung der onClick-Funktion des Links
Schritt 3:. Anzeigebereiche auf der Produktdetailansicht (ws_product.htm) festlegen
Es werden 3 Anzeigebereiche benötigt, in denen jeweils eine Ladeanzeige "Bitte warten", die Fehleranzeige und der Inhalt der AGB angezeigt werden. Diese Anzeigebereiche können je nach Bedarf per JavaScript eingeblendet und deren Inhalt ggf. ausgetauscht werden.
<div id="ws_agbs_loading" style="display:none;">
<!-- AJAX-Anfrage für Einbindung läuft, Ladegrafik anzeigen. -->
<img src="loading.gif" alt="loading">
</div>
<div id="ws_agbs_error" style="display:none;">
<!-- Die AJAX-Kommunikation konnte nicht durchgeführt werden -->
Fehler bei AJAX-Kommunikation.
</div>
<div id="ws_agbs_content">
<!-- In diesen Container werden die AGBs eingesetzt -->
</div>
Wegweiser: Funktionsweise von WEBSALE AJAX-Integrationen
Schritt 4: Benötigte JavaScript-Funktionen in die Designkomponente einfügen
Erstellen Sie die im Schritt 3 angegebenen JavaScript-Funktionen in der Designkomponente der WEBSALE JavaScript-Systembibliothek:
..
//Diese Funktion wird aufgerufen, bevor die AJAX-Anfrage zum Nachladen der AGB abgesetzt wird.
//Mit dieser Funktion wird eine Ladeanzeige realisiert
function ws_AJAXloadAGBsStart()
{
//Ausblenden von Inhalts- und Fehlercontainer, Einblenden des Ladecontainers
$('#ws_agbs_error').hide();
$('#ws_agbs_content').hide();
$('#ws_agbs_loading').show();
}
//Diese Funktion wird aufgerufen, wenn das Nachladen der AGB erfolgreich war
function ws_AJAXloadAGBsResponseSuccess()
{
//Ausblenden von Lade- und Fehlercontainer, Einblenden des Inhaltscontainers
$('#ws_agbs_error').hide();
$('#ws_agbs_loading').hide();
$('#ws_agbs_content').show();
}
//Diese Funktion wird aufgerufen, wenn das Nachladen der AGB nicht erfolgreich war
function ws_AJAXloadAGBsResponseError()
{
//Ausblenden von Lade- und Fehlercontainers, Einblenden des Inhaltscontainer
$('#ws_agbs_error').hide();
$('#ws_agbs_loading').hide();
$('#ws_agbs_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_AJAXloadAGBsError()
{
//Ausblenden von Lade- und Inhaltscontainer, Einblenden des Fehlercontainers
$('#ws_agbs_loading').hide();
$('#ws_agbs_content').hide();
$('#ws_agbs_error').show();
}
...
Wegweiser: Funktionsweise von WEBSALE AJAX-Integrationen
Materialien: WEBSALE JavaScript-Bibliothek
Schritt 5: Erstellen der WS-Ajax-Sektionen auf der Informationsseite AGB
Legen Sie um den Inhalt, den Sie auf der Produktdetailansicht (ws_product.htm) anzeigen möchten, eine entsprechende WS-Ajax-Sektion für die WEBSALE-Systembibliothek. Klammern Sie die WS-Ajax-Klammerungen mit {ST-Ajax}, damit diese nicht angezeigt werden, wenn das Template über einen Link (siehe Schritt 6) aufgerufen wird:
...
{ST-Ajax}
<!-- Anfang des per AJAX nachgeladenen Bereichs -->
<WS-Ajax-ws_agbs_content>
{/ST-Ajax}
Hier stehen Ihre AGBs
...
{ST-Ajax}
<!-- Ende des per AJAX nachgeladenen Bereichs -->
</WS-Ajax-ws_agbs_content>
{/ST-Ajax}
...
Referenz: WS-Ajax-ID
Referenz: ST-Ajax
Wegweiser: Funktionsweise von WEBSALE AJAX-Integrationen
Schritt 6: Verlinkung zur Informationsseite AGB ohne AJAX
Die Informationsseite wurde in Schritt 5 so angepasst, dass die Inhalte auch ohne eine AJAX-Verlinkung angezeigt werden können, d. h. die Seite kann weiterhin normal aufgerufen werden. Integrieren Sie dafür zum Beispiel einen Link im Footer Ihrer Seite.
...
<a href="~WS-LoadTpl(tpl_agb.htm,Allgemeine Geschäftsbedingungen)~">AGBs anzeigen</a>
...
Referenz: WS-LoadTpl()