Лэндинг на Tilda

Поделитесь этой инструкцией с разработчиком Вашего сайта или проделайте шаги самостоятельно!

Пошаговая установка

Для установки каталога недвижимости на Landing page, реализованный в Tilda, нужно будет сделать несколько простых шагов.

Шаг №1

Добавьте на страницу вашего лэндинга блок с кодом T123 «HTML-код».

Шаг №2

Добавьте в поле «Контент» 2 строки кода, представленные ниже:

Код встраивания, если система MACRO установлена на macroserver.ru

<div class="mcrm-inline-form" data-type="catalog"></div>

<script type="text/javascript">(function (d, w) {var n = d.getElementsByTagName("script")[0], s = d.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://api.macroserver.ru/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

Код встраивания, если система MACRO установлена на macro.sbercrm.com

<div class="mcrm-inline-form" data-type="catalog"></div>

<script type="text/javascript">(function (d, w) {var n = d.getElementsByTagName("script")[0], s = d.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://api.macro.sbercrm.com/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

Код встраивания, если система MACRO установлена на macroserver.kz

<div class="mcrm-inline-form" data-type="catalog"></div>

<script type="text/javascript">(function (d, w) {var n = d.getElementsByTagName("script")[0], s = d.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = "https://api.macroserver.kz/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

Вы можете дополнить код встраивания следующими параметрами:

Имя параметра	Возможные значения	Описание
data-autoinit	true или false	Инициализация виджета при запуске страницы с кодом, если требуется быстрая загрузка каталога недвижимости при клике на кнопку
data-autoshow	true или false	Инициализация и запуск виджета при запуске страницы с кодом, если требуется сразу запускать виджет при переходе на страницу
data-iframemode	true или false	Используйте для принудительной установки виджета в режиме iframe Настройка виджетов «Iframe mode», установленная для домена в системе MACRO, будет игнорироваться
data-views	Значения через запятую: facades, floor, bigGrid, smallGrid, plans, objects, description, online, panorama	Список разрешенных видов дома. Если параметр не определен, то разрешены все виды дома

Пример:

<div
class="mcrm-inline-form"
data-type="catalog"
data-views="floor,bigGrid,smallGrid,plans"
data-autoinit="true"
data-autoshow="false">
/div>

Шаг №3

Готово, Вы великолепны! Перезагрузите страницу — и Вы увидите кнопку запуска каталога.

Если кнопка не видна, то убедитесь, что в настройках виджетов включена «Кнопка запуска каталога». Её внешний вид и расположение Вы также можете отрегулировать по своему вкусу.

Открытие каталога по определённой кнопке на сайте

Если Вам требуется открыть каталог кликом по ссылке или кнопке на лэндинге (а не по стандартной кнопке каталога), то разместите на кнопке псевдоссылку вида #open_catalog и сохраните изменения.

Создайте на странице новый блок T123

Добавьте код, который будет обрабатывать нажатие по заданной псевдоссылке (при этом предотвращая обработку средствами Tilda)

<script>
  if (document.readyState !== 'loading') {
    us_clickInterception();
  } else {
    document.addEventListener('DOMContentLoaded', us_clickInterception);
  }

  function us_clickInterception() {
		// "\#open_catalog" — это ссылка на кнопке
    var links = document.querySelectorAll('a[href="\#open_catalog"]');
    Array.prototype.forEach.call(links, function (link) {
      link.addEventListener('click', function (e) {
					// предотвращение обработчика Tilda
          e.preventDefault()
        macrocrm.initCatalogAndShow({})
        return false
      });
    });
  }
</script>

Проверяете открытие каталога по кнопке!

Если вам требуется открыть каталог с установленными параметрами фильтров, то Вы можете доуточнить в строке 15 метод macrocrm.initCatalogAndShow({}) параметрами фильтров — для этого запросите в своём чате поддержки расширенный документ Управление поведением виджетов MACRO через JS SDK.

Внедрение каталога тело сайта

Каталог недвижимости может быть встроен в контент вашего сайта, а не открываться в модальном окне. Пример встраивания каталога в тело сайта, реализованного в Tilda.

Установка в тело сайта

Создайте на Вашем сайте страницу, на которой будет располагаться каталог. Пример адреса:

https://АДРЕССАЙТА/catalog/

На этой странице нужно разместить код встраивания каталога в блоке T123 так, как предписывает раздел «Пошаговая установка». Обязательно задайте параметр data-autoshow со значением true. Пример:

<div class="mcrm-inline-form" data-type="catalog" data-autoshow="true"></div>

Включите в настройках виджетов настройку Iframe mode.

Разместите код в блоке T123 в том месте страницы Вашего сайта, в котором предполагается встраивание каталога:

<iframe src="https://АДРЕССАЙТА/catalog/" frameborder="0" width="100%" style="height: calc(100vh - 100px)"></iframe>

где https://АДРЕССАЙТА/catalog/ ссылка на созданную Вами страницу