1. Подключение
1.1. Генератор виджета
Воспользуйтесь генератором виджета. Укажите необходимые параметры, скопируйте код, и разместите на вашем сайте
1.2. Самостоятельное подключение
Чтобы разместить виджет подключите следующие файлы к вашему сайту
<!-- CSS -->
<link rel="stylesheet" href="https://widget.gocruise.ru/css/app.css">
<link rel="stylesheet" href="https://widget.gocruise.ru/css/themes/dark.css">
<!-- optional theme -->
<!-- JS -->
<script src="https://widget.gocruise.ru/js/app.js"></script>
Виджет встраивается автоматически в месте подключения файла app.js. Для размещения виджета в коде вашего сайта разместите следующий блок
<div id="ces"></div>
2. Параметры
Для настройки параметров перед подключением виджета необходимо разместить блок
<script> с параметрами. Виджет получает параметры в момент инициализации из объекта
window.cesSettings
<script>
cesSettings = {
email : 'client@example.ru',
theme: 'dark',
currencies: ['EUR', 'RUB']
}
</script>
2.1 Описание параметров
| параметр | тип | по-умолчанию | |
|---|---|---|---|
| string | "" | email агентства, на который будут приходить заявки на бронирование морских круизов оформленные через виджет | |
| theme | string | "light" |
Добавляет к контейнеру виджета <div class="ces-app /"> класс ces-theme-<название_темы>.
Доступна темная тема виджета, при подключении соответствующего файла стилей.
|
| currencies | array | "" |
Список валют элемента управления Валюта. По-умолчанию отображает все предоставляемые сервисом типы валют.
Определяет порядок отображения валют в элементе управления Валюта.
Пример - ["EUR", "RUB"]. Коды валют указываются в ISO 4217.
|
| showResults | bool | false | При установленном параметре - виджет подгружает результаты поиска. Результаты поиска могут быть установлены при помощи адресной строки, если будут установленны некорректные параметры - виджет подгрузит все существующие результаты поиска от текущей даты, что может серьёзно сказаться на производительности виджета. |
2.2 Пример пользовательской темы
Рассмотрим на примере «темы simple»
Для использования другого семейства шрифтов: необходимо подключить файл-соответствующего шрифта к странице:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
rel="stylesheet">
Либо в соответствующем файле теме:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
После подключения файла, необходимо определить шрифт для виджета
.ces-theme-simple.ces-app,
.ces-theme-simple .ces-search-form__button {
font-family: 'Roboto', sans-serif;
}
Для изменения цветовой палитры предусмотрены css-переменные:
.ces-theme-simple.ces-app,
.ces-theme-simple .ces-search-form__button {
--brand-color: #ff9b25;
--secondary-color: #222;
--background-color: #f0f0f0;
}
Назначение переменных представлено на скриншоте
Во избежании коллизий переменных нескольких тем, определение переменных должно быть заключено в селекторе темы:
.ces-theme-simple {
--brand-color: #ff9b25;
--secondary-color: #222;
--background-color: #f0f0f0;
}
Возникли вопросы? Свяжитесь с нами -
cru.api@pac.ru
или через
форму обратной связи