MACRO

Лэндинг на Tilda

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

#Порядок действий

  1. Зайдите в раздел меню «Компания → Интеграции → Сайты»
  2. Добавьте домен (адрес сайта), на котором планируете размещение каталога недвижимости MACRO
  3. Добавьте на страницу вашего лэндинга блок с кодом T123 «HTML-код».

  1. Добавьте в поле «Контент» код встраивания виджета перед закрывающим тегом </body> Вашего сайта.

#Код встраивания

<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://MACRO_SERVER_ADDRESS/estate/embedjs/?domain="+window.location.host; n.parentNode.insertBefore(s, n)})(document, window)</script>

где MACRO_SERVER_ADDRESS — адрес MACRO в зависимости от сервера, на котором установлена система, например:

  • api.macroserver.ru
  • api.macro.sbercrm.com
  • api.macroserver.kz
  • api.macroserver.uz

#Дополнительные параметры

Вы можете дополнить код встраивания следующими параметрами (полный набор параметров в статье Управление поведением виджетов MACRO через JS SDK):

Имя параметраВозможные значенияОписание
data-autoinittrue или falseИнициализация виджета при запуске страницы с кодом, если требуется быстрая загрузка каталога недвижимости при клике на кнопку.
data-autoshowtrue или falseИнициализация и запуск виджета при запуске страницы с кодом, если требуется сразу запускать виджет при переходе на страницу.
data-iframemodetrue или 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>

#Кнопка запуска каталога

Включите отображение продающей кнопки запуска Вашего каталога. Подробнее в статье Кнопка запуска.

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

Если Вам требуется открыть каталог кликом по ссылке или кнопке на лэндинге (а не по стандартной кнопке каталога), то разместите на кнопке псевдоссылку вида #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.

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

Каталог недвижимости может быть встроен в тело вашего сайта, а не открываться в модальном окне. Пример встраиванияПереход на внешний сайтhttps://macrocatalog.ru/iframe-example каталога в тело сайта, реализованного в Tilda.

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

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

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

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

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

<iframe src="https://YOUR_SITE.COM/catalog/" frameborder="0" width="100%" style="height: calc(100vh - 100px)"></iframe>

Можете использовать более объемную конструкцию, которая добавит виджет в контент сайта с кнопкой перехода в полноэкранный режим:

<script>
  /* ===== НАСТРОЙКИ КАТАЛОГА ===== */
  window.macroCatalogSettings = {
    src: "https://YOUR_SITE.COM/catalog/", /* Адрес страницы с каталогом */  
    title: "Каталог недвижимости COMPANY" /* Название страницы */  
  };
</script>

<style>
  /* ===== НАСТРОЙКИ РАЗМЕРОВ КАТАЛОГА И КНОПКИ fullscreen ===== */
  #macroFullscreenContainer {
    --catalog-height: calc(100vh - 100px); /* Высота каталога */  
    
    /* Кнопка fullscreen */
    --button-size: 48px;         /* Размер круга */
    --icon-size: 20px;           /* Размер иконки */
    --button-color: #C85FA5;     /* Цвет круга */
    --icon-color: #ffffff;      /* Цвет иконки */
    --icon-stroke: 3;           /* Толщина линий иконки */
    --button-x: 50%;            /* Положение по горизонтали */

    /* Расстояние от верха до центра кнопки */
    --button-y: 12px;            /* В обычном режиме */
    --button-y-fullscreen: 32px; /* В полноэкранном режиме */
    
    --fade-duration: 280ms;      /* Длительность анимации*/
    --button-hover-scale: 0.94;  /* Масштаб при наведении, 94% */
    --button-hover-darken: 20%;  /* Затемнение при наведении на кнопку */
  }

  /* ===== ОФОРМЛЕНИЕ ===== */
  #macroFullscreenContainer {
    position: relative;
    width: 100%;
    height: var(--catalog-height);
    min-height: 300px;
    background: #fff;
  }

  #macroCatalogIframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  #macroFullscreenContainer .catalog-fullscreen {
    position: absolute;
    top: var(--button-y);
    left: var(--button-x);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--button-size);
    height: var(--button-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--button-color);
    color: var(--icon-color);
    cursor: pointer;
    appearance: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + 6px)) scale(0.9);
    transition:
      opacity var(--fade-duration) ease,
      transform var(--fade-duration) cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Затемнение фона кнопки */
  #macroFullscreenContainer .catalog-fullscreen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fade-duration) ease;
  }

  /* Иконка поверх затемнения */
  #macroFullscreenContainer .catalog-fullscreen svg {
    position: relative;
    z-index: 1;
    display: block;
    flex-shrink: 0;
    width: var(--icon-size);
    height: var(--icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: var(--icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* В полном экране кнопка всегда видна */
  #macroFullscreenContainer:fullscreen .catalog-fullscreen,
  #macroFullscreenContainer:hover .catalog-fullscreen,
  #macroFullscreenContainer .catalog-fullscreen:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
  }

  #macroFullscreenContainer .catalog-fullscreen:focus-visible {
    outline: 2px solid var(--button-color);
    outline-offset: 4px;
  }

  #macroFullscreenContainer:fullscreen {
    height: 100%;
    min-height: 0;
  }

  /* Отдельное положение кнопки в полноэкранном режиме */
  #macroFullscreenContainer:fullscreen .catalog-fullscreen {
    top: var(--button-y-fullscreen);
  }

  /* Эффект при наведении на кнопку */
  @media (hover: hover) {
    #macroFullscreenContainer .catalog-fullscreen:hover {
      transform: translate(-50%, -50%) scale(var(--button-hover-scale));
    }

    #macroFullscreenContainer .catalog-fullscreen:hover::after {
      opacity: var(--button-hover-darken);
    }
  }

  /* На устройствах без возможности наведения курсора на кнопку, она будет всегда видна */
  @media (hover: none) {
    #macroFullscreenContainer .catalog-fullscreen {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, -50%);
    }
  }

  /* Эффект при нажатии на кнопку */
  #macroFullscreenContainer .catalog-fullscreen:active {
    transform: translate(-50%, -50%) scale(0.9);
  }

  /* Учитываем системную настройку уменьшения движения */
  @media (prefers-reduced-motion: reduce) {
    #macroFullscreenContainer .catalog-fullscreen,
    #macroFullscreenContainer:fullscreen .catalog-fullscreen,
    #macroFullscreenContainer .catalog-fullscreen:hover,
    #macroFullscreenContainer .catalog-fullscreen:focus-visible,
    #macroFullscreenContainer .catalog-fullscreen:active {
      transition: none;
      transform: translate(-50%, -50%);
    }

    #macroFullscreenContainer .catalog-fullscreen::after {
      transition: none;
    }
  }
  
  /* Скрываем кнопку в полном экране на сенсорных устройствах */
  @media (hover: none) and (pointer: coarse) {
    #macroFullscreenContainer:fullscreen .catalog-fullscreen {
      display: none;
    }
}
</style>

<div id="macroFullscreenContainer">
  <iframe
    id="macroCatalogIframe"
    allowfullscreen
  ></iframe>

  <button
    type="button"
    class="catalog-fullscreen"
    aria-label="На полный экран"
    aria-pressed="false"
  >
    <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false">
      <path d="M12 2H2v10 M20 2h10v10 M2 20v10h10 M30 20v10H20"/>
    </svg>
  </button>
</div>

<script>
(function () {
  const container = document.getElementById("macroFullscreenContainer");
  const iframe = container.querySelector("#macroCatalogIframe");
  const button = container.querySelector(".catalog-fullscreen");
  const iconPath = button.querySelector("path");
  const settings = window.macroCatalogSettings;

  iframe.title = settings.title;
  iframe.src = settings.src;

  const paths = {
    enter: "M12 2H2v10 M20 2h10v10 M2 20v10h10 M30 20v10H20",
    exit: "M12 2v10H2 M20 2v10h10 M2 20h10v10 M30 20H20v10"
  };

  function updateButton() {
    const active = document.fullscreenElement === container;
    const label = active
      ? "Выйти из полного экрана"
      : "На полный экран";

    iconPath.setAttribute("d", active ? paths.exit : paths.enter);
    button.setAttribute("aria-label", label);
    button.setAttribute("aria-pressed", String(active));
    button.title = label;
  }

  button.addEventListener("click", async function () {
    try {
      if (document.fullscreenElement === container) {
        await document.exitFullscreen();
      } else if (container.requestFullscreen) {
        await container.requestFullscreen();
      } else {
        alert("Этот браузер не поддерживает полноэкранный режим.");
      }
    } catch (error) {
      console.error("Ошибка полноэкранного режима:", error);
      alert("Не удалось переключить полноэкранный режим.");
    }
  });

  document.addEventListener("fullscreenchange", updateButton);
  updateButton();
})();
</script>