ФОРМИРОВАНИЕ ИТОГОВОГО КОДА ВИДЖЕТА ДЛЯ УСТАНОВКИ НА ИНТЕРНЕТ-СТРАНИЦУ


Схема работы:

  • формируем "контейнер" (блок) – это место на интернет-странице, куда будем вставлять код виджета, контейнер имеет параметры – 
    • высота – фиксированная, задаётся вами 
    • ширина – фиксированная, задаётся вами, или 
      • "плавающая" – если ширину не указывать вообще, то получится растянутый до текущей ширины экрана контейнер (кроме некоторых облачных платформ – см. далее)
    • рамочка вокруг контейнера – формируете по вашему желанию, имеет параметры – 
      • цвет рамки – цвет и его тон можно подобрать на вкладке "Карточка объекта" в зоне настройки ценовых категорий, 
      • при этом код подобранного цвета формируется в соответствующем поле кода цвета значка ценовой категории
      • толщина рамки задаётся вами – если рамочка не нужна, указывайте её толщину – "0"
    • тонкости установки на некоторых облачных платформах –
      • платформы типа WIX – нет авторасширения окна с картой и нет раскрытия окна на весь экран (по кнопке в правом верхнем углу виджета)
        • причина – такие платформы поддерживают вставку кода только в т.н. iframe – в предоставленную область фиксированного, т.е. заранее заданного, размера
        • поэтому для таких платформ существует донастройка виджета под платформу для наиболее приемлемого "разворота" виджета до границ iframe (см. Универсальный шаблон...)
      • платформы типа LPgenerator – возможен конфликт нескольних сервисов Яндекс.Карты и нет авторасширения окна с картой, причины –
        • если на странице уже есть Яндекс.Карта с расположением объекта – возможен конфликт версий Яндекс.Карт или ограничение со стороны платформы; проявление – отсутствие кнопок увеличения-уменьшения карты  на виджете; решение – убрать дублирующий сервис и поставить в окно расположения объекта – Гугл.Карту
        • нет авторасширения окна с картой – код виждета вставляется в специальный блок "HTML", который в свою очередь создает свой контейнер; задавать динамические свойства этого контейнера нет возможности – только статические значения; решение – подобрать размер окна так, чтобы при открытии страницы в масштабе 100% ширина окна с виджет-картой была на весь экран.
      • невозможна установка подобных кодов на платформах – Bmbullet, Umi.cms
  • вставляем виджет – вовнутрь сформированного контейнера
    • код виджета берём с вкладки "Код виджета"
    • настраиваем код виджета – 
      • если у вас на странице сайта уже установлены – js файлы jquery и yandex maps – то их не нужно устанавливать повторно, т.к. иначе будет конфликт "интересов" и виджет на заработает; в этой ситуации нужно удалить (заблокировать) строки, которые подключают эти элементы
      • если – версия api-maps.yandex.ru, установленная на вашем сайте, не 2.1, а меньше, подправьте на вашем сайте настройку – на 2.1
      • очерёдность загрузки виджета – если при показе интернет-страницы вы хотите в первую очередь показать описательную часть, а уже потом – виджет-карту (т.к. она загружается дольше), можно вставить в готовый текст кода виджета команду задержки загрузки виджета на время первичной загрузки самой страницы сайта (строка кода взята из примера далее, команда задержки выделена красным цветом)
        • оригинал корректируемой строки –
          • <script type="text/javascript">
          • w100Zemel.init('widget100Zemel', 0, 'SHOPSHA', false, true, 36);
          • </script>
        • оригинал корректируемой строки с командой задержки загрузки
          • <script type="text/javascript">
          • $(window).load(function(){w100Zemel.init('widget100Zemel', 0, 'SHOPSHA', false, true, 36);});
          • </script>
  • всё готово – 
    • для упрощения формирования итогового кода далее приведен универсальный шаблон контейнера для установки в него вашего кода виджета с небольшой настройкой границ – скопируйте его и впишите в нужное место на интернет-страницу, вставьте в него код виджета и настройте
    • для любопытных – приведён детальный разбор текста интернет-страницы с установленным кодом виджета реального коттеджного посёлка "Шопша" (SHOPSHA), который приведён в качестве образца на вкладке вашего посёлка – "Код виджета"

УНИВЕРСАЛЬНЫЙ ШАБЛОН – "Контейнер с виджетом"
ДЛЯ ФОРМИРОВАНИЯ ИТОГОВОГО КОД ВИДЖЕТА С УЧЁТОМ ВСЕХ НЕОБХОДИМЫХ НАСТРОЕК КОНТЕЙНЕРА

<!-- Контейнер с виджетом -->

 <style type="text/css"> /* начало описания контейнера */
   #layer100zemel {  /* создаем контейнер "layer100zemel" */
    background: #fc0; /* цвет рамки вокруг карты */
    width: 800px; /* ширина контейнера; для автоустановки ширины контейнера по ширине страницы – строку убираем (блокируем) */
    height: 400px; /* высота контейнера */
    padding: 5px; /* толщина рамки вокруг карты –  если рамка не нужна – padding: 0px; */
/*     position: absolute; только для платформы типа WIX – позиция в iframe */
/*     top: 50%; только для платформы типа WIX */
/*     left: 50%; только для платформы типа WIX */
       } /* контейнер создан */
 </style> /* конец описания контейнера */
   <div id="layer100zemel"> /* установка контейнера "layer100zemel", в который вставляем код виджета */

/* сюда вставляем и здесь подстраиваем сам код виджета со страницы посёлка на 100zemel.ru – с вкладки "Код виджета" */
/* – если у вас на странице сайта уже установлены – js файлы jquery и yandex maps – то их не нужно устанавливать повторно, т.к. иначе будет конфликт "интересов" и виджет на заработает; в этой ситуации нужно удалить  (заблокировать) строки, которые подключают эти элементы */
/* – если – версия api-maps.yandex.ru, установленная на вашем сайте, не 2.1, а меньше, подправьте на вашем сайте настройку – на 2.1 */

  </div> /* настроенный виджет установлен в настроенный контейнер */   
<!-- / Контейнер с виджетом -->

Пользуйтесь виджетом с удовольствием!!!

ПРИМЕР РАЗБОРА СОДЕРЖАНИЯ КОДА ИНТЕРНЕТ-СТРАНИЦЫ СО ВСТАВЛЕННОЙ ВИДЖЕТ-КАРТОЙ
вкладка "Код виджета" портала 100ZEMEL.ru – Образец виджета-карты
аналогично вставляется виджет-описание

ДЛЯ ЛЮБОПЫТНЫХ – приведён детальный разбор текста интернет-страницы 
с установленным на ней кодом виджета реального коттеджного посёлка "Шопша" (SHOPSHA)


Итак, разбираем тест кода страницы:







Пользуйтесь виджетом с удовольствием!!!