Введение

Благодарим за покупку скрипта. Его установка займет минимум вашего времени. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

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

Требования к установке:
• jQuery (который по умолчанию уже подключен на сайтах uCoz)

Первый шаг: загрузка файлов

Перейдите в Панель управления » Файловый менеджер.

В правом верхнем углу кликните на кнопку "Создать папку", введите название папки img.

Кликните на галочку и папку с нужным именем создано!:).

Теперь зайдите в папку img и загрузите в эту папку файл "icon.png" (или любой другой, который вам подойдет) из каталога иконки архива со скриптом. В архиве доступно два вида иконок.

Второй шаг: установка кода

Все изменения будут производиться в шаблоне Страница служебных форм модуля интернет-магазин. В зависимости от предпочтений, вы можете разместить карту Yandex или Google. Для этого в шаблоне перед тегом </head> добавьте один из следующих кодов.

Yandex-карты:

<?if($PAGE_ID$ == 'checkout')?><script type="text/javascript" src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script><?endif?>

Google-карты:

<?if($PAGE_ID$ == 'checkout')?><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><?endif?>

Следующим этапом нужно будет найти в коде шаблона переменную $ORDER_FIELDS$ и после неё на новую строку вставить код контейнера для карты:

<div data-yaMAP id="map"></div>

<script type="text/javascript">
jQuery(function ($) {
   /**
    * НАСТРОЙКИ
    */
   var geoCOORDINATES   = [], // координаты посетителя
       geoZOOM          = 9, // коэффициент масштабирования
       type             = 'yandex', // yandex или google
       yandexMARKER     = {
         icon:    'islands#darkGreenCircleDotIcon', // вид метки yandex
         color:   'darkgreen' // цвет метки yandex
       },
       googleMARKER     = '/img/icon.png', // вид метки google (изображение размером 22*40px)
       numPHONE         = 1, // номер поля для телефона
       numADRESS        = 2, // номер поля для адреса
       countrySYPEX     = {},
       citySYPEX        = {},
       _SS_             = window.sessionStorage,
       checkoutMAP      = {
         fillFORM: function() {
            $('#order-fld-' + numPHONE).val(countrySYPEX.phone);
            $('#order-fld-' + numADRESS).val(countrySYPEX.name_ru + ', ' + citySYPEX.name_ru);
         },
         getSYPEX:   function() {
            if (_SS_.coordinates) {
               geoCOORDINATES = _SS_.coordinates.split('|');
               countrySYPEX = JSON.parse(_SS_.country);
               citySYPEX = JSON.parse(_SS_.city);
               checkoutMAP.mapINIT();
               checkoutMAP.fillFORM();
            } else {
               $.get('http://api.sypexgeo.net/', function (dataSYPEX) {
                  geoCOORDINATES.push(dataSYPEX.city.lat, dataSYPEX.city.lon);
                  countrySYPEX = dataSYPEX.country;
                  citySYPEX = dataSYPEX.city;
                  _SS_.setItem('coordinates', dataSYPEX.city.lat + '|' + dataSYPEX.city.lon);
                  _SS_.setItem('country', JSON.stringify(dataSYPEX.country));
                  _SS_.setItem('city', JSON.stringify(dataSYPEX.city));
                  checkoutMAP.mapINIT();
                  checkoutMAP.fillFORM();
               });
            }
         },
         mapINIT: function() {
            switch (type) {
               case 'yandex':
                  ymaps.ready(function () {
                     var myMap   = new ymaps.Map('map', {
                        center:  geoCOORDINATES,
                        zoom:    geoZOOM
                     });
                     myMap.geoObjects.add(new ymaps.Placemark(
                        geoCOORDINATES,
                        {},
                        {
                           preset:     yandexMARKER.icon,
                           iconColor:  yandexMARKER.color
                        }
                     ));
                  });
                  break;
               case 'google':
                  var latLON     = new google.maps.LatLng(geoCOORDINATES[0], geoCOORDINATES[1]),
                      mapProp    = {
                        center:     latLON,
                        zoom:       geoZOOM,
                        mapTypeId:  google.maps.MapTypeId.ROADMAP
                      },
                      map        = new google.maps.Map(document.querySelector('#map'), mapProp),
                      marker     = new google.maps.Marker({
                        position:   latLON,
                        map:        map,
                        icon:       googleMARKER
                      });
                  break;
            }
         }
       };
   // !!! /конецНАСТРОЕК !!!
   checkoutMAP.getSYPEX();
});
// ver 1.0 © masterwind
</script>

Третий шаг: установка стилей

В шаблоне Панель управления » Управление дизайном » Интернет-магазин: Таблица стилей (CSS) в самом конце кода необходимо разместить стиль для контейнера карты.

Если вы хотите разместить небольшую карту рядом с формой, тогда разместите эти стили:

/* Стили для блока карты */
@media only screen and (min-width:1200px) {
 [data-yaMAP]{display:inline-block; width:63%; height:300px; }
 #checkout-form{width:35%; min-width:200px; display:inline-block; margin:0 10px 0 0; }
 #checkout-form input, #checkout-form textarea, #checkout-form select{width:100%; resize:vertical; box-sizing:border-box; }
}

@media only screen and (max-width:1199px) {
 [data-yaMAP]{width:100%; height:350px; }
 #checkout-form{width:100%; display:block; margin:0; }
 #checkout-form input, #checkout-form textarea, #checkout-form select{width:100%; resize:vertical; box-sizing:border-box; }
}

Иначе добавьте нижеследующий код для отображения карты по ширине основного блока под формой.

[data-yaMAP]{width:100%; height:350px; }

Четвёртый шаг: настройка и использование

Использование довольно простое, при покупке товара на странице оформления товара будет отображаться карта с отметкой местоположения покупателя, а в форме заказа будет добавлен адрес (страна, город) и телефонный код города.

Для настройки доступны следующие переменные:
• geoZOOM = 9 — коэффициент масштабирования карты. Диапазон от 0 до ... — выбираете опытным путем.
• type = 'yandex' — тип отображаемой карты, принимает значение yandex либо google
• yandexMARKER = {
  • icon: 'islands#darkGreenCircleDotIcon' — иконка метки на карте Яндекс, можно выбрать по вашему усмотрению на странице https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage
  • color: 'darkgreen' — цвет метки на карте Яндекс. Цвет можно добавлять в любом доступном для CSS формате.
  }
• googleMARKER = '/img/icon.png' — вид метки google (используется изображение размером 22*40px). В качестве исходного примера используется картинка, которую загружали в файловый менеджер по инструкции ранее. В архиве доступно несколько изображений на выбор -
• numPHONE = 1 — номер поля для телефона*.
• numADRESS = 2 — номер поля для адреса доставки*.

* номера полей необходимо взять со страницы управления полями заказа, путь: Панель управления » Интернет-магазин » Управление полями заказа.