Как определить город клиента и вывести в меню для Tilda

Определение через Yandex

Задаём нужному тексту ссылку #yourcity
Если текст в ZeroBlock, то можно задать класс yandex_map

Получаем ключ API-ключ https://developer.tech.yandex.ru/

Добавляем код для Yandex в блок Другое - Т123
Вставляем свой ключ вместо надписи APIKEY

Определение через DaData

Задаём нужному тексту ссылку #geo-city
Если текст в ZeroBlock, то можно задать класс geo-city

Регистрируемся и получаем API-ключ в DaData https://dadata.ru/

Добавляем код для DaData в блок Другое - Т123
Вставляем свой ключ вместо надписи TOKEN

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Определяем город посетителя через Yandex или DaData. Вы водим город в стандартное меню или в ZeroBlock

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера

Yandex


<script src="https://api-maps.yandex.ru/2.1/?apikey=APIKEY&lang=ru_RU" type="text/javascript"></script>
<style>
#yandexmap {
    width: 100%; 
    height: 400px;
}
</style>
<div id="yandexmap"></div>
<script>
document.addEventListener("DOMContentLoaded", function(){
ymaps.ready(init);
function init() {
    var geolocation = ymaps.geolocation,
        myMap = new ymaps.Map('yandexmap', {
            center: [55, 34],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        });
    let browsGeo = false;  let city = "";
    function writeCity(em){
        document.querySelector('.yandex_map .tn-atom').innerText = em;
        document.querySelector('a[href="#yourcity"]').innerText = em;
    };
    geolocation.get({
        provider: 'browser',
        mapStateAutoApply: true
    }).then(function (result) {
        result.geoObjects.options.set('preset', 'islands#blueCircleIcon');
        myMap.geoObjects.add(result.geoObjects);browsGeo = true;
        let city = (result.geoObjects.get(0).properties.get('text')).split(',');
        if(city != undefined) writeCity(city[1]);
    });
    setTimeout(function(){
        if(!browsGeo){
            geolocation.get({
                provider: 'yandex',
                mapStateAutoApply: true
            }).then(function (result) {
            myMap.geoObjects.add(result.geoObjects);
            let city = (result.geoObjects.get(0).properties.get('text')).split(',');
            if(city != undefined) writeCity(city[1]);
            });
        };
    }, 2000);
}
});
</script>

Библиотека для примера

DaData


<script>
document.addEventListener("DOMContentLoaded", function(){
let token = "TOKEN";   
let url = "https://suggestions.dadata.ru/suggestions/api/4_1/rs/geolocate/address";
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else {  console.log("Geolocation is not supported by this browser.")  }
}

let latitude=''; let longitude='';
function showPosition(position) {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
};
getLocation();

setTimeout(function(){
    let query = {};
    query['lat'] = latitude;
    query['lon'] = longitude;
    let options = {
        method: "POST",
        mode: "cors",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "Authorization": "Token " + token
        },
        body: JSON.stringify(query)
    }
    
    let res = '';
    fetch(url, options)
        .then(response => response.text())
        .then(result =>  res = result )
        .catch(error => console.log("error", error));

    setTimeout(function(){
        let city = JSON.parse(res);
        //city = (city['suggestions'][0]['value']).split(',');
        city = city['suggestions'][0]['data']['city'];
        
        document.querySelector('.geo-city .tn-atom').innerText = city;
        document.querySelector('a[href="#geo-city"]').innerText = city;

        console.log(city[0]);
     }, 1000);
}, 1000);
});
</script>