Выберите отель: const SELECT_SELECTOR = "#bnbookSelect"; const IFRAME_CONTAINER_SELECTOR = "#bnbookIframe"; const UIDS = { "629a9492-be5e-4465-ab90-c2c0d957b293": "Невский проспект", "25a90029-016a-4c6e-886a-ef6ead60dc64": "Площадь Восстания", "2b8dd5af-af86-45f8-9fd7-231193857e4a": "Сенная площадь", "6fe91e6c-c75a-4264-abb8-ad090abb367b": "Апартаменты у Дворцовой Площади", } let bnbookConfig = { html_id: 'booking_iframe', lang: 'ru', width: '100%', height: 'auto', rooms: '', }; const $content = document.querySelector(IFRAME_CONTAINER_SELECTOR); $content.classList.add("bnbook-loading"), $content.innerHTML = ""; const $hotelSelect = document.querySelector(SELECT_SELECTOR); for (const uid in UIDS) { const a = new Option(UIDS[uid], uid); $hotelSelect.add(a, void 0), stopLoadingFailback() } let BookingIframeBlock = null, uid = getUid(); function stopLoadingFailback() { setTimeout(function () { $content.classList.remove("bnbook-loading") }, 1e3) } function getUid() { let o = findGetParameter("uid"); return o = o || $hotelSelect.value, o && ($hotelSelect.value = o), o } function updateURLParameter(o, e, t) { let n, i = "", l = o.split("?"), a = l[0], r = l[1], c = ""; if (r) { var d = r.split("#"), u = d[0]; n = d[1], n && (r = u), l = r.split("&"); for (let o = 0; o < l.length; o++)l[o].split("=")[0] !== e && (i += c + l[o], c = "&") } else { d = a.split("#"), u = d[0]; n = d[1], u && (a = u) } n && (t += "#" + n); t = c + "" + e + "=" + t; return a + "?" + i + t } function findGetParameter(e) { let t = null; var n; let i = window.top.location.search.substr(1).split("&"); for (let o = 0; o < i.length; o++)(n = i[o].split("="))[0] === e && (t = decodeURIComponent(n[1])); return t } uid && "" !== uid && (bnbookConfig.uid = getUid(), BookingIframeBlock = new BookingIframe(bnbookConfig), BookingIframeBlock.init()), stopLoadingFailback(), $hotelSelect.addEventListener("change", function () { $content.classList.add("bnbook-loading"); var o = $hotelSelect.value; if (!o || "" === o) return BookingIframeBlock = null, window.history.replaceState("", "", updateURLParameter(window.location.href, "uid", "")), void document.querySelector("#booking_iframe iframe").remove(); bnbookConfig.uid = o, window.history.replaceState("", "", updateURLParameter(window.location.href, "uid", $hotelSelect.value)), BookingIframeBlock ? BookingIframeBlock.reinit(bnbookConfig) : (BookingIframeBlock = new BookingIframe(bnbookConfig), BookingIframeBlock.init()) }), document.addEventListener("bnovo_iframe_loaded", function () { $content.classList.remove("bnbook-loading") }); #bnbookWrapper { padding: 12px 20px; } #bnbookWrapper label, #bnbookWrapper select { color: #111; font-size: 16px; } #bnbookWrapper select { background-color: #fff; border: 2px solid #F89100; border-radius: 8px; font-size: 16px; max-width: 380px; height: 48px; padding: 0 12px; margin-left: 8px; outline: none; } .bnbook-loading { position: relative; overflow: hidden; } .bnbook-loading:after { background: rgba(255, 255, 255, .4); transition: opacity .3s ease; backdrop-filter: blur(3px); top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; position: absolute; overflow: auto; content: ""; z-index: 1010; } @media screen and (max-width: 1199px) { #bnbookWrapper { padding: 0; } } @media screen and (max-width: 699px) { #bnbookWrapper { padding: 0; } #bnbookWrapper select { margin: 0; width: 100%; } }