Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


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

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

Определение города по IP для сайта

Сергей    04.09.2013    16689    4.7 из 5.0 (26)

Оцените материал:
    Обновление от 05.02.2016

    В данный момент API Карт, подключаемое в панели управления uCoz возвращает только страну и координаты посетителя.

    О заметке

    Определение местоположения покупателя - одна из важнейших задач в электронной коммерции.

    В заметке будем рассматривать способ определения страны, региона и города посетителя для сайта. Вся информация получена из песочницы API Яндекс.Карт, мы просто ее подготовим для магазина uCoz.

    Подключение сервиса Яндекс.Карты

    В первую очередь необходимо подключить сервис карт в панели управления сайтом. Для этого переходим в настройки интернет магазина.

    Определение города по IP для сайта

    В настройках листаем вниз страницы и выбираем в пункте "Использовать сервис карт:" - Yandex Maps.

    подключение API Яндекс Карт uCoz

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

    определение города по ip

    На открывшейся странице заполняем данные и нажимаем "Получить API ключ".

    Получить API ключ

    На открывшейся странице копируем полученный API ключ и копируем его в панель управления сайтом.

    Не забываем сохраниться

    Определение местоположения

    В первую очередь необходимо в head страницы (например, оформления заказа) поместить код:

    <script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

    Теперь размещаем сам скрипт определения местоположения.

    Дожидаемся загрузки API и готовности DOM.

    ymaps.ready(init);

    Записываем местоположение:

    function init() {
     // Данные о местоположении, определённом по IP
      var geolocation = ymaps.geolocation;
     // Результат смотрим в консоли
      console.log(geolocation.country, geolocation.city, geolocation.region);
    }
    

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

    ПеременнаяОписание
    geolocation.countryСтрана
    geolocation.regionРегион
    geolocation.cityГород

    Автозаполнение адреса доставки

    Расширим наш скрипт, чтобы облегчить пользователям оформление заказа, внесем полученные данные о местоположении в поле формы "Адрес доставки".

    Для этого нам нужно знать id поля с адресом доставки, для этого заходим в Панель управления сайтом - Интернет магазин - Управление полями заказа. Смотрим последнюю перед символом "$" цифру в "Код поля для шаблона":

    В примере это цифра 2, а id = "order-fld-2". Теперь мы можем взаимодействовать с этим полем. Если у вас подключен jQuery, то просто запишем местоположение в это поле.

    if (geolocation) {
     $("#order-fld-2").html(geolocation.country + ', ' + geolocation.region + ', ' + geolocation.city);
    } else {
     console.log('Не удалось установить местоположение');
    }
    

    Вот, что получилось:

    пример определения города по IP

    Итого

    Объединим все вместе и получим:

    ymaps.ready(init);
    function init() {
     var geolocation = ymaps.geolocation;
     if (geolocation) {
     $("#order-fld-2").html(geolocation.country + ', ' + geolocation.region + ', ' + geolocation.city);
     } else {
     console.log('Не удалось установить местоположение');
     }
    }
    

    Теперь можете (скачать скрипт).

    И не забудьте заменить id поля на свой и подключить <script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>в head страницы. Удачи!

    Статьи по теме

    Обсуждение

    Всего комментариев: 25

    avatar
    1
    Это работает, круто!
    avatar
    2
    Спасибо. Нужно попробовать!
    avatar
    3
    А куда вставить сам скрипт?
    avatar
    4
    Сергей, в шаблон той страницы, на которой хотите вывести город пользователя. Например, на странице оформления заказа
    avatar
    5
    Спасибо за подсказку.
    Можно к мануалу добавить для таких как я:
    Скрипт загрузить на сервер сайта в папку "js" и на странице, где хотим вывод местоположения: <script type="text/javascript" src="/js/ucozMagazines.geoip.js"></script>
    avatar
    6
    Сергей, спасибо за комментарий. На самом деле скрипт можно в любую папку загрузить, главное правильно подключить его в шаблоне.

    Кто-то может хранить скрипты в другой папке, например так:
    <script type="text/javascript" src="/script/ucozMagazines.geoip.js"></script>
    avatar
    7
    Что то не работает.
    Делаю так:
    1. Подключил сервис карт по инструкции.
    2. Перед </head> прописываю:
    <script src="//api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    <script type="text/javascript" src="/js/ucozMagazines.geoip.js"></script>
    3. В скрипте поле order-fld-2 заменил на order-fld-4 (т.к. у меня 4)
    4. Загрузил скрипт в папку /js/ucozMagazines.geoip.js
    5. ???
    6. не работает :(
    avatar
    8
    А все понял. Оказывается с полем типа text такое не прокатывает, только с textarea.

    Вопрос: а что еще яндекс умеет определять? Индекс почтовый к примеру сможет?
    avatar
    9
    Light, для текстового поля будет так:
    ymaps.ready(init);
    function init() {
    var geolocation = ymaps.geolocation;
    if (geolocation) {
    $('#order-fld-2').attr("value",geolocation.country + ', ' + geolocation.region + ', ' + geolocation.city);
    } else {
    console.log('Не удалось установить местоположение');
    }
    }
    Просто замените это в файле скрипта.

    Даже не знаю насчет индекса почты, разве что индекс центрального отделения. Вот здесь еще посмотрите http://api.yandex.ru/maps/jsbox/geocode
    avatar
    10
    mimi, она находится в шаблонах "Страницы служебных форм" при условии <?if $PAGE_ID$ = 'checkout'?>...<?endif?>
    w
    11
    :D Работает!!!
    Подключил этот скрипт к почтовой форме. К ней же подлючен скрипт который передает ссылку на страницу и название материалла :)
    Т.К. решил обойтись без магазина на юкоз. Магазин сделал из каталога файлов
    avatar
    12
    Да, конечно, это работает не только для любого модуля uCoz)) главное правильно указать, куда записать место положения)
    avatar
    13
    Привязать город к стоимости доставки можно только через внешний калькулятор доставки. Урока такого пока нет.
    avatar
    14
    Здравствуйте Сергей. Подскажите, а можно ли сделать наоборот? Что бы при оформлении заказа покупатель ввел адрес доставки, а скрипт поставил метку на карте?
    avatar
    0
    15
    Здравствуйте.

    Сделать можно, но нужно разбираться с API Яндекс.Карт. Больше ничего не могу добавить :(
    n
    16
    Здравствуйте Сергей! не совсем понял что это и где- Дожидаемся загрузки API и готовности DOM ???
    и если честно вообще ничего не получается, то-ли чего-то не знаю или не так понимаю. 
    В идеале пытаюсь сделать как тут http://zipweld.ru/shop/43/desc/svarochnaja-gorelka-kemppi-fe-27-3-5-m
    l
    17
    Привет. На самом деле урок очень полезен и у меня все получилось, но не с первого раза, потому что расписаны и разделены коды что не нужно читателям. Картину восстанавливают только комментарии. Лишь благодаря им все получилось!

    вот этот кусочек совсем лишний
    avatar
    0
    18
    Спасибо за отклик. Но есть же пункт Итого, где весь код собран воедино :)
    g
    19
    Замечательный скрипт. Все встает. Для тех кто отправляет по всей России- это палочка выручалочка. Потому-что чаще покупателям лень вводить правильно и развернуто информацию. Сергей, еще раз спасибо. Вы делаете наш бизнес легче и качественнее!
    f
    20
    Скажите как сделать, чтобы, зная место доставки, скрывать ненужные способы доставки (самовывоз, курьерская). Это очень актуально
    avatar
    21
    Здравствуйте.
    А как создать и указать свою строку для ставки? Вместо $('#order-fld-2')
    avatar
    0
    22
    Здравствуйте!

    Замените '#order-fld-2' на селектор для своего поля.
    avatar
    23
    <script>
    ymaps.ready(init);
    function init() {
    var geolocation = ymaps.geolocation;
    if (geolocation) {
    $('123').attr("value",geolocation.country + ', ' + geolocation.region + ', ' + geolocation.city);
    } else {
    console.log('Не удалось установить местоположение');
    }
    }
    </script>

    <body>
    <form action="handler.php" method="post">
      <p><input type="text" name="123"></p>
      <p><input type="submit" value="Отправить"></p>
     </form>

    </body>

    Если можно - пример(((
    avatar
    0
    24
    $('input[name="123"]')
    avatar
    25
    <script>
    ymaps.ready(init);
    function init() {
    var geolocation = ymaps.geolocation;
    if (geolocation) {
    $('input[name="123"]').attr("value",geolocation.country + ', ' + geolocation.region + ', ' + geolocation.city);
    } else {
    console.log('Не удалось установить местоположение');
    }
    }
    </script>

    <form action="handler.php" method="post">
     <input type="text" name="123" value=" ">
      <p><input type="submit" value="Отправить"></p>
     </form>

    Не хочет прописывать в поле
    Определение города по IP для сайта
    Определение города по IP для сайта