Las tiendas Shopify internacionales suelen requerir canales de soporte distintos por región. El JavaScript del tema puede llamar https://my.ipin.io/info y mostrar el enlace de soporte adecuado.
Explicación de la API
Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.
{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}Casos de uso
Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.
- Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.
- Mostrar enlaces de soporte por IP en Shopify
- Explicación de la API
- Recomendaciones SEO y UX
Lógica de implementación
Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
- Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
- Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.
- Todos los ejemplos siguientes usan directamente
https://my.ipin.io/info, con comentarios y textos de interfaz localizados. - El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.
Ejemplo de código
Todos los ejemplos siguientes usan directamente https://my.ipin.io/info, con comentarios y textos de interfaz 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 {
// Llamada del navegador a /info: detecta la IP del 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) {
// Mantener el valor predeterminado si falla la solicitud API.
buttons.forEach(btn => btn.href = "/support");
}
});
</script>Recomendaciones SEO y UX
El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.
Errores comunes
Los siguientes puntos afectan la precisión del artículo, la utilidad del código y la credibilidad de la explicación de la API.
- Los siguientes puntos afectan la precisión del artículo, la utilidad del código y la credibilidad de la explicación de la API.
- El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.
- Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
- Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.
Resumen
Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.
Preguntas frecuentes
Las preguntas siguientes fueron redactadas específicamente para este artículo y se relacionan directamente con la implementación.