Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

Плагин редактирования координат метки на карте для MODX Revolution

Введение

Не думал, что так быстро вернусь к теме создания плагинов для MODX Revolution. Тем не менее, недавно меня попросили реализовать довольно удобную вещь для сайта.

Задача

Допустим, есть сайт с объявлениями о продаже недвижимости. Как известно, помимо фотографий, стоимости, контактной и прочей информации, объявление должно содержать адрес. Согласитесь, что гораздо удобнее для людей не просто видеть перед собой текстовый адрес, ведь человеку, скорее всего, придётся постоянно переключаться на карту, а иметь эту самую карту с меткой, расположенной по нужному адресу, прямо на странице объявления. Естественно, карта должна предоставляться каким-нибудь качественным картографическим сервисом; я решил использовать Яндекс.Карты.

На рисунке ниже изображена карта от Яндекса. Координаты балуна (метки) соответствуют тем, что введены в текстовом поле под картой. При перемещении метки на карте меняются координаты в текстовом поле, а при изменении координат в текстовом поле происходит перемещение метки. Короче, координаты в текстовом поле и на карте синхронизированы.

Редактирование адреса в админке
Редактирование адреса в админке

При клике на метку должна показываться подсказка. Логично было бы разместить в ней заголовок объявления.

Редактирование адреса в админке
Редактирование адреса в админке

Представим, что эту задачу поставили человеку, не знакомому с программированием. Самое тривиальное решение — вручную вводить для каждого объявления координаты метки. Тогда тому, кто этим занимается, пришлось бы сначала искать этот адрес на стороннем сайте, копировать оттуда координаты и вручную добавлять в объявление.

Такой способ очень прост в реализации, так как на странице объявления будет достаточно добавить код карты с подставленными координатами. Но эта статья посвящена не тому, как нажить себе врагов в лице контент-менеджеров, а наоборот — сделать редактирование координат доступным даже продавцу SIM-карт.

Действие №1 — Переменная шаблона (TV)

Сначала нужно создать TV, которая будет содержать координаты, разделённые запятой. Я назвал эту переменную coords, но это вообще не принципиально. Настройки по умолчанию, нужно лишь указать, для каких шаблонов доступна эта переменная.

Действие №2 — Создание плагина

Единственное, что нужно сделать в плагине — это отловить событие отрисовки админки. Я пока недостаточно разбираюсь в системных событиях, поэтому решил сделать так, чтобы плагин запускался при срабатывании следующих событий: OnBeforeManagerPageInit, OnManagerPageAfterRender, OnManagerPageBeforeRender, OnManagerPageInit.

Единственное, что происходит внутри плагина — это подключение трёх JavaScript-файлов. Это библиотека для Яндекс.Карт, jQuery и самописный скрипт для управления картой и её синхронизацией с TV.

$modx->regClientStartupScript('http://api-maps.yandex.ru/1.1/index.xml');
$modx->regClientStartupScript($modx->getOption('site_url').'assets/js/jquery-2.1.3.min.js');
$modx->regClientStartupScript($modx->getOption('site_url').'assets/js/yandox-map-tv.js');

Действие №3 — Интеграция карты

Логика самописного JavaScript-файла следующая:

Скрипт (и плагин вообще) находится в стадии разработки, но его можно скачать по данной ссылке.

К сожалению, нельзя обратиться к TV-полю, зная имя TV (по крайней мере, я не понял, как это сделать). Поэтому приходится обращаться к полю, используя селектор #tv6, где 6 — это id переменной шаблона.

Очевидно, что этот простой плагин можно использовать и для других целей, например, для редактирования карты на странице с контактной информацией.

Плагин, как и статья, находится в разработке. Если у вас есть какие-либо пожелания, буду рад их рассмотреть.

Комментарии