Lojas Shopify internacionais costumam precisar de canais de suporte diferentes por região. O JavaScript do tema pode chamar https://my.ipin.io/info e mostrar o link de suporte adequado.
Explicação da API
A chamada no navegador verifica o IP do visitante e retorna o IP, país, região e cidade dele. É adequada para conteúdo regional.
{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}Cenários de aplicação
Esses cenários mostram o valor da interface de informações IP e separam claramente IP do servidor e IP do visitante.
- Esses cenários mostram o valor da interface de informações IP e separam claramente IP do servidor e IP do visitante.
- Mostrar links de suporte por IP no Shopify
- Explicação da API
- Recomendações de SEO e UX
Lógica de implementação
Antes de implementar, identifique quem faz a requisição: requisições do servidor retornam IP do servidor, requisições do navegador retornam IP do visitante.
- Antes de implementar, identifique quem faz a requisição: requisições do servidor retornam IP do servidor, requisições do navegador retornam IP do visitante.
- A chamada no navegador verifica o IP do visitante e retorna o IP, país, região e cidade dele. É adequada para conteúdo regional.
- Todos os exemplos abaixo usam diretamente
https://my.ipin.io/info, com comentários e textos de interface localizados. - O conteúdo padrão deve permanecer completo e legível, enquanto o conteúdo regional atua como melhoria. Buscadores rastreiam conteúdo estável e a página continua utilizável se a API falhar.
Exemplo de código
Todos os exemplos abaixo usam diretamente https://my.ipin.io/info, com comentários e textos de interface localizados.
theme.liquid
<a class="ipin-support-btn" href="/support">Support</a>
<script>
document.addEventListener("DOMContentLoaded", async function () {
const buttons = document.querySelectorAll(".ipin-support-btn");
const map = { TW: "/support/tw", US: "/support/us", JP: "/support/jp" };
try {
// Chamada no navegador para /info: detecta o IP do visitante.
const info = await fetch("https://my.ipin.io/info").then(res => res.json());
buttons.forEach(btn => btn.href = map[info.country] || "/support");
} catch (e) {
// Manter o valor padrão se a requisição da API falhar.
buttons.forEach(btn => btn.href = "/support");
}
});
</script>Recomendações de SEO e UX
O conteúdo padrão deve permanecer completo e legível, enquanto o conteúdo regional atua como melhoria. Buscadores rastreiam conteúdo estável e a página continua utilizável se a API falhar.
Erros comuns
Os pontos abaixo afetam a precisão do artigo, a usabilidade do código e a credibilidade da explicação da API.
- Os pontos abaixo afetam a precisão do artigo, a usabilidade do código e a credibilidade da explicação da API.
- O conteúdo padrão deve permanecer completo e legível, enquanto o conteúdo regional atua como melhoria. Buscadores rastreiam conteúdo estável e a página continua utilizável se a API falhar.
- Antes de implementar, identifique quem faz a requisição: requisições do servidor retornam IP do servidor, requisições do navegador retornam IP do visitante.
- Esses cenários mostram o valor da interface de informações IP e separam claramente IP do servidor e IP do visitante.
Resumo
A chamada no navegador verifica o IP do visitante e retorna o IP, país, região e cidade dele. É adequada para conteúdo regional.
Perguntas frequentes
As perguntas abaixo foram escritas especificamente para este artigo e estão diretamente ligadas à implementação.