Dieses Anwendungsbeispiel zeigt Ihnen die Integration einer Abfrage von Kundendaten in Form eines Bootstrap-Modals (Nur das E-Mail-Feld darf als Pflichtfeld gekennzeichnet werden):

Realisierung per Bootstrap-Modal

Schritt 1: Button auf der Produktdetailansicht (ws_product.htm) einbauen

{PR-Inventory}
    {PR-InventoryState(red,red-soft,red-hard)}
        <div class="spacer10"></div>
        <a data-toggle="modal" data-target="#backinstock" class="color-red" onclick="return ws_AJAXloadTemplatePOST('~PR-InventoryRegisterLink~',
       '~WS-Charset~', ws_AJAXloadInqStart, wsAJAXloadInqError,
       'ws_AJAXloadInqResponseSuccess()', 'wsAJAXloadInqResponseError()');"><span class="glyphicon glyphicon-menu-right">
        </span><u>%%MailOrderNowBtn%%</u></a>
    {/PR-InventoryState(red,red-soft,red-hard)}
{/PR-Inventory}

Schritt 2: Modal ans Ende des body der ws_product.htm setzen

<!-- Modal für BackInStock-Mail (Formular)-->
<div class="modal fade" role="dialog" id="backinstock">
    <div class="modal-dialog  modal-lg">
 
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="ws_backinstock_content" data-ajax-scrollto="true"></div>
            </div> 
        </div>
    </div>
</div>

Schritt 3: Anlegen der Eingabefelder, ihrer Beschriftungen und des Absendebuttons auf der ws_inventory_register.htm

{ST-Ajax}<WS-Ajax-ws_backinstock_content>{/ST-Ajax}           
    <form action="~FORM-InventoryRegister~" method="Post" id="backinstock_form" class="form-horizontal">
        ...
               <button type="submit" class="btn btn-default btn-block" 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} 

Wegweiser: Formulare per AJAX nachladen und absenden

Wegweiser: BackInStockMail (OrderNow-Service)

Referenz: PR-Inventory

Referenz: PR-InventoryState()

Referenz: PR-InventoryRegisterLink

Referenz: WS-Charset

Referenz: FORM-InventoryRegister

Materialien: WEBSALE JavaScript-Bibliothek