Поисковый виджет 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
Далее, необходимо инициализировать виджет на странице.
-
Подключите на страницу файлы, необходимые для работы виджета:
<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>
-
Добавьте на страницу 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>
-
Объявите глобальную
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>
-
Последний этап - инициализация виджета:
<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>