Автоопределение города по IP на сайте
1 июня 2020 JavaScript jQuery
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить местоположение посетителя по его IP-адресу с помощью API Яндекс карт. Как это сделать рассмотрим в этой статье.
Подключите библиотеку jQuery и API Яндекс карт:
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="//api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
HTML-код
<div><b>Ваша страна:</b> <span id="user-country"></span></div> <div><b>Ваш регион:</b> <span id="user-region"></span></div> <div><b>Ваш город:</b> <span id="user-city"></span></div>
JS-код
<script>
window.onload = function () {
jQuery("#user-city").text(ymaps.geolocation.city);
jQuery("#user-region").text(ymaps.geolocation.region);
jQuery("#user-country").text(ymaps.geolocation.country);
}
</script>Файл нужно запустить на хостинге, веб-сервере или локальном веб-сервере, таком, как например, Open Server.
Популярные фильмы смотрите на https://metarankings.ru/best-movies/
Вывод текста в зависимости от текущего города
Следующий пример показывает, как можно изменять текст доставки в зависимости от города пользователя.
<script>
window.onload = function () {
var city = ymaps.geolocation.city;
if(city == 'Москва'){
jQuery("#user-city").text('Доставка по Москве бесплатно');
} else {
jQuery("#user-city").text('Доставка почтой по всей России');
}
}
</script>Список городов России
А вот список городов России, который вам возможно пригодится для реализации некоторых задач.
Сегодня я расскажу как можно легко и совершенно бесплатно создать версию для слабовидящих практически для любого сайта. Это решение подойдет и для сайтов государственных организаций, так как полностью соответствует ГОСТ. Наша версия сайта для слабовидящих будет с удобным меню и Читать далее
data-* атрибуты позволяют передавать некую скрытую информацию в элементах для её дальнейшего использования. Рассмотрим пример, когда на сайте есть список товаров и при нажатии кнопки "Купить", скрипту передавалось бы название и цена выбранного товара. <div id="157" class="product"> <div class="name">Системный блок</div> Читать далее
Возникла задача сделать прикрепление сайдбара, такое же, как в ВКонтакте. При скролле до верхней границы элемента он закрепляется, а при достижении определенного уровня останавливается и прокручивается до конца вместе со страницей. Раньше приходилось реализовывать подобное с нуля и это было Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
В этой статье рассмотрим как можно вызвать печать страницы с помощью JavaScript, распечатать отдельные блоки сайта и оформить распечатываемую страницу стилями. Вызвать печать на странице Печать документа на странице можно вызвать JavaScript функцией print(). Пример: <a href="javascript:(print());" class="button-print">Печать</a> Оформление страницы Читать далее
Сегодня рассмотрим пример создания кнопки наверх с использованием библиотеки jQuery, которая появляется при скролле страницы и при нажатии на неё слистывает страницу на самый верх. Подключаем библиотеку jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> Код HTML <div class="scroll-up"></div> Код CSS <style> .scroll-up { position:fixed; Читать далее
Данный пример подойдет всем сайтам у которых есть якорные ссылки, особенно будет актуально для лендинг пейдж. При нажатии на ссылку, которая содержит якорь, происходит плавная прокрутка к элементу. Обычно якорная ссылка содержит в атрибуте href ID элемента назначения, со знаком Читать далее
Использую библиотеку nikolaevevgeGeoIP для своего сайта. Она ведь вроде бы лимитов не имеет?
не работает
все отлично работает.
что-то не там подключил.
Не работает
Ваша страна: Не выводит
Ваш регион: Не выводит
Ваш город: Доставка по Москва бесплатно
Яндекс этот сервис предоставляет условно бесплатно. Так что если сайт прям ваш, то гуд и еще нужно сначала получить ключ апи, если кому-то делаете, то уже не очень гуд.