Informationsseiten per AJAX nachladen

Diese Seite führt eine AJAX-Integration einmal vollständig durch. Als Beispiel dient die AGB-Seite, deren Inhalt per Klick in die Produktdetailansicht nachgeladen wird. Die Seite ist danach weiterhin auch normal aufrufbar, also ohne AJAX. Der Nutzen: Die AGB werden erst geholt, wenn ein Kunde sie sehen möchte. Die Produktdetailansicht muss dafür nicht neu aufgebaut werden, der Kunde verliert seine Position auf der Seite nicht. Diese Seite setzt voraus, dass Sie den allgemeinen Ablauf einer AJAX-Integration kennen, insbesondere die Rolle der vier JavaScript-Funktionen. Wegweiser: AJAX-Funktionen

Voraussetzungen

In Ihrem Templateverzeichnis, beispielsweise benutzer/templates/translation, existiert bereits eine Informationsseite unter dem Dateinamen tpl_agb.htm. Der Aufbau besteht aus sechs Schritten. Die Schritte 1 bis 4 betreffen die Produktdetailansicht ws_product.htm und die Design-Komponente, die Schritte 5 und 6 die AGB-Seite selbst.

Schritt 1: Systembibliothek und Design-Komponente einbinden

Binden Sie die WEBSALE JavaScript-Systembibliothek samt Design-Komponente in die Produktdetailansicht ws_product.htm ein. Haben Sie das bereits getan, prüfen Sie die Version. Sie muss mindestens 1.8.1 sein, weil die AJAX-Funktionen erst ab dieser Version enthalten sind.

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

Materialien: WEBSALE JavaScript-Bibliothek

Schritt 2: AJAX-Link auf der Produktdetailansicht anlegen

Platzieren Sie auf ws_product.htm den Link, der das Nachladen auslöst. Das onclick-Ereignis ruft ws_AJAXloadTemplate auf, das return davor verhindert, dass der Browser zusätzlich dem Link folgt. Die vier hier genannten Funktionsnamen legen Sie in Schritt 4 an. Die Namen sind frei wählbar, sie müssen nur an beiden Stellen übereinstimmen.

<a onclick="return ws_AJAXloadTemplate('~WS-LoadTpl(tpl_agb.htm)~', '~WS-Charset~', ws_AJAXloadAGBsStart, ws_AJAXloadAGBsError,
   'ws_AJAXloadAGBsResponseSuccess()', 'ws_AJAXloadAGBsResponseError()');">
   AGBs anzeigen
</a>

Den Zeichensatz übergeben Sie nicht fest, sondern über das Tag ~WS-Charset~. So bleibt der Aufruf auch dann korrekt, wenn ein Subshop mit einem anderen Zeichensatz arbeitet. Referenz: WS-LoadTpl()

Schritt 3: Anzeigebereiche auf der Produktdetailansicht festlegen

Sie brauchen drei Bereiche: einen für die Ladeanzeige, einen für die Fehlermeldung und einen für die AGB selbst. Lade- und Fehlerbereich starten versteckt, weil sie erst durch die JavaScript-Funktionen eingeblendet werden.

<div id="ws_agbs_loading" style="display:none;">
   <!-- AJAX-Anfrage laeuft, Ladegrafik anzeigen -->
   <img src="loading.gif" alt="loading">
</div>

<div id="ws_agbs_error" style="display:none;">
   <!-- Die AJAX-Kommunikation konnte nicht durchgefuehrt werden -->
   Fehler bei AJAX-Kommunikation.
</div>

<div id="ws_agbs_content">
   <!-- In diesen Container werden die AGB eingesetzt -->
</div>

Wichtig ist die ID ws_agbs_content. Nur dieser Bereich wird von der Systembibliothek automatisch befüllt, und zwar aus der gleichnamigen WS-Ajax-Sektion der AGB-Seite aus Schritt 5. Lade- und Fehlerbereich sind reine Anzeigeelemente Ihres Templates und haben auf der AGB-Seite keine Entsprechung.

Schritt 4: JavaScript-Funktionen in der Design-Komponente anlegen

Legen Sie die vier in Schritt 2 genannten Funktionen in der Design-Komponente der WEBSALE JavaScript-Systembibliothek an. Jede von ihnen schaltet lediglich zwischen den drei Bereichen um.

// Läuft, bevor die AJAX-Anfrage abgesetzt wird, und blendet die Ladeanzeige ein
function ws_AJAXloadAGBsStart()
{
  $('#ws_agbs_error').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_loading').show();
}

// Läuft, wenn das Nachladen erfolgreich war, und zeigt den nachgeladenen Inhalt
function ws_AJAXloadAGBsResponseSuccess()
{
  $('#ws_agbs_error').hide();
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').show();
}

// Läuft, wenn WEBSALE V8s einen Fehler zurückgegeben hat, beispielsweise ein nicht gefundenes Template
function ws_AJAXloadAGBsResponseError()
{
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_error').show();
}

// Läuft, wenn die AJAX-Kommunikation fehlgeschlagen ist, beispielsweise bei unterbrochener Internetverbindung
function ws_AJAXloadAGBsError()
{
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_error').show();
}

Die beiden letzten Funktionen sehen gleich aus, decken aber verschiedene Fälle ab. ws_AJAXloadAGBsError greift, wenn der Shop gar nicht geantwortet hat. ws_AJAXloadAGBsResponseError greift, wenn er geantwortet und dabei einen Fehler gemeldet hat. Wenn Sie den Kunden unterschiedlich informieren möchten, setzen Sie hier zwei verschiedene Meldungen ein.

Schritt 5: WS-Ajax-Sektion auf der AGB-Seite anlegen

Umschließen Sie auf tpl_agb.htm den Inhalt, der in der Produktdetailansicht erscheinen soll, mit einer WS-Ajax-Sektion. Der Name der Sektion setzt sich aus dem Präfix WS-Ajax- und der ID des Anzeigebereichs aus Schritt 3 zusammen. Die Sektionsmarken selbst klammern Sie mit {[ST-Ajax](/v8s/referenz/tags/st/seitenzustand-und-navigation#die-tags-im-uberblick)}. Ohne diese Klammerung stünden sie bei einem normalen Aufruf der AGB-Seite sichtbar im Quelltext.

{ST-Ajax}
   <!-- Anfang des per AJAX nachgeladenen Bereichs -->
   <WS-Ajax-ws_agbs_content>
{/ST-Ajax}

Hier stehen Ihre AGB
...

{ST-Ajax}
   <!-- Ende des per AJAX nachgeladenen Bereichs -->
   </WS-Ajax-ws_agbs_content>
{/ST-Ajax}

Referenz: WS-Ajax-”ID”

Schritt 6: Link zur AGB-Seite ohne AJAX

Durch die Klammerung aus Schritt 5 bleibt die AGB-Seite auch ohne AJAX vollständig nutzbar. Das ist keine Kür, sondern nötig: Ist im Browser des Kunden JavaScript deaktiviert, ist dieser Weg der einzige. Integrieren Sie dafür einen gewöhnlichen Link, beispielsweise im Footer.

<a href="~WS-LoadTpl(tpl_agb.htm,Allgemeine Geschäftsbedingungen)~">AGBs anzeigen</a>

Die Bedeutung der einzelnen Parameter von WS-LoadTpl() finden Sie in der Referenz. Referenz: WS-LoadTpl()

​Voraussetzungen

​Schritt 1: Systembibliothek und Design-Komponente einbinden

​Schritt 2: AJAX-Link auf der Produktdetailansicht anlegen

​Schritt 3: Anzeigebereiche auf der Produktdetailansicht festlegen

​Schritt 4: JavaScript-Funktionen in der Design-Komponente anlegen

​Schritt 5: WS-Ajax-Sektion auf der AGB-Seite anlegen

​Schritt 6: Link zur AGB-Seite ohne AJAX