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

# BackInStockMail im Modal abfragen

> Die Benachrichtigung bei Wiederverfügbarkeit in einem überlagernden Fenster anbieten, statt den Käufer auf eine eigene Seite zu schicken.

Ist ein Produkt nicht lieferbar, kann sich der Käufer benachrichtigen lassen, sobald es wieder da ist. Die Abfrage seiner E-Mail-Adresse liegt normalerweise auf einer eigenen Seite. Der Käufer verlässt dafür die Produktdetailansicht und muss danach zurückfinden.

In einem überlagernden Fenster bleibt er, wo er ist.

![20180427 Backinstockemailmodal](https://mintcdn.com/websaleag-44ee7ea6/7EOsbAvQZg2u3Pju/images/20180427_backinstockemailmodal.png?fit=max\&auto=format\&n=7EOsbAvQZg2u3Pju\&q=85\&s=f1464739589c52e81bbc9b4a02d1363b)

Die Funktion selbst, also die Benachrichtigung bei Wiederverfügbarkeit, wird hier nicht beschrieben. Sie muss eingerichtet sein. Diese Seite zeigt nur, wie Sie die Abfrage statt auf einer eigenen Seite in einem Fenster unterbringen.

Wegweiser: [BackInStockMail (OrderNow-Service)](https://dokumentation.websale.de/v8s/produkte/backinstockmail-ordernow-service.md) · [Formulare per AJAX nachladen und absenden](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-per-ajax-nachladen-und-absenden.md)

## Wie es zusammenspielt

| Teil | Wo | Aufgabe |
| - | - | - |
| Schaltfläche | Produktdetailansicht | öffnet das Fenster und lädt das Formular nach |
| leerer Fensterrahmen | Produktdetailansicht, am Ende des `body` | nimmt das nachgeladene Formular auf |
| Formular | `ws_inventory_register.htm` | die Eingabefelder, in einem AJAX-Bereich gekapselt |

Das Formular steht also weiterhin auf seiner eigenen Seite. Es wird nur per AJAX in das Fenster geholt, statt die Seite zu wechseln.

> [!WARNING]
>
> Für das Fenster brauchen Sie ein Oberflächen-Framework, im Beispiel unten Bootstrap. Die gezeigten Klassen- und Attributnamen stammen aus Bootstrap 3.
>
> Ab Bootstrap 5 heißen die Attribute `data-bs-toggle` und `data-bs-dismiss`, und die Symbolschrift `glyphicon` gibt es nicht mehr. Prüfen Sie, welche Fassung Ihr Shop verwendet, bevor Sie das Beispiel übernehmen.

## Schritt 1: Die Schaltfläche auf der Produktdetailansicht

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{PR-Inventory}
   {PR-InventoryState(red,red-soft,red-hard)}
      <button type="button" data-toggle="modal" data-target="#backinstock"
              onclick="return ws_AJAXloadTemplatePOST('~PR-InventoryRegisterLink~',
                 '~WS-Charset~', ws_AJAXloadInqStart, wsAJAXloadInqError,
                 'ws_AJAXloadInqResponseSuccess()', 'wsAJAXloadInqResponseError()');">
         %%MailOrderNowBtn%%
      </button>
   {/PR-InventoryState(red,red-soft,red-hard)}
{/PR-Inventory}
```

Die Klammerung `{PR-InventoryState(red,red-soft,red-hard)}` begrenzt die Schaltfläche auf die drei Lagerzustände, in denen das Produkt nicht lieferbar ist. Bei verfügbarer Ware erscheint sie nicht.

Im Original steht hier ein `a`-Element. Für eine Schaltfläche, die kein Ziel hat, sondern eine Aktion auslöst, ist `button` das richtige Element. Es ist ohne Zutun mit der Tastatur erreichbar und wird von Hilfsmitteln als Schaltfläche angesagt.

Referenz: [PR-Inventory](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [PR-InventoryState()](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [PR-InventoryRegisterLink](https://dokumentation.websale.de/v8s/referenz/tags/pr/grundlagen-und-produktdaten.md) · [WS-Charset](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md#die-tags-im-uberblick)

## Schritt 2: Der Fensterrahmen

Ans Ende des `body` der `ws_product.htm`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div class="modal fade" id="backinstock" tabindex="-1"
     role="dialog" aria-labelledby="backinstock-titel" aria-hidden="true">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <h2 id="backinstock-titel" class="modal-title">Benachrichtigung anfordern</h2>
            <button type="button" class="close" data-dismiss="modal" aria-label="Schließen">
               <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <div id="ws_backinstock_content" data-ajax-scrollto="true"></div>
         </div>
      </div>
   </div>
</div>
```

Der innere Container `ws_backinstock_content` ist zunächst leer. Sein Name entspricht dem Namen des AJAX-Bereichs aus Schritt 3, denn darüber findet die Bibliothek das Ziel.

> [!WARNING]
>
> Ein Fenster ohne `role`, ohne `aria-labelledby` und mit einer Schließen-Schaltfläche ohne Namen ist für Hilfsmittel nicht bedienbar. Das Zeichen `&times;` wird als "mal" vorgelesen. Die vier Angaben im Beispiel oben kosten nichts und beheben das.

## Schritt 3: Das Formular im AJAX-Bereich

Auf `ws_inventory_register.htm`:

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

   <form action="~FORM-InventoryRegister~" method="post" id="backinstock_form">
      <!-- Eingabefelder, nur die E-Mail-Adresse darf Pflichtfeld sein -->

      <button type="submit"
              onclick="return ws_AJAXsendFormTemplate('backinstock_form',
                 '~WS-Charset~', ws_AJAXloadInqStart, wsAJAXloadInqError,
                 'ws_AJAXloadInqResponseSuccess()', 'wsAJAXloadInqResponseError()');">
         %%TplBackInStockBtnSubmit%%
      </button>
   </form>

{ST-Ajax}</WS-Ajax-ws_backinstock_content>{/ST-Ajax}
```

Die Klammerung `{ST-Ajax}` um die beiden Bereichsmarken sorgt dafür, dass diese nur beim AJAX-Aufruf ausgegeben werden. Ruft jemand `ws_inventory_register.htm` unmittelbar auf, bekommt er die gewohnte Seite ohne die Marken.

> [!WARNING]
>
> Nur das Feld für die E-Mail-Adresse darf ein Pflichtfeld sein. Macht man weitere Felder zur Pflicht, bricht der Vorgang ab, weil der Dienst sie nicht erwartet.

Referenz: [ST-Ajax](https://dokumentation.websale.de/v8s/referenz/tags/st/seitenzustand-und-navigation.md#die-tags-im-uberblick) · [FORM-InventoryRegister](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare.md#katalog-suche-und-produkt) · Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

## Verwandte Themen

* Wegweiser: [BackInStockMail (OrderNow-Service)](https://dokumentation.websale.de/v8s/produkte/backinstockmail-ordernow-service.md)
* Wegweiser: [Formulare per AJAX nachladen und absenden](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-per-ajax-nachladen-und-absenden.md)
* Wegweiser: [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)
* Referenz: [IR- (BackInStockMail)](https://dokumentation.websale.de/v8s/referenz/tags/ir-backinstockmail.md)


## Related topics

- [Anwendungsbeispiele](https://dokumentation.websale.de/v8s/anwendungsbeispiele/anwendungsbeispiele.md)
- [IR- (BackInStockMail)](https://dokumentation.websale.de/v8s/referenz/tags/ir-backinstockmail.md)
- [BackInStockMail (OrderNow-Service)](https://dokumentation.websale.de/v8s/produkte/backinstockmail-ordernow-service.md)
- [Lagerbestandsmeldung](https://dokumentation.websale.de/v8s/lagerbestand/lagerbestandsmeldung.md)
- [Lagerbestand anzeigen](https://dokumentation.websale.de/v8s/lagerbestand/lagerbestand-anzeigen.md)


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