Loading information pages via AJAX - WEBSALE Dokumentation

This page walks through an AJAX integration end to end. The example uses the terms and conditions page, whose content is loaded into the product detail view via a click. The page remains normally accessible afterwards, that is, without AJAX. The benefit: the terms and conditions are only fetched when a customer wants to see them. The product detail view does not have to be rebuilt for this, and the customer does not lose their position on the page. This page assumes that you know the general flow of an AJAX integration, in particular the role of the four JavaScript functions. Guide: AJAX functions

Prerequisites

In your template directory, for example benutzer/templates/translation, an information page already exists under the file name tpl_agb.htm. The setup consists of six steps. Steps 1 to 4 concern the product detail view ws_product.htm and the design component; steps 5 and 6 concern the terms and conditions page itself.

Step 1: Include the system library and design component

Include the WEBSALE JavaScript system library together with its design component in the product detail view ws_product.htm. If you have already done so, check the version. It must be at least 1.8.1, because the AJAX functions are only included from this version onwards.

<head>
   ...
   <script type="text/javascript" src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
   <script type="text/javascript" src="../js_upload/ws-design-1.8.3.js"></script>
   ...
</head>

Materials: WEBSALE JavaScript library

Step 2: Create the AJAX link on the product detail view

Place the link on ws_product.htm that triggers the load. The onclick event calls ws_AJAXloadTemplate; the return in front prevents the browser from additionally following the link. The four function names mentioned here you create in step 4. The names are freely chosen, they just have to match in both places.

<a onclick="return ws_AJAXloadTemplate('~WS-LoadTpl(tpl_agb.htm)~', '~WS-Charset~', ws_AJAXloadAGBsStart, ws_AJAXloadAGBsError,
   'ws_AJAXloadAGBsResponseSuccess()', 'ws_AJAXloadAGBsResponseError()');">
   Show terms and conditions
</a>

The character set is not passed as a fixed value, but via the ~WS-Charset~ tag. This way, the call remains correct even if a subshop works with a different character set. Reference: WS-LoadTpl()

Step 3: Set up display areas on the product detail view

You need three areas: one for the loading indicator, one for the error message, and one for the terms and conditions themselves. The loading and error areas start hidden, because they are only shown by the JavaScript functions.

<div id="ws_agbs_loading" style="display:none;">
   <!-- AJAX request in progress, show loading graphic -->
   <img src="loading.gif" alt="loading">
</div>

<div id="ws_agbs_error" style="display:none;">
   <!-- The AJAX communication could not be carried out -->
   Error in AJAX communication.
</div>

<div id="ws_agbs_content">
   <!-- The terms and conditions are inserted into this container -->
</div>

The important ID is ws_agbs_content. Only this area is automatically filled by the system library, specifically from the WS-Ajax section of the same name on the terms and conditions page from step 5. The loading and error areas are pure display elements of your template and have no counterpart on the terms and conditions page.

Step 4: Create JavaScript functions in the design component

Create the four functions named in step 2 in the design component of the WEBSALE JavaScript system library. Each of them simply switches between the three areas.

// Runs before the AJAX request is sent and shows the loading indicator
function ws_AJAXloadAGBsStart()
{
  $('#ws_agbs_error').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_loading').show();
}

// Runs when the load was successful and shows the loaded content
function ws_AJAXloadAGBsResponseSuccess()
{
  $('#ws_agbs_error').hide();
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').show();
}

// Runs when WEBSALE V8s returned an error, for example a template that was not found
function ws_AJAXloadAGBsResponseError()
{
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_error').show();
}

// Runs when the AJAX communication failed, for example when the internet connection is interrupted
function ws_AJAXloadAGBsError()
{
  $('#ws_agbs_loading').hide();
  $('#ws_agbs_content').hide();
  $('#ws_agbs_error').show();
}

The last two functions look the same but cover different cases. ws_AJAXloadAGBsError takes effect when the shop did not respond at all. ws_AJAXloadAGBsResponseError takes effect when it responded and reported an error. If you want to inform the customer differently, insert two different messages here.

Step 5: Create a WS-Ajax section on the terms and conditions page

On tpl_agb.htm, wrap the content that is to appear in the product detail view with a WS-Ajax section. The name of the section consists of the prefix WS-Ajax- and the ID of the display area from step 3. Wrap the section markers themselves with {ST-Ajax}. Without this bracketing, they would appear visibly in the source code on a normal call to the terms and conditions page.

{ST-Ajax}
   <!-- Start of the area loaded via AJAX -->
   <WS-Ajax-ws_agbs_content>
{/ST-Ajax}

Your terms and conditions go here
...

{ST-Ajax}
   <!-- End of the area loaded via AJAX -->
   </WS-Ajax-ws_agbs_content>
{/ST-Ajax}

Reference: WS-Ajax-”ID”

Step 6: Link to the terms and conditions page without AJAX

Thanks to the bracketing from step 5, the terms and conditions page remains fully usable without AJAX. This is not optional but necessary: if JavaScript is disabled in the customer’s browser, this route is the only one. For this, integrate a normal link, for example in the footer.

<a href="~WS-LoadTpl(tpl_agb.htm,Terms and conditions)~">Show terms and conditions</a>

The meaning of the individual parameters of WS-LoadTpl() can be found in the reference. Reference: WS-LoadTpl()

​Prerequisites

​Step 1: Include the system library and design component

​Step 2: Create the AJAX link on the product detail view

​Step 3: Set up display areas on the product detail view

​Step 4: Create JavaScript functions in the design component

​Step 5: Create a WS-Ajax section on the terms and conditions page

​Step 6: Link to the terms and conditions page without AJAX