Availability search widget

Last Update: 16/02/2024

How it works

Using this widget, you'll be able to include an availability search form for your TOWeRS B2C system in your company website or in any third party website.

First thing, you should make sure to include jQuery and jQueryUI (complete with its i18n component), as it relies on them to work properly. Here is an example using jQuery and Google CDNs:

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/i18n/jquery-ui-i18n.min.js"></script>

Then you can add the following HTML snippet:

<link rel="stylesheet" type="text/css" href="[SYSTEM_URL]/include/css/getCss.php?file=avail_search_widget.css" />
<script src="[SYSTEM_URL]/include/js/responsive/affiliate.js.php"></script>

<div id="hc_ext_form_wl"></div>

where:

  • [SYSTEM_URL] must be the url of your TOWeRS B2C website
  • CSS and JS inclusion can be placed near div#hc_ext_form_wl as shown above, or into the <head> tag or before the </body> tag

How can you customize it?

It is possible to select the language used for the form labels, choosing among one of those configured for your TOWeRS B2C website:

<script>
    var language = 'it';
</script>

Some properties of the widget can be customized using the following CSS variables (in the :root context):

--nw-border-radius: border corner's radius

--nw-font-family: labels font

--nw-font-size: font's base size

--nw-font-color: font's color

--nw-primary-color: primary color

--nw-secondary-color: secondary color

--nw-accent-color: accent color

--nw-wrapper-background: widget's background color

--nw-wrapper-box-shadow: widget's shadow effect

--nw-dropdown-box-shadow: dropdowns' shadow effect

--nw-selected-color: border color for currently active element

--nw-room-separator-color: color of the separator between two consecutive rooms when children have been selected

--nw-button-background-color: generic buttons color

--nw-button-font-color: generic buttons' font color

--nw-submit-button-background-color: submit button color

--nw-submit-button-font-color: submit button's font color

--nw-state-active-background-color: background color for the currently active element (all dropdowns)

--nw-state-active-color: font color for the currently active element (all dropdowns)

--nw-datepicker-link-color: link color (calendar)

--nw-datepicker-current-day-background-color: background color for current day element (calendar)

Full HTML example

Here is the full HTML code for a minimal web page including the availability search widget with some customizations:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="initial-scale=1, user-scalable=no, width=device-width"
        />
        <title>Search availability TEST PAGE</title>
        <!-- Begin jQuery Stuff -->
        <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
        <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.3/i18n/jquery-ui-i18n.min.js"></script>
        <!-- End jQuery stuff -->
        <!-- Netstorming availability search widget's CSS -->
        <link rel="stylesheet" type="text/css" href="[SYSTEM_URL]/include/css/getCss.php?file=avail_search_widget.css" />
        <!-- Netstorming availability search widget's settings and CSS property values overrides -->
        <script>
            // Widget's language
            var language = 'en';

            // Overrides
            const nswcss = document.querySelector(':root').style;

            nswcss.setProperty('--nw-wrapper-background', 'rgba(255, 255, 255, 0.05)');
            nswcss.setProperty('--nw-accent-color', 'rgb(0, 0, 255)');
        </script>
        <!-- Netstorming availability search widget -->
        <script src="[SYSTEM_URL]/include/js/responsive/affiliate.js.php"></script>
    </head>
    <body>
        <main>
            <h1>NETSTORMING AVAILABILITY SEARCH WIDGET EXAMPLE</h1>
            <div style="padding: 2em 0 2em; background-color: rgba(0, 0, 0, 0.05);">
                <!-- Netstorming availability search widget's container element -->
                <div id="hc_ext_form_wl"></div>
            </div>
        </main>
    </body>
</html>

Which will be rendered similarly to:

Availability search widget's example