27 янв. 2025

Как в Craftum определить город посетителя

Вы сможете определить страну, город, IP-адрес, вывести эти данные пользователю или передать в поля формы обратной связи

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

Демо

Инструкция

Копируете скрипт;
Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в <body> Tag;
Если нужно выводить текст в кнопке или любом текстовом блоке, то просто ставите ключ*;
Если нужно передавать данные в скрытые поля формы*, то ставите ключ* для форм;

*Ключи указаны в блоке для вставки кода
**Добавить Скрытое поле, вставить ключ в «Имя переменной»

Ключи для вставки в текстовые поля или кнопки

%%%region_en%%% - Регион на английском
%%%region_ru%%% - Регион на русском
%%%city_en%%% - Город на английском
%%%city_ru%%% - Город на русском
%%%country_en%%% - Страна на английском
%%%country_ru%%% - Страна на русском
%%%ip%%% - IP-адрес

Ключи для вставки в скрытые поля форм

region_en
region_ru
city_en
city_ru
country_en
country_ru
ip

Скрипт в <body>

<script>
    const STORAGE_KEY = 'GeoDataKey'; // Имя записи в localStorage, можно изменить для тестирования
    const STORAGE_DAYS = 1; // Количество дней хранения данных в localStorage
    
    async function fetchGeoData(){try{let e=await fetch("https://geo.tildacdn.com/geo/full/");if(!e.ok)throw Error("Ошибка получения данных GeoAPI");return await e.json()}catch(n){return console.error("Ошибка при получении GeoAPI данных:",n),null}}function saveToStorage(e,n){let t=new Date;t.setDate(t.getDate()+STORAGE_DAYS),localStorage.setItem(e,JSON.stringify({data:n,expires:t.getTime()}))}function loadFromStorage(e){let n=localStorage.getItem(e);if(!n)return null;let t=JSON.parse(n);return new Date().getTime()>t.expires?(localStorage.removeItem(e),null):t.data}function replaceTextInNode(e,n){!e.classList?.contains("t264")&&"code"!==e.tagName?.toLowerCase()&&e.childNodes.forEach(e=>{if(e.nodeType===Node.TEXT_NODE){let t=e.nodeValue,r=!1;if(Object.keys(n).forEach(e=>{t.includes(e)&&(t=t.replace(e,n[e]),r=!0)}),r){let o=document.createElement("span");o.innerHTML=t,e.parentNode.replaceChild(o,e)}}else e.nodeType===Node.ELEMENT_NODE&&replaceTextInNode(e,n)})}function replaceTextKeys(e){let n={"%%%region_en%%%":e.region?.name_en||"","%%%region_ru%%%":e.region?.name_ru||"","%%%city_en%%%":e.city?.name_en||"","%%%city_ru%%%":e.city?.name_ru||"","%%%country_en%%%":e.country?.name_en||"","%%%country_ru%%%":e.country?.name_ru||"","%%%ip%%%":e.ip||""};replaceTextInNode(document.body,n)}function replaceFormInputValues(e){let n={region_en:e.region?.name_en||"",region_ru:e.region?.name_ru||"",city_en:e.city?.name_en||"",city_ru:e.city?.name_ru||"",country_en:e.country?.name_en||"",country_ru:e.country?.name_ru||"",ip:e.ip||""};document.querySelectorAll('form input[type="hidden"]').forEach(e=>{let t=e.getAttribute("name");n.hasOwnProperty(t)&&(e.value=n[t])})}async function functionAnKuGeoAPI(){let e=loadFromStorage(STORAGE_KEY);if(e)replaceTextKeys(e),replaceFormInputValues(e);else{let n=await fetchGeoData();n&&(saveToStorage(STORAGE_KEY,n),replaceTextKeys(n),replaceFormInputValues(n))}console.log }"loading"!==document.readyState?functionAnKuGeoAPI():document.addEventListener("DOMContentLoaded",()=>{functionAnKuGeoAPI()});
</script>

Комментарии

Модификации

Подборка кодовых модификаций для сайтов на Craftum, позволяющая решить любые задачи, выходящие за рамки стандартного конструктора Craftum.
С генераторами кода и видео-инструкциями.
Расширения для Craftum, с которым ты можешь больше и быстрее создать продающий и впечатляющий сайт для себя и своих клиентов.

Для сайта

Craftum Сайт создан на Craftum