Как реализовать вкладки с формой поиска и списком квартир от RealtyCalendar на 2 и более городов
Данный способ реализован для сайта Liberty City Apartments (Квартиры посуточно Уфа и Казань) LibertyCityApartments "Бронирование". Стояла задача на 1 странице для удобства впихнуть сразу 4 модуля. 2 со списком квартир и 2 формы поиска
Эта инструкция показывает, как встроить на сайт вкладки с переключением городов, где для каждого города отображаются форма поиска и список квартир на основе виджетов HomeReserve (RealtyCalendar).
Такой подход позволяет в одном блоке страницы разместить сразу несколько городов — без перезагрузки и без конфликтов между виджетами.
1. Подключаем основной скрипт HomeReserve
Сначала нужно подключить базовый скрипт один раз на странице.
Это делается так же, как указано в официальной инструкции на сайте RealtyCalendar
<script type="module" src="https://homereserve.ru/widget.js"></script>Этот скрипт можно вставить в любое место страницы — в <head> или перед закрывающим </body>. Или если вы пользуете Тильду/Wordpress то делаем HTML вставку.
2. Разметка вкладок и контейнеров виджетов
Теперь добавим HTML-разметку с вкладками городов и двумя контейнерами:
data-instance-id="search" — сюда вставится форма поиска.
data-instance-id="list" — сюда вставится список объектов.
<div class="hr-tabs-wrapper">
<div class="hr-tabs">
<!-- Уфа -->
<div
class="hr-tab active"
data-city="ufa"
data-token="сюда токен"
data-search-apartments="сюда id апартаментов"
data-list-apartments="сюда id апартаментов"
>
Уфа
</div>
<!-- Казань -->
<div
class="hr-tab"
data-city="kazan"
data-token="сюда токен"
data-search-apartments="сюда id апартаментов"
data-list-apartments="сюда id апартаментов"
>
Казань
</div>
</div>
<!-- Контейнер формы поиска -->
<div id="hr-widget" data-instance-id="search"></div>
<!-- Контейнер списка квартир -->
<div id="hr-widget" data-instance-id="list"></div>
</div>Если у вас больше городов — просто копируйте блок <div class="hr-tab"> и меняйте значения data-token и data-*apartments.
3. Стили вкладок
Чтобы вкладки выглядели аккуратно и было видно активный город, добавим простой CSS:
<style>
.hr-tabs-wrapper {
font-family: inherit;
max-width: 100%;
margin-bottom: 20px;
color: inherit;
}
.hr-tabs {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.hr-tab {
padding: 8px 14px;
border-radius: 5px;
cursor: pointer;
user-select: none;
background: inherit;
color: inherit;
border: 1px solid currentColor;
transition: all 0.2s;
}
.hr-tab:hover {
opacity: 0.8;
}
.hr-tab.active {
font-weight: bold;
text-decoration: underline;
}
[data-instance-id="search"] {
margin-bottom: 24px;
}
</style>4. Скрипт переключения вкладок и инициализации виджетов
Согласно инструкции RealtyCalendarинструкции RealtyCalendar, оба виджета нужно запускать одним общим скриптом с привязкой к instance_id.
Добавим его внизу страницы:
<script type="module">
// Функция рендера выбранного города
function renderCity(tabEl) {
// Обновляем активный таб
document.querySelectorAll(".hr-tab").forEach(t => t.classList.remove("active"));
tabEl.classList.add("active");
const token = tabEl.dataset.token;
// Массивы квартир для поиска и списка
const searchApartments = tabEl.dataset.searchApartments
.split(",")
.map(id => parseInt(id.trim(), 10));
const listApartments = tabEl.dataset.listApartments
.split(",")
.map(id => parseInt(id.trim(), 10));
// Очищаем контейнеры
const searchContainer = document.querySelector('[data-instance-id="search"]');
const listContainer = document.querySelector('[data-instance-id="list"]');
if (searchContainer) searchContainer.innerHTML = "";
if (listContainer) listContainer.innerHTML = "";
// Инициализируем форму поиска
window.homereserve.initWidgetSearch({
token: token,
apartments: searchApartments,
navigation: false,
instance_id: "search", // совпадает с data-instance-id
});
// Инициализируем список квартир
window.homereserve.initWidgetList({
token: token,
apartments: listApartments,
navigation: false,
instance_id: "list", // совпадает с data-instance-id
});
}
// При загрузке страницы и клике по табам
document.addEventListener("DOMContentLoaded", () => {
const tabs = document.querySelectorAll(".hr-tab");
tabs.forEach(tab => {
tab.addEventListener("click", () => {
renderCity(tab);
});
});
// Загружаем первый город по умолчанию
const first = tabs[0];
if (first) renderCity(first);
});
</script>Как это работает
При загрузке страницы автоматически подставляется контент для первой вкладки (например, Уфа).
При клике на другую вкладку:
Старая форма и список очищаются.
Инициализируются новые виджеты с нужным токеном и списком квартир.Вся работа происходит без перезагрузки страницы.
Что можно кастомизировать
data-token — подставьте токен вашего проекта из RealtyCalendar.
data-search-apartments / data-list-apartments — укажите ID квартир для конкретного города.
Текст вкладок — можно заменить на любое название города.
Стили — адаптируйте внешний вид вкладок под дизайн вашего сайта (цвета, шрифты, отступы и т. д.).
Итого
В результате у вас появляется гибкий блок с вкладками городов, где:
каждая вкладка подгружает свой поиск и список квартир;
используется только один общий скрипт и один файл widget.js;
виджеты не конфликтуют, так как у каждого есть свой instance_id.
Такой подход можно использовать на лендингах, страницах бронирования или в разделе «Наши города».