Saltar al contenido

Mes: mayo 2022

Cómo crear un menú de navegación multi idioma en Shopify

Si creas un aplicación embebida en Shopify, tienes la posibilidad de crear un menú de navegación multi idioma para acceder a las distintas partes de tu aplicación, en el idioma establecido para la cuenta del administrador.

El menú de navegación de una aplicación embebida

Normalmente éste menú lo puedes definir en la configuración de la aplicación. Y se creará automáticamente al momento de cargar la página. Pero posee la limitación de solo ser compatible con un solo idioma, entonces, si tienes mas ese menú va a estar siempre en el mismo idioma.

Crear el menú desde React con App-Bridge

Para solventar esto podemos usar el componente NavigationMenu de App-Bridge. Que no es para crear menús adicionales, sino acceder a el mismo que mostré en el párrafo anterior y se crea antes de renderizar el resto de la aplicación. Con App-Bridge le decimos a Shopify que vamos a crear un menú y le pasamos la etiqueta y dirección de cada sección.

Crear un componente para definir las rutas

Para la creación del menú de navegación multi idioma, necesitamos definir el texto y el enlace de cada entrada del menú con Applink, pues éste es el tipo de dato que acepta NavigationMenu.

Entoces simplemente podemos hacer un arreglo con la traducción del texto (en este caso uso react-i18n de Shopify) y el enlace. Posteriormente recorremos cada posición del arreglo y generamos el AppLink para enviarlo a la aplicación.

import { AppLink } from '@shopify/app-bridge/actions';

const menuEntries = (i18n) => ([
  {
    label: i18n.translate('Menu.dashboard'),
    destination: '/dashboard',
  },
  {
    label: i18n.translate('Menu.settings'),
    destination: '/settings',
  },
]);

const menuItems = (app, i18n) => {
  const items = [];
  const entries = menuEntries(i18n);

  let active;

  entries.forEach((entry) => {
    const menuLink = AppLink.create(app, entry);
    items.push(menuLink);

    if (window.location.pathname.includes(entry.destination)) {
      active = menuLink;
    }
  });

  return { items, active };
};

export { menuItems };

Cargar el componente en la aplicación

Una vez que tengamos un componente que devuelva las entradas del menú traducidas y en formato AppLink. Podemos pasarlas al componente NavigationMenu utilizando la función create().

Primero importamos el componente realizado en el paso anterior:

import { menuItems } from './NavMenu';

Luego simplemente usamos el hook useAppBridge() para obtener la instacia de la aplicación embebida. Guardamos los enlaces en una variable y posteriormente se lo pasamos como argumentos a NavigationMenu para que cree el menú.

const app = useAppBridge();
const menuOptions = menuItems(app, i18n);

NavigationMenu.create(app, menuOptions);

¡Y listo! Ya tendrás tu menú de navigación multi idioma.

Espero que te haya sido de ayuda y ahora puedas tener un menú principal que funcione en los idiomas soportados por tú aplicación.

Deja un comentario

Mi entrevista en Camino Dev

Camino Dev es un podcast 100% en español hospedado por Lina Montaño y Miguelangel Rendon. En éste podcast cuentan las historias y anécdotas de los inicios de muchos profesionales de las TICs.

Debido a que conocí a Lina en un JSConf, empecé a escuchar el podcast desde sus inicios y me encantó por ser distinto a todos. El hecho de conocer cómo otras personas se iniciaron te hace recordar cómo fue tu inicios, lo complicado que parecía todo, las barreras y la motivación inicial para continuar. Además que todos los episodios terminan en final feliz porque los invitados son personas que están trabajando en las TICs y como les va actualmente.

Episodio #19 de Camino Dev

Tuve la oportunidad de participar en la edición 19 del podcast. Fui invitado por los organizadores para hablar de mis inicios, como llegué a ser programador y profesor y muchas cosas que prefiero que escuchen en el podcast.

Fue una gran experiencia participar en él. Es fácil escuchar las historias de los demás pero hablar de la de uno me pareció difícil. Creo que nunca había contado mi experiencia públicamente y pensaba que no es interesante o que va a aburrir y dar pena. Pero ojalá os guste y sea motivadora a algunas personas que lo escuchen.

Si quieren conocer mas de mí y de mis inicios en mi carrera profesional, los invito a escuchar el episodio #19 de Camino Dev a continuación.

#19: Miguel Ángel Useche - Camino Dev
El episodio #19 donde aparezco

Les recomiendo seguir este podcast si desean buscar motivación para iniciarse en el mundo de la informática, si están empezando para que conozcan otras historias y apliquen los que hicieron en sus vidas. Si ya son profesionales, no está demás conocer las historias de otros e inclusive usar esas experiencias cuando uno se cambia de área.

Y si te gusta mucho, comparte el contenido para que llegue a otros y expandir mas nuestros conocimientos.

Deja un comentario