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

# Abhängige Varianten per AJAX nachladen

> Wie Sie in WEBSALE V8s die Auswahl abhängiger Varianten per AJAX nachladen, sodass die Produktseite beim Variantenwechsel nicht neu aufgebaut wird.

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.

> [!WARNING]
>
> 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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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`](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation#die-tags-im-uberblick) 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.

> [!WARNING]
>
> 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.

> [!NOTE]
>
> 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](https://dokumentation.websale.de/v8s/materialien/materialien-tracking-schnittstelle.md)

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

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

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

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

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

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

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

> [!WARNING]
>
> 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:

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

## Tags

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

## Verwandte Themen

* Wegweiser: [Abhängige Varianten als Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md)
* Wegweiser: [Abhängige Varianten als Links darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
* Wegweiser: [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)
* Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)


## Related topics

- [Abhängige Varianten als Tabelle darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-tabelle-darstellen.md)
- [Abhängige Varianten als Auswahllisten darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-auswahllisten.md)
- [Abhängige Varianten als Links darstellen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-links-darstellen.md)
- [Abhängige Varianten als grafische Ansicht anzeigen](https://dokumentation.websale.de/v8s/abhaengige-varianten/abhaengige-varianten-als-grafische-ansicht-anzeigen.md)
- [Set-Produkte mit fester Zusammenstellung](https://dokumentation.websale.de/v8s/set-produkte/set-produkte-mit-fester-zusammenstellung.md)


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