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

# Produkt per AJAX in den Warenkorb legen

> Wie Käufer in WEBSALE V8s Produkte in den Warenkorb legen, ohne die aktuelle Seite zu verlassen, und wie Sie Erfolgs- und Fehlermeldungen dabei selbst gestalten.

Standardmäßig landet der Käufer nach dem Klick auf „In den Warenkorb" auf der Warenkorbseite. Mit AJAX bleibt er stattdessen dort, wo er gerade ist, und bekommt die Rückmeldung in eingeblendeten Containern.

Der Unterschied fällt vor allem auf Kategorieseiten ins Gewicht. Wer mehrere Artikel aus einer Liste sammelt, will nicht nach jedem Klick zurücknavigieren, um den nächsten zu finden.

Die Funktion setzt aktiviertes JavaScript voraus. Ist es abgeschaltet, greift der gewöhnliche Weg und der Käufer landet auf der Warenkorbseite. Sie brauchen dafür nichts zusätzlich einzurichten, müssen den Warenkorb aber als funktionierende Rückfallebene mitdenken.

Vorausgesetzt wird außerdem die [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) ab Version 1.8.1.

## Wie die Funktion arbeitet

Der Klick auf die Schaltfläche ruft ein JavaScript auf. Dieses startet die AJAX-Kommunikation und unterbindet, dass der Browser die Warenkorbseite lädt. Stattdessen ruft es eine Funktion Ihrer Designkomponente auf, in der Sie beispielsweise eine Ladeanzeige einblenden.

Danach entscheidet das Ergebnis über das weitere Vorgehen:

| Ergebnis | Der Shop liefert | Aufgerufen wird |
| - | - | - |
| alle Produkte übernommen | das Erfolgs-Template | `ws_AJAXaddToBasketResponseSuccess()` |
| mindestens ein Produkt abgelehnt | das Fehler-Template | `ws_AJAXaddToBasketResponseError()` |
| keine Verbindung zustande gekommen | gar nichts | `ws_AJAXaddToBasketError()` |

Ein Produkt wird beispielsweise dann abgelehnt, wenn es nicht mehr verfügbar oder der Lagerbestand aufgebraucht ist.

### Der Aufbau der beiden Templates

Beide Templates sind in beliebig viele Bereiche eingeteilt. Deren Namen beginnen mit `WS-Ajax-` und enden mit einer frei gewählten, eindeutigen Kennzeichnung:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<WS-Ajax-ID1>
   ...
</WS-Ajax-ID1>

<WS-Ajax-ID2>
   ...
</WS-Ajax-ID2>
```

Die Bibliothek lädt den Inhalt jedes Bereichs automatisch in den `div`-Container mit der gleichnamigen ID auf Ihrer Seite. So tauschen Sie mit einem einzigen Aufruf mehrere Stellen gleichzeitig aus, beispielsweise die Erfolgsmeldung und den Kurzwarenkorb im Seitenkopf.

Innerhalb der AJAX-Templates klammern Sie mit `{[ST-AJAX](/v8s/referenz/tags/st/seitenzustand-und-navigation#die-tags-im-uberblick)}` Bereiche, die ausschließlich bei einem AJAX-Aufruf erscheinen sollen. Im Code heißt das Tag durchgängig `ST-AJAX` in Großschreibung.

## Schritt 1: Templates anlegen und zuweisen

Legen Sie zwei neue Templates an, eines für den Erfolgs- und eines für den Fehlerfall, und passen Sie beide Ihrem Design an.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   BasketAjaxSuccess = ws_basket_ajax_success.htm
   BasketAjaxError   = ws_basket_ajax_error.htm
</Templates>
```

Referenz: [Abschnitt Templates](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#templates)

## Schritt 2: Fehlermeldung hinterlegen

Diese Meldung erscheint, wenn der Käufer die Schaltfläche betätigt, ohne eine Auswahl oder eine Menge angegeben zu haben.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<NotifyMessages-Txt>
   NoBasketInput = Bitte geben Sie die gewünschte Menge ein oder treffen Sie eine Auswahl.
</NotifyMessages-Txt>
```

Referenz: [Abschnitt NotifyMessages-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/texte-und-meldungen.md#notifymessages-txt)

## Schritt 3: Bibliotheken einbinden

Beide Dateien gehören in den Kopfbereich des Templates, von dem aus der Käufer Produkte in den Warenkorb legt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   <script src="/$WS/ws_sysdata/js/ws-system-1.8.1.js"></script>
   <script src="/$WS/ws_sysdata/js/ws-design-1.8.1.js"></script>
</head>
```

Die erste Datei ist die Systembibliothek, die zweite die Designkomponente mit den Funktionen aus Schritt 7.

## Schritt 4: Container für die Meldungen anlegen

Vier Container decken die möglichen Zustände ab. Legen Sie sie ü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="AJAXInfo" class="ws-overlay" hidden>
   Einen Moment bitte.
</div>

<div id="AJAXError" class="ws-overlay" hidden>
   Die Verbindung zum Shop ist unterbrochen. Bitte versuchen Sie es erneut.
   <a href="#" onclick="$('#AJAXError').hide(); return false;">Schließen</a>
</div>

<div id="WK-Error" class="ws-overlay" hidden>
   Das Produkt konnte nicht in den Warenkorb gelegt werden.
</div>

<div id="WK-Info" class="ws-overlay" hidden>
   Das Produkt liegt im Warenkorb.
</div>
```

Die Gestaltung gehört in Ihr Stylesheet, nicht in die Attribute. Die Klasse `ws-overlay` übernimmt Positionierung und Aussehen.

Unterscheiden Sie die beiden Fehlerfälle auch in der Formulierung. „Das Produkt ist nicht mehr verfügbar" und „Die Verbindung ist unterbrochen" verlangen vom Käufer Unterschiedliches: einmal eine andere Wahl, einmal einen zweiten Versuch.

## Schritt 5: Formular mit einer ID versehen

Jedes Produktformular auf der Seite braucht eine eindeutige ID, denn das JavaScript spricht es darüber an.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" method="post" name="product" id="productform">
```

> [!WARNING]
>
> Auf einer Kategorieseite steht das Formular je Produkt einmal. Vergeben Sie dort fortlaufende IDs, sonst legt jede Schaltfläche dasselbe Produkt in den Warenkorb.

## Schritt 6: Schaltfläche mit onclick versehen

Der erste Parameter ist die ID aus Schritt 5. Das `return` davor verhindert, dass das Formular zusätzlich abgeschickt und die Seite neu geladen wird.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<button type="submit"
   onclick="return ws_AJAXaddToBasket('productform', '~BT-ProductAddToBasket_Ajax~', '~WS-Charset~')">
   In den Warenkorb
</button>
```

## Schritt 7: Rückruffunktionen füllen

Die vier Funktionen gehören in Ihre Designkomponente. Sie entscheiden darin, was der Käufer zu sehen bekommt.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// vor dem Absetzen der AJAX-Anfrage
function ws_AJAXaddToBasketStart() {
   $('#AJAXError').hide();
   $('#WK-Error').fadeOut("slow");
   $('#AJAXInfo').fadeIn("slow");
}

// alle Produkte konnten übernommen werden
function ws_AJAXaddToBasketResponseSuccess() {
   $('#AJAXInfo').fadeOut("slow");
   $('#WK-Info').fadeIn("slow");
   window.setTimeout(function () { $('#WK-Info').fadeOut('slow'); }, 3000);

   // Markierung im Kurzwarenkorb dreimal aufblinken lassen
   window.setTimeout(function () {
      $('#WK-Alert').fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
   }, 100);
}

// mindestens ein Produkt konnte nicht übernommen werden
function ws_AJAXaddToBasketResponseError() {
   $('#AJAXInfo').fadeOut("slow");
   $('#WK-Error').fadeIn("slow");
}

// die AJAX-Kommunikation selbst ist fehlgeschlagen
function ws_AJAXaddToBasketError() {
   $('#AJAXInfo').fadeOut();
   $('#AJAXError').fadeIn();
}
```

> [!WARNING]
>
> Setzen Sie die Trackingschnittstelle ein, beachten Sie deren Hinweise zu AJAX-basierten Funktionen. Ein Seitenaufruf, der nicht stattfindet, wird sonst auch nicht gezählt.

## Ohne AJAX auf der Seite bleiben

Es gibt einen zweiten, schlichteren Weg zum selben Ziel. Statt die Warenkorbseite anzuzeigen, kehrt der Shop nach dem Ablegen zur Produktdetailansicht oder zur Kategorieansicht zurück. Die Seite wird dabei neu geladen, es läuft aber kein JavaScript mit.

| Schaltfläche | Zielseite nach dem Klick |
| - | - |
| [`~BT-ProductAddToBasket_Ajax_targetProd~`](https://dokumentation.websale.de/v8s/referenz/tags/bt/produkt-und-warenkorb#die-tags-im-uberblick) | die Produktdetailansicht |
| [`~BT-ProductAddToBasket_Ajax_targetCat~`](https://dokumentation.websale.de/v8s/referenz/tags/bt/produkt-und-warenkorb#die-tags-im-uberblick) | die Kategorieansicht |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-Product~" method="post">
   <input type="submit" name="~BT-ProductAddToBasket_Ajax_targetCat~" value="In den Warenkorb">
</form>
```

Ob das Ablegen geklappt hat, prüfen Sie auf der Zielseite mit `{[ST-Basket_Success](/v8s/referenz/tags/st/seitenzustand-und-navigation)}`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Basket_Success}
   Das Produkt liegt in Ihrem Warenkorb.
{/ST-Basket_Success}
```

Die beiden Tagnamen tragen `Ajax` im Namen, obwohl diese Variante ohne AJAX auskommt. Lassen Sie sich davon nicht in die Irre führen.

## Verwandte Themen

* Wegweiser: [Produkt in den Warenkorb legen, für den gewöhnlichen Weg und für Deep-Links](https://dokumentation.websale.de/v8s/warenkorb/produkt-in-warenkorb-legen.md)
* Wegweiser: [Warenkorb anzeigen und löschen](https://dokumentation.websale.de/v8s/warenkorb/warenkorb-anzeigen-loeschen.md)
* Wegweiser: [Beschreibung der Tracking-Schnittstelle](https://dokumentation.websale.de/v8s/materialien/materialien-tracking-schnittstelle.md)


## Related topics

- [Produkt in den Warenkorb legen](https://dokumentation.websale.de/v8s/warenkorb/produkt-in-warenkorb-legen.md)
- [Menge im Warenkorb ändern](https://dokumentation.websale.de/v8s/anwendungsbeispiele/appex-menge-im-warenkorb-aendern.md)
- [Geschenkprodukte](https://dokumentation.websale.de/v8s/marketing-produkte/geschenkprodukte.md)
- [Template-Typen](https://dokumentation.websale.de/v8s/grundlagen-templates/template-typen.md)
- [$wsWatchList - Merklisten](https://dokumentation.websale.de/frontend/referenz/module/wswatchlist.md)


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