Як забудовнику індивідуалізувати дизайн смарт-каталогу на власному сайті?

За замовчуванням, смарт-каталог інтегрується з сайтом забудовника, шляхом копіювання простого скрипту та його встановлення на сайт. Детальніше про те, як створити інтерактивну розмітку ЖК та отримати інтеракивний фасад для будинку (на якому можна обирати поверхи) ми розповідали в документації про інтерактивний фасад.

G-PLUS VISUAL – інтерактивний смарт каталог квартир

Вбудований інструмент G-PLUS VISUAL надає можливість в візуальному інтерфейсі створити інтерактивну розмітку для житлового комплексу. Детальніше – https://g-plus.com.ua/solutions/g-plus-visual/ Про те, якщо забудовник бажає індивідуалізувати дизайн, та змінити зовнішній вигляд смарт-каталогу до невпізнаваннсоті, наприклад, під власний бренд бук, тоді необхідно підключити кастомний CSS стилі. Як це зробити, розповідаємо в статті.

1.0 Як додати кастомний CSS у віджет до смарт-каталогу?

var data = {
    action: 'add_css',
    url: '<адреса CSS-файлау, включаючи домен>'
};
var iframe = document.getElementById('layout-iframe');
iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');

! зверніть увагу, домен (URL), з якого ви підключаєте CSS, також має бути доданим в адмінці CRM (розділ – вставка смарт-каталогу)

Приклад коду скрипта

<script>
window.addEventListener('message', function (e) {
    var data = e.data;
    if (data.event == 'g_widget:load') {
        var iframe = document.getElementById('layout-iframe');
        var data = {
            action: 'add_css',
            url: "посилання на css з https://"
        };
        iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');
    }
});
</script>

Як додати індивідуальний JS скрипт до віджету інтерактивних фасадів?

window.addEventListener('message', function (e) {
    var data = e.data;
    if (data.event == 'g_widget:load') {
        var iframe = document.getElementById('layout-iframe');
        var data = {
            action: 'add_js',
            url: "послання  на JS с https://"
        };
        iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');
    }
});

JS скрипти надають можливість додати GTM (Google Tag Manager) індивідуальні скрипти для аналітики, а також можливість реалізації відслідковування конверсій. Використання даних тегів, суттєво може вплинути на поведінку інтерактивних фасадів, тому використовуйте функціонал, якщо ви досвідчений користувач JS.

Налаштування Zoom у головного рендеру

Головний рендер – це генеральний план будівництва, на якому вибираються будинки чи поверхи. Якщо потрібно, щоб головний рендер був без функції зумування, а головнка картинка була на весь екран, тоді використовуємо:

var data = {
    action: 'settings',
    zoom: <будь-яке число, за замовчуванням -1.5>
};
var iframe = document.getElementById('layout-iframe');
iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');

Налаштування стилю заливки квартир

Наприклад, ви бажаєте змінити колір заливки, на плані поверху при виборі різних типів квартир за станом (заброньовані, вільні, продані)

Використовуємо

var data = {
    action: 'settings',
    // назва налаштування: значення за замовчуванням
    default_floor_style: {color: '#3388ff', fillOpacity: 0.15, editing: false, opacity: 0.1},
    hover_style: {color: '#3388ff', fillOpacity: 0.55, editing: false},
    default_flat_style: {color: '#3388ff', fillOpacity: 0.25, editing: false, opacity: 0.1},
    booked_flat_style: {color: '#F3BB45', fillOpacity: 0.75, editing: false}
    sold_flat_style: {color: '#c84513', fillOpacity: 0.75, editing: false}
};
var iframe = document.getElementById('layout-iframe');
iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');

Для прикладу, щоб зробити заливку секції жовтою

var data = {
    action: 'settings',
    hover_style: {color: '#ffff00', fillOpacity: 0.5, editing: false}
};
var iframe = document.getElementById('layout-iframe');
iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');

Expert: Повна індивідуалізація

<p style=’opacity: .6′>Якщо вам потрібно змінити порядок елементів, додати нові кнопки, змінити поведінку при натисканні кнопок, виводити смарт-каталог на сторінці поза iframe та інше.</p>

Ви можете в момент звернення до вашого сайту на бекенді викачати контент з iframe URL вашого смарт-каталогу, застосувати всі потрібні зміни та вставити отриманий HTML у ваш шаблон.

Виклик подій у елементів всередені iframe:

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

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');

Пропуск вибору будинку (секції чи блоку) – перехід до вибору поверхів

Якщо ви хочете пропустити вибір будинку (секцій чи блоку) і одразу перейти до вибору поверхів на рендері будинку.

В налаштуваннях смарт-каталогу, потрібно поставити відмітку – “Пропустити вибір корпусу (відразу виводити поверхи всіх корпусів)”

Як додати кастомну кнопку виклику смарт-каталогу?

Використовуйте для кастомної кнопки css-клас:

class=”g__building-button”

style=”position: unset!important”

Як передавати кастомні (індивідуальні) параметри з формою резервацій нерухомості?

Щоб передавати індивідуальні параметри з формою резервацій, під кодом завантаження віджету вставте:

window.addEventListener('message', function (e) {
    var data = e.data;
    if (data.event == 'g_widget:load') {
        var iframe = document.getElementById('layout-iframe');
        var data = {
            action: 'settings',
            // назва налаштування: значення
            custom_form_fields: {
                <FIELD1 NAME>: "<FIELD1 VALUE>",
                <FIELD2 NAME>: "<FIELD2 VALUE>",
                ...
            }
        };
        iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');
    }
});

Отриманні значення будуть додані в поле замітки до ліда.

Як виводити смарт-каталог і його елементи поверх вікон сайту?

<style>
#layout-iframe {z-index: 10001 !important;} 
.btn-close-iframe{z-index: 10002!important;}
</style>

Як відображати смарт-каталог на все вікно браузеру?

За замовчуванням, вікно смарт-каталогу відкривається у pop-up вікні. Такий спосіб передбачає рамку, яка виділена білою лінією та позначена цифрою 1.

При такому відображенні, контейнер сайту, вікно сайте не перекрите повністю і його видно на фоні.

Якщо ж ви бажаєте відображати смарт-каталог на все вікно браузеру, для цього достатньо використати наступні CSS стилі:

#стиль нижче задає розміри на все вікно 
body #layout-iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: none;
}

#стиль нижче задає положення для кнопки закриття вікна
body .btn-close-iframe {
    top: 15px;
    right: 25px;
}

При застосуванні даного стилю, візуально вікно буде відкрите не всю робочу зону браузера і виглядатиме так, як наведено на прикладі нижче:

Як індивідуалізувати колір виділення поверхів на фасаді будинку?

На зображеннях фасаду, ви бачите колір виділення синім. Для виділення іншим кольором потрібно налаштувати власні кольори. Це зручно здійснити наступним скриптом:

такий код змінює колір виділеного поверху (default_floor_style) на блідо-зелений (#33ff33, напівпрозорість 0.15), колір виділеного поверху та квартири (hover_style) на зелений (#33ff33, напівпрозорість 0.55).
<script>
window.addEventListener('message', function (e) {
    var data = e.data;
    if (data.event == 'g_widget:load') {
        var iframe = document.getElementById('layout-iframe');
        var data = {
            action: 'settings',
            // назва налаштування: значення
            default_floor_style: {color: '#33ff33', fillOpacity: 0.15, editing: false, opacity: 0.1},
            hover_style: {color: '#33ff33', fillOpacity: 0.55, editing: false},
        };
        iframe.contentWindow.postMessage(data, 'https://crm.g-plus.app');
    }
});</script>

Аналогічно можна зробити з іншими параметрами (default_flat_style, booked_flat_style, sold_flat_style). Дивись пункт про налаштування стилю заливки.

Як замінити колір кнопки виклику віджету інтерактивних фасадів?

За замовчуванням колір кнопки виклику інтерактивного фасаду такий, як ви бачите на скріншоті вище. Для індивідуалізації кнопки рекомендовано використати наступний CSS стиль

.g__building-button i {
    background: #cdb083 !important;
}

тоді колір кнопки буде наступним

Як замінити колір вибрати квартиру на рендері інтерактивних фасадів?

За замовчуванням кнопка вибору квартири на головному рендері виглядає так. Вона розташована в лівому верхньому кутку екрану модального вікна

Для зміни кольору кнопки використовуємо наступний CSS

.button.special, button.special, input[type=button].special, input[type=reset].special, input[type=submit].special {
    background-color: #bbd1bf!important;
}

При цьому даний стиль потрібно підключити окремо через js скрипт, як описано вище в розділі 1.0 Як додати кастомний CSS у віджет до смарт-каталогу?

Як виводити таблицю списку квартир на поверсі в згорнотому вигляді?

Як виводити таблицю списку квартир в згорнтотому вигляді?

Як змінити колір вертикальної полоси вибору поверхів новобудови у смарт-каталозі?

За замовчуванням полоса з вибору поверхів зафарбована у колір, як показано на скріншоті нижче

Додайте в підключений через js css стиль файлу наступний код

.floors-table>.floors {
    background: #64b900 !important;
}

тоді вертикальна полоса вибору поверхів буде виглядати так, як вазано нижче

Як змінити колір гіперпосилань вибору корпусу та переключення валют?

Для зміни кольору, в CSS файл (який підключено через js) потрібно додати наступне правило

.go-back a {
    color: #64b900!important;
}

.currency-dropdown a {
    color: #64b900!important;
}

Тоді, колір буде встановлено наступний

Як приховати перемикач валют інтерактивного фасаду?

Якщо ви бажаєте, щоб перемикання валют не відображалось, використовуйте наступний CSS код

.currency-dropdown a {
    color: #64b900!important;
        display: none;
}

Як приховати стовпчик цін нерухомості та вивід ціни при наведені на квартири?

За замовчуванням виводяться ціни при наведені на об’єкт нерухомості та як 4 стовпчик в характеристиці таблиці.

Якщо ви активуєте системну опцію – уточнення цін (не показувати ціни), тоді ціни не будуть виведені в смарт-каталозі квартир та на інтерактивному поверсі, але буде показано текст – “Ціна уточнюється“

Щоб зняти дані стовпці та не показувати текст “ціна уточнюється” потрібно поставити наступний текст в CSS, який підключено через JS

.free-apartments-list th:nth-child(4), .free-apartments-list td:nth-child(4), .apt-tooltip .price {
    display: none;
}

Як індивідуалізувати елементи характеристик об’єкту нерухомості?

Звісно, якщо під бренд-бук компанії ми змінили вертикальні лінії, елементи хлібних крихт та вибору валют, то на часі змінити і характеристики поверху (1), номеру (2), виду (3).

.apt-info .block-info .label {
    background: #64b900!important;
}

Для заміни символу Номеру, наприклад, щоб він став з чорного кольору – салатовим, використовуємо такий код

.apt-info .common-info .left .label span:first-of-type {
    background: #64b900!important;
}

вигляд буде таким

Для зміни кольору фону номера об’єкту нерухомості (квартири) використовуємо наступний код

.apt-info .common-info .left .label span:last-of-type {
    background: #bbd1bf!important;
}

Як приховати вивід ціни за м2?

Якщо ви не хочете відображати ціну за м2, то приховати даний блок можна наступним кодом

#код нижче приховує ціну та символ /м2
.apt-info .description .price {
    font-size: 28px;
    display: none;
}
#Код нижче приховує текст Ціна
.apt-info .description p {
    margin-bottom: 0;
    display: none;
}

Щоб приховати лише слово Ціна, дивись приклад на скріншоті нижче

Використовуємо наступний фрагмент CSS коду

.apt-info .description p:first-of-type {
    display: none;
}

Як замінити інші лейб-характеристики лоту нерухомості?

.apt-info .view-label {display: none}, щоб приховати
.apt-info .view-label span {background: ...}, щоб замінити колір

Як замінити назву форми генерації ліда з інтерактивного фасаду?

За замовчуванням форма генерації звернень називається – Забронювати цей об’єкт.

Щоб замінити даний текст, назву форми, можна використати наступний фрагмент CSS – коду

.apt-info .description .form-header {
    visibility: hidden;
}
.apt-info .description .form-header:after {
    content: "Запит до відділу продажів";
    visibility: visible;
    display: block;
}

Даний код, назву “Забронювати цей об’єкт” замінить на “Запит до відділу продажів“

Тоді форма буде мати такий вигляд:

Як перемістити віджет виклику інтерактивного фасаду в праву нижню частину екрану?

Використовуємо CSS код

body .g__building-button {
    left: unset;
    right: 20px;
}

Щоб змінити положення виводу тексту підсказки (вивести її ліворуч кнопки), використовуємо js

<script type='text/javascript'>
    var check_btn_interval = setInterval(function() {
        if ($('.g__building-button:visible').length) {
            $('.g__building-button').attr('data-balloon-pos', 'left');
            clearInterval(check_btn_interval);
        }
    }, 300);
</script>

Як задати вивід по вертикалі? Як змінити положення кнопки виклику інтерактивного фасаду?

Розглянемо на прикладі даного макету, де бажаємо кнопку виклику інтерактивного фасаду відобразити вище кнопки зв’язку.

Для таких цілей можна до класу body .g__building-button {} застосувати margin, який визначає позиції. Наприклад так:

.g__building-button {
    position: fixed!important;
    bottom: 41px;
    left: 20px;
    z-index: 10;
    cursor: pointer;
}