BackInStockMail im Modal abfragen

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.

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) · Formulare per AJAX nachladen und absenden

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.

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

{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 · PR-InventoryState() · PR-InventoryRegisterLink · WS-Charset

Schritt 2: Der Fensterrahmen

Ans Ende des body der ws_product.htm:

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

Ein Fenster ohne role, ohne aria-labelledby und mit einer Schließen-Schaltfläche ohne Namen ist für Hilfsmittel nicht bedienbar. Das Zeichen × 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:

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

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 · FORM-InventoryRegister · Materialien: WEBSALE JavaScript-Bibliothek

Anwendungsbeispiele

Wie es zusammenspielt

Schritt 1: Die Schaltfläche auf der Produktdetailansicht

Schritt 2: Der Fensterrahmen

Schritt 3: Das Formular im AJAX-Bereich

Verwandte Themen

​Wie es zusammenspielt

​Schritt 1: Die Schaltfläche auf der Produktdetailansicht

​Schritt 2: Der Fensterrahmen

​Schritt 3: Das Formular im AJAX-Bereich

​Verwandte Themen

Wie es zusammenspielt

Schritt 1: Die Schaltfläche auf der Produktdetailansicht

Schritt 2: Der Fensterrahmen

Schritt 3: Das Formular im AJAX-Bereich

Verwandte Themen