Параметры

Параметры вызова window.mountHodimaWidget: организация и адрес API, основа и цвета, скрытые блоки и способ оплаты.

Организация и адрес API

Виджет монтируется явным вызовом со страницы оператора: при загрузке скрипт только регистрирует window.mountHodimaWidget. Параметр target — селектор контейнера, по умолчанию #hodima-widget.

window.mountHodimaWidget({
  target: '#hodima-widget',
  tenantId: 'YOUR_TENANT_ID',
  apiBaseUrl: 'https://api.example.com',
})

Организация берётся из первого непустого источника:

  1. аргумент tenantId в mountHodimaWidget;

  2. TENANT_ID или VITE_TENANT_ID сборки;

  3. параметр TenantId в адресе страницы — только если это GUID.

Параметр TenantId в ссылке не переопределяет организацию, заданную при встраивании или сборкой. Если организация не задана ни одним источником, виджет не делает запросов и показывает плашку «Витрина не настроена: не указана организация. Проверьте ссылку или код встраивания».

Вызов возвращает true, если контейнер найден и виджет смонтирован, и false, если нет. Размонтировать виджет можно вызовом window.unmountHodimaWidget().

Скрытые блоки (hiddenBlocks)

Часть блоков виджета оператору не нужна: промокод без промокодов, выбор оплаты при одном способе, шапка каталога со своей первой секцией на сайте. Менеджер скрывает их в админ-панели, а разработчик сайта может заменить набор при монтировании.

window.mountHodimaWidget({
  target: '#hodima-widget',
  hiddenBlocks: ['catalogHeader', 'excursionFaq'],
})

  • Параметр заменяет список, сохранённый в админ-панели, целиком: [] показывает все блоки, отсутствие параметра — действует сохранённый список.

  • Принимаются только имена из таблицы ниже. Неизвестное имя (опечатка, блок из другой версии виджета) не ломает монтаж: оно пропускается с предупреждением в консоль [Hodima Widget] ….

  • Порядок источников: адрес страницы → hiddenBlocks → черновик предпросмотра → сохранённые настройки → умолчания. Через адрес блоки не задаются: набор для одной организации достигается только параметрами монтирования.

  • Обязательные части покупки не скрываются: панель выбора даты, времени и билетов, форма покупателя, согласия, таймер брони, сообщения об ошибках, QR-коды и кнопки билетов.

  • Подпись «Работает на платформе Ходима» внизу виджета тоже не отключается.

Экран Блок Имя

Каталог

Шапка каталога: иллюстрация, градиент, заголовок, город, плашки

catalogHeader

Фильтры: формат, время суток, город

catalogFilters

Лента дат и календарь цен

catalogDateRail

Сортировка

catalogSort

Экскурсия

Фотогалерея

excursionGallery

Ссылка «← Все прогулки»

excursionBackLink

Подробности: факты и описание

excursionDetails

Что включено

excursionIncluded

Маршрут

excursionRoute

Место встречи

excursionMeetingPoint

Если планы изменятся (возврат)

excursionRefund

Частые вопросы

excursionFaq

Проживание к экскурсии

excursionAddStay

Глэмпинги

Фильтры списка

glampingFilters

Сортировка списка

glampingSort

Фотогалерея

glampingGallery

Значки «Глэмпинг», «N прогулки рядом»

glampingBadges

Питание

glampingMealPlans

Дополнительно

glampingAddons

Правила возврата

glampingRefund

Экскурсии рядом

glampingNearbyExcursions

Оформление

Промокод

checkoutPromoCode

Выбор способа оплаты

checkoutPaymentMethod

Билеты

Место встречи

ticketsMeetingPoint

Что взять с собой

ticketsWhatToBring

Плашка о возврате

ticketsRefundNote

Ещё в этот день

ticketsMore

Период и число гостей проживания, а также число билетов в каталоге — входы поиска, а не фильтры: они остаются видимыми и при скрытых glampingFilters и catalogFilters. Скрытые «Питание» и «Дополнительно» означают, что бронь создаётся без питания и без дополнительных услуг. Блок на экране, недоступном в выбранном составе виджета, просто не встречается.

Способ оплаты при скрытом выборе (defaultPaymentMethod)

window.mountHodimaWidget({
  target: '#hodima-widget',
  hiddenBlocks: ['checkoutPaymentMethod'],
  defaultPaymentMethod: 'sbp', // 'card' (по умолчанию) | 'sbp'
})

Когда блок checkoutPaymentMethod скрыт, виджет платит этим способом — тем же путём, что при ручном выборе: 'sbp' уходит в СБП, карта открывает встроенную форму ЮKassa. Когда выбор виден, параметр не используется: на телефоне по умолчанию СБП, на компьютере — карта.

Неподдерживаемое значение (например, 'bitcoin') игнорируется с предупреждением [Hodima Widget] …: действует способ из админ-панели. Способ из параметров не проверяет подключение в ЮKassa: если СБП у организации не подключён, платёж не пройдёт.

Основа и цвета (theme)

Объект theme задаёт основу и пять цветов виджета. Остальные цвета — вторичный текст, рамки, статусы, декор — выводятся из них пакетом @hodima/ui, виджет их не дублирует.

Поле CSS-переменная Умолчание Что окрашивает

scheme

—

'light'

Основа: готовая заготовка фона, карточек, текста и статусов. Допустимо 'light' и 'dark'.

backgroundColor

--hd-bg

из основы

Фон виджета.

surfaceColor

--hd-surface

из основы

Карточки, панели, поля ввода, диалоги.

textColor

--hd-text, --hd-icon

из основы

Основной текст и иконки.

primaryColor

--hd-primary

#3F65E9

Кнопки, выбор, ссылки, выделение.

brandColor

--hd-brand

из настроек (#6986EB)

Логотип, декор и градиент шапки каталога.

 
window.mountHodimaWidget({
  target: '#hodima-widget',
  theme: {
    scheme: 'dark',
    backgroundColor: '#121212',
    surfaceColor: '#1E1E1E',
    textColor: '#F2F2F2',
    primaryColor: '#F0A030',
    brandColor: '#F0A030',
  },
})

Пустые backgroundColor, surfaceColor и textColor берутся из заготовки основы, поэтому на тёмном сайте достаточно scheme: 'dark'. Цвета принимаются в любом CSS-формате (#abc, #AABBCC, rgb(18, 18, 18), имя цвета) и приводятся к #RRGGBB. Некорректное значение игнорируется с предупреждением в консоль [Hodima Widget] …: действует сохранённый цвет или заготовка основы, виджет не падает.

Шрифты, отступы и скругление оболочки задаются в том же объекте theme — поля fontBody, fontHeading, shellPaddingBlock, shellPaddingInline, shellBorderRadius и shellPaddingMobile. fontBody и fontHeading — только семейство, без ссылки на файл: файл шрифта подключает страница оператора до монтирования, иначе останется запасная цепочка system-ui. Ссылку на файл шрифта задаёт менеджер в настройках организации, и виджет подключает её сам — см. Оформление. Как основа и цвета выглядят на экране и какие предупреждения о читаемости выводит виджет — там же.

Параметры монтирования главнее сохранённых настроек организации. Те же значения менеджер задаёт в админ-панели, поэтому один и тот же виджет на разных страницах сайта можно оформить по-разному.