> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Informationsseiten per AJAX nachladen

> Durchgängiges Beispiel: Wie Sie den Inhalt der AGB-Seite per AJAX in die Produktdetailansicht nachladen, ohne die Seite neu aufzubauen.

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](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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~`](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik#die-tags-im-uberblick). So bleibt der Aufruf auch dann korrekt, wenn ein Subshop mit einem anderen Zeichensatz arbeitet.

Referenz: [WS-LoadTpl()](https://dokumentation.websale.de/v8s/referenz/tags/ws/includes-templates-css-und-js.md)

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.

```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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()


## Related topics

- [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)
- [Abhängige Varianten per AJAX nachladen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md)
- [Formulare per AJAX nachladen und absenden](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-per-ajax-nachladen-und-absenden.md)
- [Produkte einer Kategorie](https://dokumentation.websale.de/v8s/kategorien/produkte-einer-kategorie.md)
- [E-NL- (Seitenzustände und Meldungen)](https://dokumentation.websale.de/v8s/referenz/tags/e-nl/seitenzustaende-und-meldungen.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.