Como agregar un archivo de traducción a un Módulo en Magento 2

Magento es un CMS que fue creado para que pudiera ejecutarse en distintos idiomas, esto quiere decir que deberíamos poder traducir tanto la interface de BackEnd así como el FrontEnd, con esto me refiero a traducir la parte administrativa y el contenido que el cliente ve en una tienda de comercio electrónico.

En este artículo voy a mostrar como los contenidos de un Módulo pueden ser configurados para que sean traducibles en diferentes idiomas.

Para llevar a cabo este ejercicio vamos a utilizar el modulo generado en el curso de Layout & Template en un módulo de Magento 2 que podrás descargar desde aquí o bien desde el propio curso.

Lo que mostraré a continuación es algo muy sencillo si vemos el archivo PHTML que se creó en la vista en la ruta app/code/Marcgento/PoliticasPrivacidad/view/frontend/templates/políticas-de-privacidad.phtml podremos ver el siguiente contenido:

<h1><?php $block->getTitle() ?></h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Lo que vamos a realizar es agregar un subtítulo en una etiqueta <h3> que tendrá la siguiente apariencia:

<h1><?= $block->getTitle() ?></h1>
<h3><!--?php echo __('Descripción politicas de privacidad') ?--></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Como se puede apreciar es un simple texto impreso mediante el método echo de PHP para imprimir un texto en pantalla pero la diferencia es que está encerrado dentro de doble guion bajo y entre paréntesis de esta forma __( ) Esto es una instrucción reservada que le permitirá organizar las traducciones de los textos en los módulos personalizados.

Ahora bien pasemos a crear nuestro archivo de traducciones, para lo cual lo primero es crear una carpeta dentro de nuestro módulo llamada i18n que estará ubicada en app/code/Margento/PoliticasPrivacidad/i18n y dentro de esta carpeta crearemos un archivo llamado en_US.csv para las traducciones a Inglés y tendrá el siguiente contenido

"Descripción politicas de privacidad","Description of privacy policies"

Lo anterior es una traducción en la vista ahora bien esto podemos aplicarlo también en las clases de Bloque dentro de Block la clase PoliticasPrivacidad.php, para lo cual voy a mostrar como de una forma similar y sencilla dejaría listo el método del título para que también fuese traducible en distintos idiomas, si modifico un poco el método de la clases se vería de la siguiente forma:

<?php
namespace MarcgentoPoliticasPrivacidadBlock;
class PoliticasPrivacidad extends MagentoFrameworkViewElementTemplate
{
	public function getTitle()
	{
		return __('Políticas de Privacidad de la tienda');
	}
}

Se ha agregado de forma similar el método getTitle() agregando el método de traducciones __( ) igual a como se aplicó en la vista, esto estaría dando pie a que sea un título que pueda ser configurado en diferentes idiomas.

Ahora pasemos nuevamente a actualizar el archivo de traducciones en_US.csv quedando de la siguiente forma:

"Descripción politicas de privacidad","Description of privacy policies"
"Políticas de Privacidad de la tienda","Store Privacy Policies"

Con todo lo ya aplicado vamos a entender un poco que está pasando o que es lo que estamos tratando de hacer, probablemente hasta este punto no hemos visto ningún cambio de traducción de idioma alguno, pero aún faltan un par de cosas por configurar así que ahora explicaré un poco que tenemos, lo importante en todo esto es entender que cualquier impresión de texto ya sea en las vistas, o clases de bloques que impliquen mandar a imprimir un texto es de suma importancia que nos acostumbremos a definirlos con el método de traducciones ya mencionado __( ) ya que en el futuro será muy sencillo aplicar una traducción de idiomas si así nos lo piden posteriormente, el archivo .CSV de traducciones hay que entender que está definido por un “parámetro, valor” El parámetro será el primer texto y el valor el segundo ambos valores dentro de comillas dobles, en el caso del ejemplo se muestra como “Descripción políticas de privacidad”,”Description of privacy policies” esto quiere decir que el método de traducciones __( ) cada que se encuentre en cualquier sección del código indicara que busque en el Texto original el primer Texto y si encuentra una coincidencia coloque el valor definido del segundo parámetro, ahora entendemos cual será el valor que toma como referencia para buscar su correspondiente y ese será el que este en el código en las vistas o clases de bloques, ese es el elemental.

¿Cómo cambiamos entre distintos idiomas?

Pasemos a lo que necesitamos configurar antes de poder continuar, y ahora entendamos una cosa, ¿Cómo podemos hacer para indicarle a nuestra tienda que necesito cambiar entre uno u otro idioma? para lo cual Magento lo maneja como VISTAS y para crear una nueva vista de nuestra tienda con un idioma en Ingles y uno en Español lo vamos a crear dentro de nuestro backEnd así que accedamos y dentro vayamos a la sección de Store | Settings | All Stores como se muestra en la siguiente imagen:

En el ejemplo solo tenemos una vista, es la Vista por defecto “Default Store View” vamos a cambiar ese valor dándole un clic en donde nos mostrará un formulario, ahí solo editaremos el Nombre (Name) y le colocaremos Inglés quedando de la siguiente forma:

Ahora lo que realizaremos será crear una segunda vista la Vista en Español para lo cual daremos un clic en la opción superior “Create Store View” en donde nos mostrará el formulario de creación de una nueva vista de tienda, en la cual colocaremos en Name Español, code como es, estatus lo cambiamos a Enabled y por último Sort Order. Le daremos un valor de uno, una vez hecho esto le damos a Save Store View y ya tendríamos nuestra segunda vista de tienda como se muestra en la siguiente imagen:

Aprovechando lo anterior vamos a editar de igual forma nuestros parámetros de Main Website y Main Website Store que no son parte de este artículo pero es para tener más claro lo que estamos haciendo. Tan sólo entremos dándole clic a cada opción y actualicemos el parámetro Name con un valor correspondiente, por ejemplo Maine Webzine lo cambiamos a Ropa deportiva y Maine Webzine Store a Tienda Deportiva al final se mostrará como se ve en la imagen:

Ahora ya hace más sentido porque si ahora mismo vamos a la página principal y actualizamos lo nuevo que podremos ver es una opción en la parte superior que mostrará un select de opciones para cambiar entre uno u otro idioma uno para Inglés y uno para español como se muestra en la imagen:

Pero aun no terminamos, vamos a configurar el idioma correspondiente para cada Vista de tienda que acabamos de crear, esto quiere decir que aquí es en donde indicamos en la configuración cómo resolverá nuestra tienda el archivo de idioma .CSV llamado en_US.csv creado dentro de la carpeta i18n, así que para esto vamos a STORE | Settings | Configuration | GENERAL | General y dentro de la opción Locale Options parámetro Locale es donde podremos configurar el archivo .CSV al correspondiente pero antes de eso veamos que en la parte superior dentro de Default Config si la desplegamos se mostrarán las dos nuevas vistas ya creadas de las tiendas como se ve en la imagen:

Lo que esto quiere decir es que tenemos a estas alturas 3 niveles de configuración el por defecto “Default” que no hace ningún cambio y de forma GLOBAL aplica cualquier configuración para toda la tienda y las dos nuevas opciones Español e Inglés. Si miramos la opción Locale Options parámetro Locale vemos un área de selección que nos permite definir cuál es la localidad de nuestra tienda, en pocas palabras nos permitirá definir configuraciones personalizadas para cada una de las Vistas, hagamos una prueba. Si cambiamos la opción de Default Config a Inglés parece que no ha sucedido nada pero ahora vayamos a la opción de Locale y quitemos el checkbox que dice Use Web site y veremos que ahora si podemos modificar Locale así que buscamos inglés (Estados Unidos) y le damos en Save Config para que guarde la configuración como se muestra en la imagen:

Ahora si ya podremos ver un cambio significativo en nuestra tienda ahora bien si limpiamos la caché del proyecto desde nuestra consola ejecutando el comando bin/magento c:f y recargamos nuevamente la página de inicio al cambiar el idioma a Inglés ahora si podremos ver como los títulos de nuestro modulo personalizado cambian a Inglés así como si volvemos a Español se quedarían como por defecto como se muestra a continuación:

Inglés

Español

¿Qué ha sucedido aquí y cómo es que supo que archivo cargar para el idioma Inglés? En nuestro módulo PoliticasPrivacidad, aquí es donde comento que con haber nombrado al archivo en_US.csv ya que esa es la nomenclatura de código para el idioma Inglés y ¿Cómo es que se esto? y aquí es donde te daré un tip para que puedas aplicarlo para cualquier idioma. Tan sólo vuelve nuevamente a las sección donde configuramos nuestros idiomas en STORES | Settings | Configuration | GENERAL | General y en la sección Locale Options en el parámetro Locale da un clic botón izquierdo justamente encima del cuadro de selección de idiomas y elije la opción Inspeccionar esto hará que te muestre la codificación solo debes mirar el elemento select y abrir sus opciones ahí notarás el valor del idioma más un código de valor por ejemplo value=”en_US” para el idioma inglés y así sucesivamente como se muestra en la imagen:

De modo que así es como deberíamos llamar a cada uno de nuestros archivos de idiomas y colocarlos dentro de la carpeta i18n de nuestro modulo y no olvidar ir a la sección de Locale para indicar el cambio de nuestra vista, si necesitamos un nuevo idioma tendríamos que hacer lo mismo, crear una nueva vista de tienda para ese idioma en particular.

Al final he dejado el módulo con tres idiomas Español, Inglés y Francés para que lo revises y veas lo sencillo que es agregar idiomas a tus módulos personalizados.

Codigo Fuente

Descargar codigo fuente.