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

# Loading information pages via AJAX

> End-to-end example: how to load the content of the terms and conditions page into the product detail view via AJAX without rebuilding the page.

This page walks through an AJAX integration end to end. The example uses the terms and conditions page, whose content is loaded into the product detail view via a click. The page remains normally accessible afterwards, that is, without AJAX.

The benefit: the terms and conditions are only fetched when a customer wants to see them. The product detail view does not have to be rebuilt for this, and the customer does not lose their position on the page.

This page assumes that you know the general flow of an AJAX integration, in particular the role of the four JavaScript functions.

Guide: AJAX functions 

## Prerequisites

In your template directory, for example `benutzer/templates/translation`, an information page already exists under the file name `tpl_agb.htm`.

The setup consists of six steps. Steps 1 to 4 concern the product detail view `ws_product.htm` and the design component; steps 5 and 6 concern the terms and conditions page itself.

## Step 1: Include the system library and design component

Include the WEBSALE JavaScript system library together with its design component in the product detail view `ws_product.htm`. If you have already done so, check the version. It must be at least 1.8.1, because the AJAX functions are only included from this version onwards.

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

Materials: WEBSALE JavaScript library&#x20;

## Step 2: Create the AJAX link on the product detail view

Place the link on `ws_product.htm` that triggers the load. The `onclick` event calls `ws_AJAXloadTemplate`; the `return` in front prevents the browser from additionally following the link.

The four function names mentioned here you create in step 4. The names are freely chosen, they just have to match in both places.

```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()');">
   Show terms and conditions
</a>
```

The character set is not passed as a fixed value, but via the `~WS-Charset~` tag. This way, the call remains correct even if a subshop works with a different character set.

Reference: WS-LoadTpl()&#x20;

## Step 3: Set up display areas on the product detail view

You need three areas: one for the loading indicator, one for the error message, and one for the terms and conditions themselves. The loading and error areas start hidden, because they are only shown by the JavaScript functions.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="ws_agbs_loading" style="display:none;">
   <!-- AJAX request in progress, show loading graphic -->
   <img src="loading.gif" alt="loading">
</div>

<div id="ws_agbs_error" style="display:none;">
   <!-- The AJAX communication could not be carried out -->
   Error in AJAX communication.
</div>

<div id="ws_agbs_content">
   <!-- The terms and conditions are inserted into this container -->
</div>
```

The important ID is `ws_agbs_content`. Only this area is automatically filled by the system library, specifically from the WS-Ajax section of the same name on the terms and conditions page from step 5. The loading and error areas are pure display elements of your template and have no counterpart on the terms and conditions page.

## Step 4: Create JavaScript functions in the design component

Create the four functions named in step 2 in the design component of the WEBSALE JavaScript system library. Each of them simply switches between the three areas.

```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// Runs before the AJAX request is sent and shows the loading indicator
function ws_AJAXloadAGBsStart()
{
  $('#ws_agbs_error').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_loading').show();
}

// Runs when the load was successful and shows the loaded content
function ws_AJAXloadAGBsResponseSuccess()
{
  $('#ws_agbs_error').hide();
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').show();
}

// Runs when WEBSALE V8s returned an error, for example a template that was not found
function ws_AJAXloadAGBsResponseError()
{
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_error').show();
}

// Runs when the AJAX communication failed, for example when the internet connection is interrupted
function ws_AJAXloadAGBsError()
{
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_error').show();
}
```

The last two functions look the same but cover different cases. `ws_AJAXloadAGBsError` takes effect when the shop did not respond at all. `ws_AJAXloadAGBsResponseError` takes effect when it responded and reported an error. If you want to inform the customer differently, insert two different messages here.

## Step 5: Create a WS-Ajax section on the terms and conditions page

On `tpl_agb.htm`, wrap the content that is to appear in the product detail view with a WS-Ajax section. The name of the section consists of the prefix `WS-Ajax-` and the ID of the display area from step 3.

Wrap the section markers themselves with `{ST-Ajax}`. Without this bracketing, they would appear visibly in the source code on a normal call to the terms and conditions page.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Ajax}
   <!-- Start of the area loaded via AJAX -->
   <WS-Ajax-ws_agbs_content>
{/ST-Ajax}

Your terms and conditions go here
...

{ST-Ajax}
   <!-- End of the area loaded via AJAX -->
   </WS-Ajax-ws_agbs_content>
{/ST-Ajax}
```

Reference: WS-Ajax-"ID"&#x20;

## Step 6: Link to the terms and conditions page without AJAX

Thanks to the bracketing from step 5, the terms and conditions page remains fully usable without AJAX. This is not optional but necessary: if JavaScript is disabled in the customer's browser, this route is the only one.

For this, integrate a normal link, for example in the footer.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-LoadTpl(tpl_agb.htm,Terms and conditions)~">Show terms and conditions</a>
```

The meaning of the individual parameters of `WS-LoadTpl()` can be found in the reference.

Reference: WS-LoadTpl()&#x20;


## Related topics

- [AJAX functions](https://dokumentation.websale.de/en/v8s/templates/ajax-funktionen.md)
- [E-NL- (Page states and messages)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-nl/seitenzustaende-und-meldungen.md)
- [Reload dependent variants via AJAX](https://dokumentation.websale.de/en/v8s/abhaengige-varianten/abhaengige-varianten-per-ajax-nachladen.md)
- [Reload and submit forms via AJAX](https://dokumentation.websale.de/en/v8s/formulare-fuer-kundenanfragen/formulare-per-ajax-nachladen-und-absenden.md)
- [Search & search result page](https://dokumentation.websale.de/en/ws-search/integration-in-die-templates-storefront/suche-suchergebnisseite.md)


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