Como exibir a cidade e o estado do usuário no WordPress com JavaScript – Guru do WordPress

Reproduzir vídeo

Descrição

Neste vídeo, você vai aprender como utilizar o código em JavaScript para exibir a cidade e o estado do usuário em seu site WordPress. Veremos exemplos de aplicações em formulários e como inserir o resultado em divs de texto. Aprenda agora como tornar a experiência de seus visitantes ainda mais personalizada!

Códigos

Retornar Cidade do visitante no input do forms
var traco = " - ";
        fetch('https://api.ipify.org?format=json')
        .then(response => response.json())
        .then(data => {
            fetch(`https://ipapi.co/${data.ip}/json/`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('form-field-estado').value = data.region;
                document.getElementById('form-field-cidade').value = data.city;
            })
        })
Exibindo a cidade e o estado atual através de uma API

    fetch('https://api.ipify.org?format=json')
  .then(response => response.json())
  .then(data => {
    fetch('https://ipapi.co/' + data.ip + '/json/')
      .then(response => response.json())
      .then(data => {
        const cidadeEstado = data.city + " - " + data.region;
        const elements = document.querySelectorAll('.cidadeEstado');
        elements.forEach(element => {
          element.textContent = cidadeEstado;
        });
      });
  });

Bônus! Esse script abaixo, ele salva a cidade no cookie e recupera do cookie pra evitar requisições extras
const getLocation = () => {
  const cookieLocation = getCookie("localizacao");
  if (cookieLocation) {
    updateElementsWithLocation(cookieLocation);
    return;
  }
  
  fetch('https://api.ipify.org?format=json')
    .then(response => response.json())
    .then(data => {
      fetch('https://ipapi.co/' + data.ip + '/json/')
        .then(response => response.json())
        .then(data => {
          const location = data.city + " - " + data.region;
          setCookie("localizacao", location, 30);
          updateElementsWithLocation(location);
        });
    });
};

const updateElementsWithLocation = (location) => {
  const elements = document.querySelectorAll('.cidadeEstado');
  elements.forEach(element => {
    element.textContent = location;
  });
};

const setCookie = (name, value, days) => {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toUTCString();
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
};

const getCookie = (name) => {
  const nameEQ = name + "=";
  const ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
  }
  return null;
};

getLocation();