Traducir las rutas de navegación para Shopify Markets

Si su tienda Shopify vende en más de un idioma - usando Shopify Markets, Translate & Adapt, o una aplicación de traducción - sus rutas de navegación deben seguir el idioma del cliente. Breadcrumbs Uncomplicated lo hace automáticamente una vez que los menús y colecciones subyacentes están traducidos; las piezas en movimiento son pocas pero cada una vive en un sitio distinto.

Las cuatro cosas que se traducen

1. La etiqueta “Inicio” (el nodo más a la izquierda).
2. Las etiquetas de los elementos de menú (por ejemplo, “Men’s Shoes” → “Zapatos de hombre”).
3. Los nombres de las colecciones (distintos de las etiquetas de menú - Uomo frente a la etiqueta Men).
4. El título del producto (solo se muestra si ha activado esa opción).

Cada uno se traduce por separado en Shopify, en un sitio distinto.

Traducir “Inicio”

La etiqueta más a la izquierda toma por defecto “Home” y usa las traducciones estándar de Shopify para esa palabra en cada idioma soportado - “Inicio” en español, “Accueil” en francés, etc. - sin ninguna configuración por su parte. El ajuste Nombre que se va a mostrar para la categoría raíz en el Editor de Temas le permite cambiarlo si quiere una marca o un emoji en su lugar, pero la mayoría de las tiendas lo dejan en el valor por defecto.

Etiquetas de menú frente a nombres de colección

Si su colección se llama Uomo pero el elemento de menú que apunta a ella está etiquetado como Men's, la aplicación elige la etiqueta correcta para la ruta de navegación de forma automática, según las traducciones del idioma activo. La ruta usa por defecto el título del enlace de menú (Men's, o su traducción), y recurre al título de la colección (Uomo, o su traducción) cuando no se puede leer el enlace de menú. En cualquier caso, la ruta se renderiza en el idioma del comprador siempre que esa etiqueta esté traducida. Para la mayor consistencia en la redacción, traduzca sus elementos de menú en Shopify.

Cómo se renderiza la ruta de navegación (y qué pasa si hay un problema)

La ruta de navegación se renderiza por defecto en el servidor. El renderizado del lado del servidor (SSR, server-side rendering) es como se supone que funciona: la aplicación recorre el árbol de menús en el servidor, lee la etiqueta traducida en cada nivel, y entrega la ruta acabada en el HTML que Google ve, sin necesidad de JavaScript. Mientras cada elemento de menú apunte a una colección propia de Shopify en su lista de categorías, el SSR lleva la ruta entera.

Si parte de su menú no puede leerse en el servidor (porque un elemento de menú está enlazado incorrectamente), el escaparate recurre al renderizado en el lado del cliente (CSR, client-side rendering). El CSR es la red de seguridad: mantiene la ruta de navegación mostrando algo razonable, pero es más lento y no aporta las mismas garantías de traducción que el SSR. El CSR es el síntoma de un problema de configuración que el Asesor de categoría ya está señalando - no se apoye en él; atienda la advertencia.

La colección de la página no está en su lista de categorías

Si ha fijado un menú concreto como Categoría: nivel superior (la configuración recomendada) y el comprador llega a una colección que ese menú no referencia, la aplicación no tiene nada que recorrer y recurre al CSR.

Se está ignorando una advertencia del Asesor de categoría

Varias advertencias del Asesor señalan las formas de enlace de menú que empujan la ruta de navegación al respaldo CSR:

• Reemplazar páginas y blogs con colecciones. El propio texto de ayuda del Asesor explica la consecuencia: “aún se puede representar una ruta de navegación parcial utilizando JavaScript del lado del cliente (más lento), pero existen varios inconvenientes y muchas funciones avanzadas (como traducciones y recuento de productos) no pueden funcionar.”
• Recrear enlaces de dirección web como enlaces de recurso adecuados. Los elementos de menú añadidos como URL plana se comportan como enlaces a páginas, con el mismo efecto descendente en el renderizado.
• Vincular a colecciones sin filtros. Los elementos de menú a colecciones filtradas no pueden exponer los datos que la ruta de navegación necesita para traducirse.

El Asesor presenta cada una de estas en el administrador de su aplicación con un siguiente paso concreto (normalmente un cambio de una línea en Tienda online > Navegación). Atender las advertencias mantiene sus rutas de navegación en la vía SSR, lo que las mantiene conscientes del idioma de forma automática - la aplicación lee las traducciones de Shopify directamente, así que un elemento de menú traducido aparece en la ruta en cuanto Translate & Adapt lo recoja.

Para rutas de navegación totalmente traducidas sin sorpresas, atienda cada advertencia del Asesor de categoría antes de pasar a multilingüe.

Subrutas de Shopify Markets

Si su mercado francés vive en /fr/... y su mercado inglés en /..., la aplicación detecta el idioma desde el prefijo de la URL y renderiza el idioma correcto sin necesidad de configuración extra. La misma pauta funciona para cualquier combinación de idioma por defecto más mercado - una tienda con eslovaco por defecto y un mercado inglés es una ilustración: una visita a /collections/muzi (eslovaco por defecto) y una visita a /en/collections/men (mercado inglés) renderizan ambas rutas de navegación correctamente traducidas, porque el prefijo de idioma se elimina antes de ejecutar la búsqueda de categoría. Sea cual sea el idioma por defecto de su tienda y sus mercados adicionales, la aplicación los maneja igual.

Translate & Adapt frente a aplicaciones de traducción de pago

Mientras sus traducciones vivan en la API de traducción nativa de Shopify (que usan tanto Translate & Adapt como las principales aplicaciones de pago), las rutas de navegación las toman automáticamente. No se necesita ninguna integración especial.

Este screencast explica cómo usar la propia herramienta Translate & Adapt de Shopify para traducir los elementos de menú de los que leen sus rutas de navegación:

¿Y si falta una traducción?

Si una colección o un elemento de menú aún no se ha traducido, Shopify muestra el valor del idioma por defecto para ese nodo, así que la ruta de navegación se sigue renderizando de extremo a extremo - simplemente con un nodo en el idioma por defecto hasta que lo traduzca.

Resumen

Para una tienda multilingüe, la configuración es directa: traduzca sus elementos de menú (y, como respaldo, los nombres de sus colecciones) en Shopify, atienda cada advertencia del Asesor de categoría, y la ruta de navegación se renderiza totalmente traducida de forma automática. El respaldo del lado del cliente está ahí para casos en los que se está ignorando una advertencia del Asesor - mantiene la ruta mostrando algo razonable, pero la solución real es siempre actuar sobre la advertencia, no apoyarse en el respaldo.