Разработка

Делаем страницу контактов более информативной

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

Итак, в данной статье я хочу рассказать о создании контактной страницы и формы средствами webform и карт яндекса.

Я уже писал как сделать контактную форму, поэтому, если не знаете или не читали, то сделайте сначала её, а затем приступайте читать эту статью дальше.

Допустим у вас уже есть страница с контактной формой и информацией.

Теперь время добавить карту яндекса. Вы можете перейти в конструктор карт и создать свою карту. В 90% случаев делают подобное:

Я же предлагаю сделать её более интерактивной и полезной. Так как нам придется выполнять код как php, так и js, то будет логичнее данную ноду оформить отдельным tpl файлом. Чтобы не показывать плохой пример, я скачаю тему Corolla и буду продолжать рассказывать на ней. И для полного понимания вот как выглядит все та же контактная страница но уже в королле.

Теперь займемся темизацией. Для начала переходим в sites/all/themes/corolla/templates и делаем копию node.tpl.php и называем её node--NID.tpl.php (где NID — номер ноды контактов.) У меня контактная форма расположена по адресу node/2 поэтому я создаю node--2.tpl.php

Для начала уберите сгенерированную карту из ноды и затем приступайте к дальнейшим инструкциям. Это не вызовет путаницы.

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

Как вы уже понимаете, нам не поможет код карты, который вы сгенерировали ранее. Да, его можно вставить сюда, но тогда смысла нету в данной затее никакого и данный код никак не кастомизируется. Мы же будем делать его сами.

Итак, начнем с php.

<?php
      // Присваиваем нужный адрес. Например адрес оффиса.
      // Постарайтесь указать адрес как можно точнее чтобы небыло сбоя.
      $office_address = 'г. Пермь, ул. Пермская 200';
      // Используя Yandex.Maps API мы получаем широту и долготу данного адреса.
      // Получаем в формате json а заместо curl используем drupal_http_request();
      $json = drupal_http_request('http://geocode-maps.yandex.ru/1.x/?format=json&geocode=' . $office_address . '&result=1');
      // Данные из результат записываем в отдельную переменную.
      $result = json_decode($json->data);
      // Получаем широту и долготу из ответа.
      $coordinates = $result->response->GeoObjectCollection->featureMember[0]->GeoObject->Point->pos;
      // Разбиваем строку чтобы получить массив.
      $coordinates_array = explode(" ", $coordinates);
      // Соденияем широту и долготу в нужном порядке (сначала 1, потом 0), а также разделяем запятой а не пробелом.
      // Дальше с этими координатами мы будем работать.
      $coordinates_ready = $coordinates_array['1'] . "," . $coordinates_array['0'];
      // Передаем наши координаты в JS.
      drupal_add_js(array('coordinates' => $coordinates_ready), 'setting');
      // Подключаем Yandex.Maps API.
      drupal_add_js('http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU');
      // Подключаем JS с которой будем работать далее.
      drupal_add_js(drupal_get_path('theme', 'corolla') . '/js/script.js');
?> 

Данный код получает координаты и приводит их в подобающий вид. Странно что координаты отдаются в одном порядке, а принимаются в другом. Не забываем что вставить данный код нужно в node--NID.tpl.php, в то место которое указано на скриншоте выше.

Теперь нам необходимо создать файл с именем «script.js“ по адресу sites/all/themes/corolla/js. В этом JS мы будем работать с Yandex API, и соответственно с самой картой. Как вы можете заметить из PHP кода, мы ему передаем все необходимые параметры, а именно координаты, а затем подключаем данный файл. Все остальные действия пойдут именно из него. Но для начала после PHP кода, сразу вставляем HTML код:

<div id="map"></div>
    <div id="map-route">
    Укажите свой адрес и мы покажем как до нас доехать:<br/>
    <input type="text“ id="map-route-address“ value="Пермь, "><input type="button“ id="map-start-route» value="Показать путь">
</div>

Данный код добавит текстовое поле для ввода адреса и кнопку, которые будут частью нашей карты, которые в последствии, покажут путь до нашего офиса. Теперь переходим непосредственно к заполнению нашего script.js.

(function($, Drupal) {
  $(document).ready(function() {
    // Забиваем координаты офиса в переменную. Координаты передаются друпалом.
    var coordinates = Drupal.settings.coordinates.split(',');
    // Создаем пустую глобальную переменную для маршрутов.
    var router;
 
    // Инициализируем Yandex карты.
    ymaps.ready(init);
 
    function init () {
      // Создаем карту
      var myMap = new ymaps.Map(«map“, {
        center: coordinates, // Координаты центра карты, в нашем случае офиса.
        zoom: 14
      }),
 
      // Добавляем на карту метку, опять же на координаты офиса.
      myPlacemark = new ymaps.Placemark(coordinates);
      myMap.geoObjects
        .add(myPlacemark);
 
      // Добавляем элементы управления картой. В нашем случае зум со смещением.
      myMap.controls
        .add('zoomControl', { left: 20, top: 160 }); 
 
      // Обрабатываем нажатие на показ маршрута от указанного пути.     
      $("#map-start-route“).click(function() {
        // Присваевыем текущее значение поле адреса.
        var route_address = $("#map-route-address»).val();
 
        // Генерируем маршрут.
        ymaps.route([
          route_address, // Адрес откуда отправляемся.
          coordinates    // Адрес куда отправляемся (наш офис).
        ], {
          mapStateAutoApply: true // Автозум под дистанцию.
        }).then(function (route) {
          // Если уже ранее был проложен маршрут, мы его удаляем чтобы небыло
          // наложения маршрутов и путанницы.
          if (router) myMap.geoObjects.remove(router);
          // В нашу переменную присваиваем маршрут переданный яндексом.
          router = route;
          // Прорисовываем маршрут на карте.
          myMap.geoObjects.add(router);
          // Получаем точки маршрута.
          var points = route.getWayPoints();  
          // Указываем что бабл будет красного цвета.
          points.options.set('preset', 'twirl#redStretchyIcon');
          // Устанавливаем иконку и текст в ней для стартового маршрута.
          points.get(0).properties.set('iconContent', 'Ваше местоположение');
          // Устанавливаем иконку на наше местоназначение.
          points.get(1).properties.set('iconContent', 'Мы здесь!');
        }, function (error) {
          // Выводим ошибку, если такая возникла. Например если путь хотят
          // проложить через океан.
          alert(«Возникла ошибка: " + error.message);
        });
      });   
    }
  })
})(jQuery, Drupal);

Теперь чутка добавим CSS. Для этого в sites/all/themes/corolla/css/page.css добавим:

#map {
  height: 550px;
  position: relative;
  margin-bottom: 50px;
  border: 1px solid #B0B0B0;
}
 
#map-route {
  position: absolute;
  bottom: -1px;
  left: -1px;
  background: white;
  padding: 7px;
  z-index: 501;
  border-top-right-radius: 6px;
  border: 1px solid #B0B0B0;
  border-bottom: none;
  border-left: none;
}

И должны получить следующее:
/sites/default/files/blog/37/attachments/5.jpg
А если укажем адрес и нажмем «Показать путь» то наша страница будет такой:

Как по мне, от такой карты проку больше чем от простой пометки. На этом все.

 
 
24.05.2013 — 14:36

Комментарии (5)

Аватар пользователя Stan
25.05.2013 — 08:37
1
 
 

Хорошая идея с маршрутом проезда

Аватар пользователя Niklan
25.05.2013 — 13:07
0
 
 

Персональные блоги тут не попадают на главную чтоли?

Аватар пользователя Stan
25.05.2013 — 18:49
0
 
 

Нет:)

Аватар пользователя petu
07.06.2013 — 04:55
0
 
 

Оригинальная карта — спасибо за идею.

Пару моментов:

  1. Интерактивная карта очень долго грузится на медленном интернете/старом браузере/старом компьютере и блокирует загрузку всей страницы — клиент может вообще не загрузить эту страницу. Как-то столкнулся с такой проблемой.
  2. Было бы правильнее не изменять тему Corolla, а сделать подтему для нее. Все изменения вносить в подтеме. Тогда Corolla сможет обновляться как обычный модуль.
  3. Интересно было бы, есть ли какая статистика, сколько людей вводит свой адрес и смотрит маршрут? Можно собрать при помощи Я.Метрика. Заодно, поглядеть, откуда пользователи собираются добираться ;).
Аватар пользователя Niklan
07.06.2013 — 11:53
0
 
 

Было бы правильнее не изменять тему Corolla, а сделать подтему для нее. Все изменения вносить в подтеме. Тогда Corolla сможет обновляться как обычный модуль.

Я на ней показал как на примере. Т.е. как это вшить в тему. Я хотел на бартике, но его править вообще грех.