2. ІТ-спеціалісту. Як вставити інтерактивний фасад в полотно сторінки?

За замовчуванням, підключення інтерактивного фасаду, виводить на сайті забудовника – кнопку виклику фасаду. Це виглядає так як показано на скріншоті нижче, або з певними дизайн модифікаціями.

такий віджет легко може бути доданим, згідно інструкцій до продукту G-PLUS VISUAL, всього лише через вставку JS скрипту. Деталі підключення описані в документації за посиланням – https://g-plus.com.ua/info/documentation/how-to-connect-an-interactive-facade-to-developer

При цьому, якщо виникає задача, помістити інтерактивний фасад в тіло сторінки сайту, можна

Спосіб 1 – використовувати вставку через iframe.

Наприклад, щоб реалізувати ось такий вивід:

Приклад iframe коду для вставки

  <iframe id="layout-iframe" style="z-index:1!important; height: calc(87vh - 57px);" src="https://crm.g-plus.app/manage/buildings/23893/iframe_layout?lang=ua&token=7a5b8d4b9bdb45ffbebb05dc796b59eb"></iframe>

в даному прикладі буде викликано демо ЖК з назвою Поруч який наведено на сторінці https://demo.g-plus.com.ua/demo

Даний демо ЖК вставлено в iframe по посиланню – https://crm.g-plus.app/manage/buildings/23893/iframe_layout?lang=ua&token=7a5b8d4b9bdb45ffbebb05dc796b59eb

URL для src ви можете отримати через інспектор або view source of iframe

OVERLAY практика.

Оскільки вставка iframe в контейнер сторінки за замовчуванням ловить курсор мишки, то рекомендуємо використовувати практику накладання на iframe сітки з закликом кліку на елемент для взаємодії і відслідковувати покидання курсора мишки з зони iframe (якщо покидання відбулось – повертати сітку).

Приклад доступний за посиланням https://demo.g-plus.com.ua/demo/v131

Прокрутка секції Інтерактивна схема забудови відбувається нативно, її активація – інтуїтивно зрозуміла.

Спосіб 2 – використовувати виклик iframe-вікна через JS.

У способі 2 виконана верстка плану забудови в HTML+CSS, з використанням JS, який при кліку на будинок відкриває iframe вікно з відповідним будинком (наприклад 1.1G)

var data = {
    action: 'event',
    selector: '.btn-choose-block[data-id=123]', // селектор кнопки корпусу всередині iframe
    event: 'click'
}
var iframe = document.getElementById('layout-iframe');
iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');Приклад реалізації виклику через JS

Даний код поза JS викличе елементи селектору.