XTBML Modules

Easy to include HTML modules.

The xtbml modules relies on a few 3rd party javascript libraries which should be loaded before the "all" script inclusion below. As usual, the most optimal location for javascript inclusion is at the buttom of the page, right before the </body> tag. The dependencies are:

  • jQuery
  • jQuery UI
  • Knockout js
  • Amplify js
  • Require js
  • Twitter Bootstrap (optional)
    • Please note that for proper styling with Twitter Bootstrap, <!DOCTYPE html> should be located in the beginning of the page before the <html> tag.

They can be loaded individually directly from their respective CDN (Content Delivery Networks) or from local downloaded versions. Alternatively, we provide "all deps" bundles with and without Twitter Bootstrap:

The script inclusion, after the 3rd party inclusion is: <script src="https://sdk.teambooking.dk/xtbml/LANG/all?agentkey=AGENTKEY" type="text/javascript"></script>

LANG
The rendered language, being any of da-DK, en-US, or de-DE.
AGENTKEY
The agent key for the respective agent.

This module will show the results from the search performed by the Search Input module. The results are rendered according to Thumbnails in Twitter Bootstrap. This means, that the results should be wrapped inside a <div class="container"></div> for optimal rendering. The module is loaded by including the following: <div id="tb-results"></div>.

If Twitter bootstrap is used for styling, a fixed height is not given to each rendered search result. To let the thumbnails on the same row render with the same height, include the following script before the all script: <script src="https://sdk.teambooking.dk/xtbml/utils/equalresultheight" type="text/javascript"></script>

Example

The results from the query specified by the current parameters in the Search Input module are below. Note that as the results are already in a <div class="container"></div> as this full page is inside this container.

This module includes two buttons on the site which redirects to the cart and the checkout process. The module is loaded by including the following: <div id="tb-cartstatus"></div>

Example


This module will show additional vendor information entered in the system under Portal > Portal info page When Info pages are entered and made active for the Vendor an extra More...... button will be visible. By Clicking the button tb-result will become unvisible and tb-vendorinfo wil become visible showing information from Portal > Portal info page
Clicking Search will return to the opposite (normal) visibility.
The module is loaded by including the following: <div id="tb-vendorinfo"></div>.
As the module is designed to toggle with the tb-result module please consider place the tb-vendorinfo div below the tb-result div as follows:
<div id="tb-results"></div>
<div id="tb-vendorinfo"></div>.

data-vendorurltoken
Specifies vendors urlToken if tb-vendorinfo is user in a single vendor invironment. data-vendorurltoken is supplied from administrator. When data-vendorurltoken is inserted tb-results will never be visible.
Below an example where tb-vendorinfo is used for single vendor purpose
<div id="tb-vendorinfo" data-vendorurltoken="testfirma"></div>
Please visit this page to se an example