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

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

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



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

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


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

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

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

Сергей    04.09.2013    21100    4.8 из 5.0 (28)

Оцените материал:
    Обновление от 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 страницы. Удачи!

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

    Обсуждение

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

    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>

    Не хочет прописывать в поле
    g
    26
    Добрый день.

    Спасибо за скрипт

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

    А если не нажимает на кнопку карты, то может прописать в адрес доставки что хочет.

    Пример - menu.am
    avatar
    0
    27
    Добрый день! Да, такое возможно. Изучите API Яндекс.Карт, готового решения, к сожалению, нет.
    avatar
    28
    А как можно скрыть определенные поля для пользователей из конкретного города? Пишу такой код, но не работает, вдруг кто может указать в чем ошибка:

    function init() {
     var geolocation = ymaps.geolocation;
    if(geolocation=='Ташкент'){
    document.getElementById(description6).style.display = "block";
    }
     console.log(geolocation.city);
     }
    avatar
    0
    29
    Если надо скрыть, то добавьте else

    Код
    if(geolocation=='Ташкент'){
         document.getElementById(description6).style.display = "block";
    } else {
         $('#description6').hide()
    }
    avatar
    30
    Спасибо за ответ, не ожидал что получу его! К сожалению, не получается выполнить скрипт - элемент не скрывается. Пробовал уже не только с желаемым полем, а с другими более очевидными элементами, типа "title" в шапке сайта - всё равно не работает. При этом в консоль пишет что города определяются правильно.

    Пробовал if(geolocation.city=='Ташкент') - всё равно не помогает.
    avatar
    0
    31
    а console.log(geolocation.city); что показывает? город определяется?
    avatar
    32
    Да, в консоль специально выше в коде оставлял вывод города, чтобы можно было убедиться что город написан правильно.

    document.getElementById("item-heading").style.display = "none"; - пытаюсь скрыть для проверки, тоже не выходит.
    avatar
    33
    Нашел причину: на моей странице не было div с id, я вписывал туда названия class и поэтому не работало по геолокации + необходимо было указать "var geolocation = ymaps.geolocation.city;". После этого в консоли увидел ошибку "Cannot read property 'style' of null" и тут дошло что я прописываю названия class, а не id.

    Если в будущем кому-то будет полезно, то правильный код следующий:

    ymaps.ready(init);
    function init() {
     var geolocation = ymaps.geolocation.city; 
     if(geolocation=='Москва'){
     document.getElementsByClassName('class_name')[0].style.display='none';

    }

    // '[0]' - нужен для того, чтобы возвращался первый элемент с этим классом, в случае, если у вас много одинаковых элементов на странице (типа массива получается).

    //конечно лучше так не делать и сразу присвоить id к нужным элементам, но если запарились как я, то может поможет моё решение.

    //для скрытия элементов по id - будет работать метод, который подсказал Сергей в комментарии выше. 

    Спасибо за внимание!
    Определение города по IP для сайта
    Определение города по IP для сайта