Поисковый виджет nemo.travel.frontend

Виджет nemo.travel.frontend встраивается в уже существующий сайт, позволяет осуществлять поиск авиабилетов и отелей, и призван облегчить интеграцию с системой Nemo.travel.

Установка виджета

Для начала, необходимо получить файлы виджета. Сделать это можно несколькими путями:

• Скачать и распаковать архив репозитория виджета с GitHub https://github.com/NemoTravel/nemo.travel.frontend http://storage9.static.itmages.com/i/17/0711/h_1499791435_3817860_5212aa9e61.jpeg
• Подключить виджет как npm-модуль: npm install -S nemo.travel.frontend

Далее, необходимо инициализировать виджет на странице.

1. Подключите на страницу файлы, необходимые для работы виджета:

   <link rel="stylesheet" href="{путь_до_файлов_виджета}/css/style.css">
   <link rel="stylesheet" href="{путь_до_файлов_виджета}/js/lib/lightslider/dist/css/lightslider.min.css">
   <!--[if IE 9]>
   <link rel="stylesheet" href="{путь_до_файлов_виджета}/css/ie9.css">
   <![endif]-->
   <script src="{путь_до_файлов_виджета}/js/lib/requirejs/v.2.1.15/require.js"></script>

2. Добавьте на страницу HTML-код, указанный ниже (он необходим для инициализации виджета и является его контейнером):

   <div class="nemo-root nemo-widget nemo-widget_flights js-nemoApp">
       <!-- ko if: component() -->
           <div data-bind="component: {
               name: component,
               params: {
                   route: componentRoute(),
                   additional: componentAdditionalParams()
               }
           }">
               <div class="nemo-common-appLoader"></div>
           </div>
       <!-- /ko -->
      	
       <!-- ko if: !component() && !globalError() -->
           <div class="nemo-common-appLoader"></div>
       <!-- /ko -->
      	
       <!-- ko if: globalError() -->
           <div class="nemo-common-appError" data-bind="text: globalError"></div>
       <!-- /ko -->
   </div>

3. Объявите глобальную JavaScript переменную nemoSourceHost, поместите в неё URL-адрес, который будет являться корневым для виджета и подключите файл {путь_до_файлов_виджета}/main.js (переменная nemoSourceHost используется в {путь_до_файлов_виджета}/main.js ). Если не создавать переменную, то в качестве корневого URL будет использоваться document.location.origin. Чаще всего, в неё необходимо помещать URL-адрес на котором находятся файлы виджета, или не создавать переменную вовсе. Пример создания переменной и её заполнение с использованием языка PHP:

   <script>
       var nemoSourceHost = '<?php echo "http" . (isset($_SERVER["HTTPS"]) ? "s" : "") . "://" . $_SERVER["HTTP_HOST"]; ?>';
   </script>
   <script src="{путь_до_файлов_виджета}/main.js"></script>

4. Последний этап - инициализация виджета:

   <script>
       require(
           ['initWidget'],
           function (initWidget) {
               var initConfig = {
                   dataURL: 'http://demo.nemo.travel/api',
                   staticInfoURL: '//demo.nemo.travel'
               },
               controller = initWidget(document.getElementsByClassName('js-nemoApp')[0], initConfig);
           }
       );
   </script>