Search Widgets‎ > ‎

In-Page Search Widget

BRIEF DESCRIPTION 
This Search Widget (SW) includes two parts: search form like the one on the innstant.com homepage and search results.
If you want to incorporate the SW for your hotel searches, you can do this easily by following the Manual below.

MANUAL
  1. Ready your HTML. Create a DIV block where you would like the SW to be located like in example below. If you want your form to be always visible to user when he scrolls page up and down, give this block fixed positioning e.g. style="position: fixed; top: 200px;".
    <div id="searchForm"></div>
  2. Include the SW script and styles. 
    To use widget you have to plug-in the SW script and styles within <HEAD></HEAD> tag or anywhere else if you are sure of what you are doing. If you have (and you have to have) any of jQuery and Bootstrap scripts included into youк document, it's recommended to include the SW scripts only after them. For example,
    <head lang="en">
    <meta charset="UTF-8">
    <!-- Custom Bootstrap styles for Search Widget -->
    <link href="http://innstant.com/Widgets/SearchWidget/innBootstrapCustom.css" rel="stylesheet">

    <!-- bootstrap styles -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!--jQuery script and/or Bootstrap Script, etc...-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!--begin Search Widget scripts and styles-->
    <script src="http://innstant.com/Widgets/SearchWidget/jquery.innstantSearch.min.js"></script>

    <link href="http://    innstant.com/Widgets/SearchWidget/SearchWidget.css" rel="stylesheet" />
    <!--end Search Widget scripts and styles-->
    </head>

    4. Pay Attention! There is one custom bootstrap css file which is included in example before regular bootstrap styles. It's also used by search widget and you have to include it before any of your bootstrap styles in order to give Bootstrap ability to override any style in case of conflicts.
  4. Plug it all together. On this step you have to apply the SW plugin to specified on step 1 form container. To do that provide some code in <SCRIPT> tag (or in separate .js file which you'll have to include after SW script file) like in example below,
    <script>
    $(document).ready(function(){
    var params = {

      mode : 'hotel'
    , hotelID : 10000 //<=your hotel ID number
    , cityID : 288    //<=your city ID number
    , searchUrl : "example.com" //<== your b2c whitelabel domain                       
    };

    $('#searchForm').innSearchWidget(params);
    });
    </script>
    Parameters
    PARAMETERTYPEMANDATORYDEFAULTDESCRIPTION
    mode stringYES     'hotel'Determines what SW will search for and show. Mode 'hotel' stands for rooms of one particular hotel. Later will be added 'events' and 'hotels' modes.
     hotelID integerYES
      -
    		It's rather self explanatory: ID of the hotel 
     cityID  integer YES
      -
    		ID of the city
     searchUrl stringYES'innstant.com'Your b2c whitelabel url. The most important parameter which determines where to search and to what booking page will be redirected. Default one is just for example. You have to have your own.
     dateFormatstringNO
    'dd M yy' 
    		Date format for checkin/checkout date selectors. You can leave it as is or provide your own e.g. 'd/m/y'.
    topText stringNO'Search. Find. Book'This text is shown on the top of your form if default theme is selected 
     bottomTextarray of  strings NO['Secure Payments', 'Best Price Guarantee', 'Book now. Pay later'] These sentences are shown under top text when default theme is selected. By default sentences change each other in some timeout 
    widthinteger NO 585  Width of form. Only for default theme. It's recommended to specify your own dimensions via CSS
     heightinteger NO 305  Height of form. Only for default theme. It's recommended to specify your own dimensions via CSS
    searchFieldEnabledbooleanNOfalseShow or hide search input field. By default for hotel rooms it has to be hidden
    region stringNO''Specifies region for typeahead and allows search for results only within this region. E.g. region : 'us'
    searchInputPlaceholderstringNO'e.g. city, region, district or specific hotel'Specifies placeholder for search input field if it is enabled. 
     galleryImagesWidthintegerNO850Specifies gallery width. Read below description of how gallery works
    formTheme stringNO'default'Specifies appearance of your search form. By default it looks like the one in http://innstant.com. Another one for now is 'superline' which you can see in screenshot below. 
     themestringNOfalseSpecifies appearance of 'total price' block with booking button. By default it's a red ribbon with green button as you can see in pic below. Specify 'inn-b-theme' and it will get black and golden colors.
     promoTextPricestringNO'Best Price Guarantee'This text is shown under 'Book Now' button in price block within hotel results block.
    inn_superline_formText stringNO'Room Reservation'Search form text for SUPERLINE theme 
     currency integerNO '' Currency id (423 = USD, 424 = EUR, etc.)
  5. Appearance
    - Search form theme - 'SUPERLINE'

    If you want to get this theme instead of default one, perform 3 simple steps:
    ✓ Include superline script before Search Widget core script:
    <script src="http://innstant.com/Widgets/SearchWidget/swSuperline.min.js"></script>
    <script src="http://innstant.com/Widgets/SearchWidget/jquery.innstantSearch.min.js"></script>

    ✓ Include superline styles after all Search Widget styles:
    <link href="http://innstant.com/Widgets/SearchWidget/inn-sw-superline.css" rel="stylesheet" />

    ✓     Apply SUPERLINE theme via option:
         $jQ(document).ready(function(){
                var params = {                
                    , mode                    : 'hotel'
                    , hotelID                 : hotel_id_integer
                    , cityID                  : city_id_integer
    , searchUrl  : "your_b2c_whitelabel_domain.com"
    , formTheme  : 'superline'  <!-- <== This option should be specified -->
    , promoTextPrice          : '&#10003; Best Rate Guarantee'
                };
               $jQ('#searchForm').innSearchWidget(params);
    });

    -Results with default theme
    -Results with 'inn-b-theme'

    -Images Gallery

  6. Gallery description
    The Gallery of Search Widget has one quite good feature - real time adjustment of gallery container depending on image height. Nevertheless in order to provide best user experience it's highly recommended to upload images with aspect ratio 16:9 or approximately equal to it. 
    You can specify gallery width via     galleryImagesWidth option. And it will work according the next simple algorithm:
    -If viewport width is about 1000px or above, galleryImagesWidth option specified by you will be applied.
    -If viewport width is less than 1000px and greater then 650px (average interval of widths of most modern tablets) then Gallery width will be viewport width - 70px.

Mobile support

In order to have the widget work on mobile devices, you will need to add the following lines to your page:

<!--SEARCH WIDGET SCRIPTS AND STYLES-->
    <script src="http://innstant.com/Widgets/sw-responsive-dl/swSuperline.min.js"></script>
    <script src="http://innstant.com/Widgets/sw-responsive-dl/swHelpers.min.js"></script> 
    <script src="http://innstant.com/Widgets/sw-responsive-dl/jquery.innstantSearch.js"></script>
    
    <link href='http://innstant.com/Widgets/sw-responsive-dl/innSearchWidget.css' rel="stylesheet" />
    <link href='http://innstant.com/Widgets/sw-responsive-dl/innLivepatch.css' rel="stylesheet" />
    <link href='http://innstant.com/Widgets/sw-responsive-dl/inn-sw-superline.css' rel="stylesheet" />   
<!--end SEARCH WIDGET SCRIPTS AND STYLES-->

ą
scs.png
(17k)
noam@innstant.com,
Feb 4, 2015, 1:38 AM
v.2
Comments